有時候,我們想閱讀頁面中某段精彩的內容,但由于頁面太長,用戶需要自己滾動頁面,查找起來非常麻煩 ,很容易讓人失去繼續往下閱讀的興趣。這樣體驗非常不好,所以我們可以想辦法 實現點擊某段文字或者圖片跳轉到頁面指定位置,方便用戶的閱讀。
這里作為錨點的標簽可以是任意元素。
<a href="#aa">跳轉到 id 為 aa 標記的錨點</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點的標簽只能是 a 標簽。
<a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<div id="abb">bbb</div>
注意:當以 ' a 標簽 name 屬性作為錨點 ' 和 ' 利用 id 為標記的錨點 ' 同時出現(即以 name 為錨點和以 id 為錨點名字相同時),會將后者作為錨點。
window.scrollTo 滾動到文檔中的某個坐標。可提供滑動效果,想具體了解 scrollTo() 可以看看 MDN 中的介紹。
話不多說,看下面代碼
「html 部分」:
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 為指定跳轉到該位置的DOM節點
let bridge = toEl;
let body = document.body;
let height = 0;
// 計算該 DOM 節點到 body 頂部距離
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滾動到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法讓當前的元素滾動到瀏覽器窗口的可視區域內。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意:此功能某些瀏覽器尚在開發中,請參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對應的標準文檔可能被重新修訂,所以在未來版本的瀏覽器中該功能的語法和行為可能隨之改變。
下面為了方便看效果,把上面的代碼整理在一起。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 600px;
height: 300px;
background-color: pink;
}
</style>
</head>
<body>
<a href="#aa">跳轉到以 id 為 aa 標記的錨點 a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉到 name 為 bb 的 a 標簽錨點</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標簽的錨點</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳轉到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">dd</div>
<p>-------------分隔線-------------</p>
<div></div>
</body>
<script>
var cc = document.querySelector('#cc')
var linkc = document.querySelector('#linkc')
function to(toEl) {
//ele為指定跳轉到該位置的DOM節點
let bridge = toEl;
let body = document.body;
let height = 0;
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
console.log(height)
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
</script>
<script>
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
</script>
</html>
效果圖:
HTML(Hyper Text Markup Language超文本標識語言)
HTML發展的5個階段
1.HTML1.0版本是因為當時有很多不同版本,有些人認為蒂姆·伯納斯·李的版本應該最初版,這個版本沒有IMG元素。
2.在IETF主持下,1995年11月在瑞士日內瓦舉行的第一次www會議上成立了一個HTML工作小組,它的主要任務是把HTML形式化成為一中SGML DTD,稱之為HTML Level2。
3.HTML3.0規范是有當時成立的W3C于1995年3月推出,提供了很多新的特性,例如表格,文字繞排,和復雜數學元素顯示,雖然它是設計用來兼容2.0版本的,但是實現這個標準的工作在當時過于復雜,在草案于1995年過期時,標準開發業因為缺乏瀏覽器支持而終止了。3.1版本從未被正式提出,而下一個被提出的版本是HTML3.2,去掉了大部分3.0中的新特性,但是加入了很多特定瀏覽器。
4.HTML4.0同樣也加入了很多特定瀏覽器的元素和屬性,但是同時也開始“清理”這個標準,把一些元素和屬性標記為過時的,建議不再使用它們。HTML的未來和CSS結合會很好。
5.HTML5目前仍為草案,并已經被W3C認可。
主體部分包含文本、圖像和鏈接。它包括在<BODY>...</BODY>標簽內
頭部部分包含標題和其他說明信息。包括在<HEAD>...</HEAD>標簽內
一個HTML文件是由一系列的元素和標簽組成的
HTML標簽的介紹
HTML的標簽分為單獨出現的標簽和成對出現的標簽兩種
說明:在每個HTML標簽,大、小寫混寫均可
例如<HTML>、<html>和<Html>,其結果都是一樣的。
HTML元素介紹
當用一組HTML標簽將一段文字包含在中間時,這段文字與包含文字的HTML標簽被稱之為一個元素
在所有HTML文件,最外層的元素是有<html>標簽建立的。在<html>標簽所建立的元素中,包含了練個主要的子元素,這兩個子元素是由<head>標簽與<body>標簽所建立的。<head>標簽所建立的元素內容為 文件標題,而<body>標簽所建立的元素內容為文件主體。
1.手工直接編寫
記事本等,存成.htm或.html格式
2.使用可視化HTML編輯器
Frontpage、Dreamweaver等
3.有web服務器(或稱http服務器)一方實時動態地生成。
演示用記事本創建網頁:
標位置
當我們給某一個盒子添加鼠標事件監聽時(click、mouseover、mouseenter、mouseout等事件), 都一定會有以下四組值:
event.pageX event.pageY
event.screenX event.screenY
event.clientX event.clientY
event.offsetX event.offsetY
event.pageY 表示鼠標指針, 到頁面頂端的距離。IE6、7、8不兼容
event.screenY 表示鼠標指針, 到屏幕頂端的距離
event.clientY 表示鼠標指針, 到視口頂端的距離(視口就是當前可視窗口)
event.offsetY 表示鼠標指針, 到盒子頂端的距離
規律:
1、當頁面沒有卷動的時候, pageY一定等價于clientY。或換句話說pageY等價于clientY+頁面卷動的值scrollTop。
2、IE678不兼容pageX、pageY
offsetX/Y指的不是距離你監聽的那個盒子左上角的距離, 而是指的你現在鼠標指針所在位置到此時最內層盒子左上角的距離。
getBoundingClientRect 用于獲取某個元素相對于視窗的位置集合。集合中有top, right, bottom, left等屬性。
event.getBoundingClientRect().left;
具體區別:
event.pageX event.pageY
event.screenX event.screenY
event.clientX event.clientY
event.offsetX event.offsetY
圖解: https://www.cnblogs.com/Abner5/p/5855274.html?utm_source=itdadao&utm_medium=referral
event.getBoundingClientRect()
圖解: https://www.cnblogs.com/Songyc/p/4458570.html
實例: 鼠標點擊特效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
/*cursor: none;*/
}
img{
width: 100px;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<script type="text/javascript">
var body = document.getElementsByTagName("body")[0];
//如果想點擊body那么body必須設置寬高
document.onclick = function(e){
var ev = e || window.event;//事件對象的兼容
var left = ev.clientX;
var top = ev.clientY;
var img = document.createElement("img");
img.setAttribute("src","img/eagle.png");
img.style.left = left + "px";
img.style.top = top + "px";
body.appendChild(img);
//因為拖拽圖片圖片有一種神奇的魔力 也就是我們所有的默認行為
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue = false;
}
}
</script>
</body>
</html>
盒子位置
任何一個元素都有offsetParent屬性和offsetLeft、offsetTop屬性
對象.offsetParent獲得定位祖先元素, 一層一層往上找, 如果不存在就是body和絕對定位類似
對象.offsetLeft獲取到定位父元素距離左邊的值, 一層一層往上找, 如果不存在就是body
對象.offsetTop獲取到定位父元素距離上邊的值, 一層一層往上找, 如果不存在就是body
offsetWidth 盒子的寬度
offsetHeight 盒子的高度
document.documentElement.clientWidth 文檔的寬度
document.documentElement.clientHeight 文檔的高度
//可視區域寬高
//console.log(document.body.clientWidth);//個別瀏覽器
//console.log(document.documentElement.clientWidth);//高版本
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
實例1:獲取行內樣式的寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
console.log(div.style.width);//操作的都是行內
//不兼容
//高版本
console.log(window.getComputedStyle(div).width)
//低版本
console.log(div.currentStyle.width)
</script>
</body>
</html>
實例2: 獲取盒子的寬度和高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
}
</style>
</head>
<body>
<div></div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
//盒子寬高 number類型
console.log(div.offsetWidth)
console.log(div.offsetHeight)
</script>
</body>
</html>
實例3: 獲取盒子的位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
position: relative;
}
span{
width: 100px;
height: 100px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
//盒子距離定位父元素(div)的位置
console.log(span.offsetLeft)
console.log(span.offsetTop)
</script>
</body>
</html>
實例4: 獲取盒子的凈位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
position: relative;
}
span{
width: 500px;
height: 88px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
//我們在懶加載的時候就用到過凈位置
//http://jquery.cuishifeng.cn/offset.html
//凈位置就是盒子到body的位置
//console.log(span.offsetTop)
console.log(span.offsetParent);//定位復原素(div)
//他返回一個信息集合
console.log(span.getBoundingClientRect());//這個東西就可以得到span的所有位置關系
//top和left值就是我們所需要的凈位置
//我們知道我們無法直接獲取該盒子到body的位置 但是我們我們可以獲取該合資距離他有定位祖先元素的位置 那么這樣我們就可以一層一層網上找
/*body
div(定位)
span
span.offsetTop ->sapn.offsetParent
div.offsetTop*/
</script>
</body>
</html>
實例5 編寫凈位置函數
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 600px;
height: 300px;
background-color: red;
margin: 50px;
padding: 50px;
/*position: relative;*/
}
span{
width: 500px;
height: 88px;
display: block;
background-color: orange;
}
</style>
</head>
<body>
<div>
<span></span>
</div>
<script type="text/javascript">
var div = document.getElementsByTagName("div")[0];
var span = document.getElementsByTagName("span")[0];
//方法一: 編寫自定義函數
console.log(pos(span)); //100
function pos(obj){
//用一個變量存儲盒子到頁面的初始值
var left = obj.offsetLeft;
//因為定位父盒子不確定 所以用一個變量臨時存儲 后面替換
var par = obj.offsetParent;
while(par){
left += par.offsetLeft;
par = par.offsetParent;
}
return left;
}
//方法二: getBoundingClientRect里面包含了到頁面的left top值
console.log(span.getBoundingClientRect().left) //100
</script>
</body>
</html>
拖拽三大事件
鼠標按下onmousedown
鼠標移動onmousemove
鼠標抬起onmouseup
實例: 鼠標拖拽
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
cursor: move;
background-color: orange;
/*元素如果可以拖拽他必定是定位元素*/
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
今天我們學習了拖拽 感覺老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標按下onmousedown
//鼠標移動onmousemove
//鼠標抬起onmouseup
//獲取元素
var div = document.getElementsByTagName("div")[0];
div.onmousedown = function(e){
var ev = e || window.event;
//我按下時把鼠標到盒子的位置求出來
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移動鼠標那么盒子跟著你跑
console.log(ev.clientX,ev.offsetX)
console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)
//鼠標移動的位置就是鼠標到可視區的位置-一開始鼠標按下的位置
div.style.left = ev.clientX - startX + "px";
div.style.top = ev.clientY - startY + "px";
//div.style.left = ev.clientX + "px";
//div.style.top = ev.clientY + "px";
}
//我們習慣把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠標之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup = null;
}
//如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>
實例: 鼠標拖拽--防止拖出頁面
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 200px;
height: 200px;
cursor: move;
background-color: orange;
/*元素如果可以拖拽他必定是定位元素*/
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div>
今天我們學習了拖拽 感覺老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標按下onmousedown
//鼠標移動onmousemove
//鼠標抬起onmouseup
//獲取元素
var div = document.getElementsByTagName("div")[0];
div.onmousedown = function(e){
var ev = e || window.event;
//我按下時把鼠標到盒子(div)的位置求出來
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因為我們向左上角移動那么盒子就不跟著我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移動鼠標那么盒子跟著你跑
console.log(ev.clientX,ev.offsetX)
console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)
var lDis = ev.clientX - startX;
var rDis = ev.clientY - startY;
if(rDis < 0){
rDis = 0;
}
if(lDis < 0){
lDis = 0;
}
if(lDis > document.documentElement.clientWidth-div.offsetWidth){
lDis = document.documentElement.clientWidth-div.offsetWidth;
}
if(rDis > document.documentElement.clientHeight-div.offsetHeight){
rDis = document.documentElement.clientHeight-div.offsetHeight;
}
//鼠標移動的位置就是鼠標到可視區的位置-一開始鼠標按下的位置
div.style.left = lDis + "px";
div.style.top = rDis + "px";
//div.style.left = ev.clientX + "px";
//div.style.top = ev.clientY + "px";
}
//我們習慣把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠標之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup = null;
}
//如果拖拽圖片或者文字那么此時拖拽失效 所以我們需要清除默認行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>
特別注意:
因為圖片、文字選中是也會被拖拽, 這是一種默認行為, 所以在鼠標按下時, 我們需要清除這種默認行為。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。