整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
有時(shí)候，我們想閱讀頁(yè)面中某段精彩的內(nèi)容，但由于頁(yè)面太長(zhǎng)，用戶需要自己滾動(dòng)頁(yè)面，查找起來(lái)非常麻煩 ，很容易讓人失去繼續(xù)往下閱讀的興趣。這樣體驗(yàn)非常不好，所以我們可以想辦法 實(shí)現(xiàn)點(diǎn)擊某段文字或者圖片跳轉(zhuǎn)到頁(yè)面指定位置，方便用戶的閱讀。
這里作為錨點(diǎn)的標(biāo)簽可以是任意元素。
<a href="#aa">跳轉(zhuǎn)到 id 為 aa 標(biāo)記的錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<div id="aa">a</div>
這里作為錨點(diǎn)的標(biāo)簽只能是 a 標(biāo)簽。
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
<div id="abb">bbb</div>
注意：當(dāng)以 ' a 標(biāo)簽 name 屬性作為錨點(diǎn) ' 和 ' 利用 id 為標(biāo)記的錨點(diǎn) ' 同時(shí)出現(xiàn)（即以 name 為錨點(diǎn)和以 id 為錨點(diǎn)名字相同時(shí)），會(huì)將后者作為錨點(diǎn)。
window.scrollTo 滾動(dòng)到文檔中的某個(gè)坐標(biāo)。可提供滑動(dòng)效果，想具體了解 scrollTo() 可以看看 MDN 中的介紹。
話不多說(shuō)，看下面代碼
「html 部分」:
<a id="linkc">平滑滾動(dòng)到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">c</div>
「js 部分」:
var linkc = document.querySelector('#linkc')
var cc = document.querySelector('#cc')
function to(toEl) {
// toEl 為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
let bridge = toEl;
let body = document.body;
let height = 0;
// 計(jì)算該 DOM 節(jié)點(diǎn)到 body 頂部距離
do {
height += bridge.offsetTop;
bridge = bridge.offsetParent;
} while (bridge !== body)
// 滾動(dòng)到指定位置
window.scrollTo({
top: height,
behavior: 'smooth'
})
}
linkc.addEventListener('click', function () {
to(cc)
});
Element.scrollIntoView() 方法讓當(dāng)前的元素滾動(dòng)到瀏覽器窗口的可視區(qū)域內(nèi)。想具體了解 scrollIntoView() 可以看看 MDN 中的介紹。
下面也直接上代碼
「html 部分」:
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 d</a>
<p>-------------分隔線-------------</p>
<div id="dd">ddd</div>
「js 部分」:
var dd = document.querySelector('#dd')
function goTo(){
dd.scrollIntoView()
}
注意：此功能某些瀏覽器尚在開(kāi)發(fā)中，請(qǐng)參考瀏覽器兼容性表格以得到在不同瀏覽器中適合使用的前綴。由于該功能對(duì)應(yīng)的標(biāo)準(zhǔn)文檔可能被重新修訂，所以在未來(lái)版本的瀏覽器中該功能的語(yǔ)法和行為可能隨之改變。
下面為了方便看效果，把上面的代碼整理在一起。
<!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">跳轉(zhuǎn)到以 id 為 aa 標(biāo)記的錨點(diǎn) a</a>
<p>-------------分隔線-------------</p>
<a name="aa">hhh</a>
<div id="aa">aa</div>
<a href="#bb" >跳轉(zhuǎn)到 name 為 bb 的 a 標(biāo)簽錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<a name="bb">name 為 bb 的 a 標(biāo)簽的錨點(diǎn)</a>
<p>-------------分隔線-------------</p>
<div>bb</div>
<a id="linkc">平滑滾動(dòng)到 c</a>
<p>-------------分隔線-------------</p>
<div id="cc">cc</div>
<a onclick="goTo()">利用 scrollIntoView 跳轉(zhuǎn)到 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為指定跳轉(zhuǎn)到該位置的DOM節(jié)點(diǎn)
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超文本標(biāo)識(shí)語(yǔ)言）
HTML發(fā)展的5個(gè)階段
1.HTML1.0版本是因?yàn)楫?dāng)時(shí)有很多不同版本，有些人認(rèn)為蒂姆·伯納斯·李的版本應(yīng)該最初版，這個(gè)版本沒(méi)有IMG元素。
2.在IETF主持下，1995年11月在瑞士日內(nèi)瓦舉行的第一次www會(huì)議上成立了一個(gè)HTML工作小組，它的主要任務(wù)是把HTML形式化成為一中SGML DTD，稱(chēng)之為HTML Level2。
3.HTML3.0規(guī)范是有當(dāng)時(shí)成立的W3C于1995年3月推出，提供了很多新的特性，例如表格，文字繞排，和復(fù)雜數(shù)學(xué)元素顯示，雖然它是設(shè)計(jì)用來(lái)兼容2.0版本的，但是實(shí)現(xiàn)這個(gè)標(biāo)準(zhǔn)的工作在當(dāng)時(shí)過(guò)于復(fù)雜，在草案于1995年過(guò)期時(shí)，標(biāo)準(zhǔn)開(kāi)發(fā)業(yè)因?yàn)槿狈g覽器支持而終止了。3.1版本從未被正式提出，而下一個(gè)被提出的版本是HTML3.2，去掉了大部分3.0中的新特性，但是加入了很多特定瀏覽器。
4.HTML4.0同樣也加入了很多特定瀏覽器的元素和屬性，但是同時(shí)也開(kāi)始“清理”這個(gè)標(biāo)準(zhǔn)，把一些元素和屬性標(biāo)記為過(guò)時(shí)的，建議不再使用它們。HTML的未來(lái)和CSS結(jié)合會(huì)很好。
5.HTML5目前仍為草案，并已經(jīng)被W3C認(rèn)可。
主體部分包含文本、圖像和鏈接。它包括在<BODY>...</BODY>標(biāo)簽內(nèi)
頭部部分包含標(biāo)題和其他說(shuō)明信息。包括在<HEAD>...</HEAD>標(biāo)簽內(nèi)
一個(gè)HTML文件是由一系列的元素和標(biāo)簽組成的
HTML標(biāo)簽的介紹
HTML的標(biāo)簽分為單獨(dú)出現(xiàn)的標(biāo)簽和成對(duì)出現(xiàn)的標(biāo)簽兩種
說(shuō)明：在每個(gè)HTML標(biāo)簽，大、小寫(xiě)混寫(xiě)均可
例如<HTML>、<html>和<Html>,其結(jié)果都是一樣的。
HTML元素介紹
當(dāng)用一組HTML標(biāo)簽將一段文字包含在中間時(shí)，這段文字與包含文字的HTML標(biāo)簽被稱(chēng)之為一個(gè)元素
在所有HTML文件，最外層的元素是有<html>標(biāo)簽建立的。在<html>標(biāo)簽所建立的元素中，包含了練個(gè)主要的子元素，這兩個(gè)子元素是由<head>標(biāo)簽與<body>標(biāo)簽所建立的。<head>標(biāo)簽所建立的元素內(nèi)容為 文件標(biāo)題，而<body>標(biāo)簽所建立的元素內(nèi)容為文件主體。
1.手工直接編寫(xiě)
記事本等，存成.htm或.html格式
2.使用可視化HTML編輯器
Frontpage、Dreamweaver等
3.有web服務(wù)器（或稱(chēng)http服務(wù)器）一方實(shí)時(shí)動(dòng)態(tài)地生成。
演示用記事本創(chuàng)建網(wǎng)頁(yè)：
標(biāo)位置
當(dāng)我們給某一個(gè)盒子添加鼠標(biāo)事件監(jiān)聽(tīng)時(shí)(click、mouseover、mouseenter、mouseout等事件), 都一定會(huì)有以下四組值：
event.pageX event.pageY
event.screenX event.screenY
event.clientX event.clientY
event.offsetX event.offsetY
event.pageY 表示鼠標(biāo)指針, 到頁(yè)面頂端的距離。IE6、7、8不兼容
event.screenY 表示鼠標(biāo)指針, 到屏幕頂端的距離
event.clientY 表示鼠標(biāo)指針, 到視口頂端的距離(視口就是當(dāng)前可視窗口)
event.offsetY 表示鼠標(biāo)指針, 到盒子頂端的距離
規(guī)律：
1、當(dāng)頁(yè)面沒(méi)有卷動(dòng)的時(shí)候, pageY一定等價(jià)于clientY。或換句話說(shuō)pageY等價(jià)于clientY+頁(yè)面卷動(dòng)的值scrollTop。
2、IE678不兼容pageX、pageY
offsetX/Y指的不是距離你監(jiān)聽(tīng)的那個(gè)盒子左上角的距離, 而是指的你現(xiàn)在鼠標(biāo)指針?biāo)谖恢玫酱藭r(shí)最內(nèi)層盒子左上角的距離。
getBoundingClientRect 用于獲取某個(gè)元素相對(duì)于視窗的位置集合。集合中有top, right, bottom, left等屬性。
event.getBoundingClientRect().left;
具體區(qū)別:
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
實(shí)例: 鼠標(biāo)點(diǎn)擊特效
<!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];
//如果想點(diǎn)擊body那么body必須設(shè)置寬高
document.onclick = function(e){
var ev = e || window.event;//事件對(duì)象的兼容
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);
//因?yàn)橥献D片圖片有一種神奇的魔力 也就是我們所有的默認(rèn)行為
if(ev.preventDefault){
ev.preventDefault();
}else{
ev.returnValue = false;
}
}
</script>
</body>
</html>盒子位置
任何一個(gè)元素都有offsetParent屬性和offsetLeft、offsetTop屬性
對(duì)象.offsetParent獲得定位祖先元素, 一層一層往上找, 如果不存在就是body和絕對(duì)定位類(lèi)似
對(duì)象.offsetLeft獲取到定位父元素距離左邊的值, 一層一層往上找, 如果不存在就是body
對(duì)象.offsetTop獲取到定位父元素距離上邊的值, 一層一層往上找, 如果不存在就是body
offsetWidth 盒子的寬度
offsetHeight 盒子的高度
document.documentElement.clientWidth 文檔的寬度
document.documentElement.clientHeight 文檔的高度
//可視區(qū)域?qū)捀?/p>
//console.log(document.body.clientWidth);//個(gè)別瀏覽器
//console.log(document.documentElement.clientWidth);//高版本
var w = document.documentElement.clientWidth || document.body.clientWidth;
var h = document.documentElement.clientHeight || document.body.clientHeight;
實(shí)例1：獲取行內(nèi)樣式的寬度和高度
<!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);//操作的都是行內(nèi)
//不兼容
//高版本
console.log(window.getComputedStyle(div).width)
//低版本
console.log(div.currentStyle.width)
</script>
</body>
</html>
實(shí)例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類(lèi)型
console.log(div.offsetWidth)
console.log(div.offsetHeight)
</script>
</body>
</html>實(shí)例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>實(shí)例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];
//我們?cè)趹屑虞d的時(shí)候就用到過(guò)凈位置
//http://jquery.cuishifeng.cn/offset.html
//凈位置就是盒子到body的位置
//console.log(span.offsetTop)
console.log(span.offsetParent);//定位復(fù)原素(div)
//他返回一個(gè)信息集合
console.log(span.getBoundingClientRect());//這個(gè)東西就可以得到span的所有位置關(guān)系
//top和left值就是我們所需要的凈位置
//我們知道我們無(wú)法直接獲取該盒子到body的位置 但是我們我們可以獲取該合資距離他有定位祖先元素的位置 那么這樣我們就可以一層一層網(wǎng)上找
/*body
div(定位)
span
span.offsetTop ->sapn.offsetParent
div.offsetTop*/
</script>
</body>
</html>實(shí)例5 編寫(xiě)凈位置函數(shù)
<!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];
//方法一: 編寫(xiě)自定義函數(shù)
console.log(pos(span)); //100
function pos(obj){
//用一個(gè)變量存儲(chǔ)盒子到頁(yè)面的初始值
var left = obj.offsetLeft;
//因?yàn)槎ㄎ桓负凶硬淮_定 所以用一個(gè)變量臨時(shí)存儲(chǔ) 后面替換
var par = obj.offsetParent;
while(par){
left += par.offsetLeft;
par = par.offsetParent;
}
return left;
}
//方法二: getBoundingClientRect里面包含了到頁(yè)面的left top值
console.log(span.getBoundingClientRect().left) //100
</script>
</body>
</html>拖拽三大事件
鼠標(biāo)按下onmousedown
鼠標(biāo)移動(dòng)onmousemove
鼠標(biāo)抬起onmouseup
實(shí)例: 鼠標(biāo)拖拽
<!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>
今天我們學(xué)習(xí)了拖拽 感覺(jué)老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標(biāo)按下onmousedown
//鼠標(biāo)移動(dòng)onmousemove
//鼠標(biāo)抬起onmouseup
//獲取元素
var div = document.getElementsByTagName("div")[0];
div.onmousedown = function(e){
var ev = e || window.event;
//我按下時(shí)把鼠標(biāo)到盒子的位置求出來(lái)
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因?yàn)槲覀兿蜃笊辖且苿?dòng)那么盒子就不跟著我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移動(dòng)鼠標(biāo)那么盒子跟著你跑
console.log(ev.clientX,ev.offsetX)
console.log(ev.clientX - ev.offsetX)
console.log(ev.clientY - ev.offsetY)
//鼠標(biāo)移動(dòng)的位置就是鼠標(biāo)到可視區(qū)的位置-一開(kāi)始鼠標(biāo)按下的位置
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";
}
//我們習(xí)慣把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠標(biāo)之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup = null;
}
//如果拖拽圖片或者文字那么此時(shí)拖拽失效 所以我們需要清除默認(rèn)行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>
實(shí)例: 鼠標(biāo)拖拽--防止拖出頁(yè)面
<!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>
今天我們學(xué)習(xí)了拖拽 感覺(jué)老是講的就是一坨翔
</div>
<p>onmouseup</p>
<script type="text/javascript">
//拖拽三大事件
//鼠標(biāo)按下onmousedown
//鼠標(biāo)移動(dòng)onmousemove
//鼠標(biāo)抬起onmouseup
//獲取元素
var div = document.getElementsByTagName("div")[0];
div.onmousedown = function(e){
var ev = e || window.event;
//我按下時(shí)把鼠標(biāo)到盒子(div)的位置求出來(lái)
var startX = ev.offsetX;
var startY = ev.offsetY;
//div.onmousemove = function(e){//因?yàn)槲覀兿蜃笊辖且苿?dòng)那么盒子就不跟著我跑了
document.onmousemove = function(e){
var ev = e || window.event;
//你移動(dòng)鼠標(biāo)那么盒子跟著你跑
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;
}
//鼠標(biāo)移動(dòng)的位置就是鼠標(biāo)到可視區(qū)的位置-一開(kāi)始鼠標(biāo)按下的位置
div.style.left = lDis + "px";
div.style.top = rDis + "px";
//div.style.left = ev.clientX + "px";
//div.style.top = ev.clientY + "px";
}
//我們習(xí)慣把抬起也放入按下里面
document.onmouseup = function(){
document.onmousemove = null;//我抬起鼠標(biāo)之后不想讓他再跟著我跑了
//所以就直接解除綁定
document.onmouseup = null;
}
//如果拖拽圖片或者文字那么此時(shí)拖拽失效 所以我們需要清除默認(rèn)行為
/*if(ev.preventDefault){
ev.preventDefault()
}else{
ev.returnValue = false;
}*/
return false;//如果使用它必須放到最后
}
//基本上很完美了
</script>
</body>
</html>特別注意：
因?yàn)閳D片、文字選中是也會(huì)被拖拽, 這是一種默認(rèn)行為, 所以在鼠標(biāo)按下時(shí), 我們需要清除這種默認(rèn)行為。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
