當(dāng)前位置：首頁(yè) > 前端技术 > javascript >内容正文

javascript

JavaScript常见的网页特效（元素样式相关属性）

發(fā)布時(shí)間：2024/8/1 javascript 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript常见的网页特效（元素样式相关属性）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

JavaScript常見(jiàn)的網(wǎng)頁(yè)特效

特效樣式
- 1、模態(tài)框拖曳效果
- 2、放大鏡效果
- 3、固定側(cè)邊欄效果
- 4、上下圖片無(wú)間斷滾動(dòng)
- 5、左右圖片無(wú)間斷滾動(dòng)
如何實(shí)現(xiàn)這些效果呢？
元素偏移量offset系列
元素可視區(qū)client系列
元素滾動(dòng)scroll系列
如何實(shí)現(xiàn)上面那些效果呢
- 模態(tài)框拖曳效果代碼實(shí)現(xiàn)
- 放大鏡效果代碼實(shí)現(xiàn)
- 固定側(cè)邊欄效果代碼實(shí)現(xiàn)
- 上下圖片無(wú)間斷滾動(dòng)代碼實(shí)現(xiàn)
- 左右圖片無(wú)間斷滾動(dòng)代碼實(shí)現(xiàn)

特效樣式

1、模態(tài)框拖曳效果

2、放大鏡效果

3、固定側(cè)邊欄效果

4、上下圖片無(wú)間斷滾動(dòng)

5、左右圖片無(wú)間斷滾動(dòng)

如何實(shí)現(xiàn)這些效果呢？

我想介紹一下元素偏移量offset系列、元素可視區(qū)client系列、元素滾動(dòng)scroll系列相關(guān)的知識(shí)。

元素偏移量offset系列

offset含義：offset的含義是偏移量，使用offset的相關(guān)屬性可以動(dòng)態(tài)地獲取該元素的位置、大小等。

屬性說(shuō)明

offsetLeft	返回元素相對(duì)其帶有定位的父元素左邊框的偏移
offsetTop	返回元素相對(duì)其帶有定位的元素上方的偏移
offsetWidth	返回自身的寬度（包括padding、邊框和內(nèi)容區(qū)域的寬度）。注意返回?cái)?shù)值不帶單位
offsetHeight	返回自身的高度（包括padding、邊框和內(nèi)容區(qū)域的高度）。注意返回?cái)?shù)值不帶單位
offsetParent	返回作為該元素帶有定位元素的父級(jí)元素（如果父級(jí)都沒(méi)有定位則返回body）

offset與style的區(qū)別

Offsetstyle

offset可以得到任意樣式表中的樣式值	style只能得到行內(nèi)樣式表中的樣式值
offset系列獲得的數(shù)值是沒(méi)有單位的	style.width獲得的是帶有單位的字符串
offsetWidth包含padding、border、width的值	style.width獲得的是不包含padding、border的值
offsetWidth等屬性是只讀屬性，只能獲取不能賦值	style.width是可讀寫屬性，可以獲取也可以賦值

案例

獲取鼠標(biāo)位置：鼠標(biāo)指針在盒子內(nèi)的坐標(biāo)位置示意圖分析。

效果展示

JavaScript代碼如下

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>#box{position: absolute;top: 50px;left: 20px;background-color: pink;;width: 200px;height: 200px;} </style> <body><div id="box"></div><script>var box = document.querySelector('#box');//輸出盒子的寬帶和高度console.log(box.offsetWidth);console.log(box.offsetHeight);box.addEventListener('mousemove',function(e){//獲取box的偏移量var left = box.offsetLeft;var top = box.offsetTop;console.log('偏移量:'+'('+left+','+top+')');//計(jì)算鼠標(biāo)在box中的坐標(biāo)var x = e.pageX-left;var y = e.pageY-top;console.log('x軸的坐標(biāo):'+x+','+'y軸的坐標(biāo):'+y);})</script> </body> </html>

元素可視區(qū)client系列

client系列：client中文意思是客戶端，通過(guò)使用client系列的相關(guān)屬性可以獲取元素可視區(qū)的相關(guān)信息。

屬性說(shuō)明

clientLeft	返回元素左邊框的大小
clientTop	返回元素上邊框的大小
clientWidth	返回自身的寬度（包含padding），內(nèi)容區(qū)域的寬度（不含邊框）。注意返回?cái)?shù)值不帶單位
clientHeight	返回自身的高度（包含padding），內(nèi)容區(qū)域的高度（不含邊框）。注意返回?cái)?shù)值不帶單位

案例

獲取元素client。

效果展示

JavaScript代碼如下

<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>Document</title><style>div {width: 200px;height: 200px;background-color: pink;overflow: auto;border: 10px solid red;padding: 10px;}</style><body><div>我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容我是內(nèi)容</div><script>var div = document.querySelector('div');console.log(div.clientHeight);console.log(div.clientTop);console.log(div.clientLeft);</script></body> </html>

元素滾動(dòng)scroll系列

scroll含義：scroll的含義是滾動(dòng)，使用scroll系列的相關(guān)屬性可以動(dòng)態(tài)地獲取該元素的滾動(dòng)距離、大小等。

屬性說(shuō)明

scrollLeft	返回被卷去的左側(cè)距離，返回?cái)?shù)值不帶單位
scrollTop	返回被卷去的上方距離，返回?cái)?shù)值不帶單位
scrollWidth	返回自身的寬度，不含邊框。注意返回?cái)?shù)值不帶單位
scrollHeight	返回自身的高度，不含邊框。注意返回?cái)?shù)值不帶單位

案例
獲取scrollHeight。

效果展示

JavaScript代碼如下

如何實(shí)現(xiàn)上面那些效果呢

模態(tài)框拖曳效果代碼實(shí)現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>/* 單擊彈出遮罩層的樣式 */.login-header{width: 100%;text-align: center;font-size: 20pt;position: absolute;cursor: pointer;}.modal{width: 500px;height: 200px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);display: none;box-shadow: 0px 0px 20px #ddd;z-index: 999;cursor: move;}/* 表單結(jié)構(gòu) */.modal form{display: flex;flex-direction: column;width: 100%;height: 100%;}/* 表單標(biāo)題 */.modal form .item1{flex: 1;display: flex;justify-content: center;align-items: center;font-weight: bold;}/* 表單的輸入樣式 */.modal form .item2{margin: 0 auto;width: 70%;display: flex;flex: 1;flex-direction: column;justify-content: space-around;align-items: center;}.username{margin-left: 16px;}/* 登錄會(huì)員樣式 */.vip{border: 1px solid #ccc;border-radius: 20px;padding: 3px 40px;background-color: orange;color: #fff;}/* 關(guān)閉按鈕樣式 */.close{position: absolute;right: -10px;top: -10px;border: 1px solid #ccc;width: 20px;height: 20px;text-align:center;line-height: 17px;border-radius: 50%;background-color: wheat;cursor: pointer;}/* 遮罩層樣式 */.login-bg{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background-color: #ccc;display: none;} </style> <body><div class="login-bg"></div><div class="modal"><form><div class="item1">登錄會(huì)員</div><div class="item2"><div class="username"><label>用戶名：<input type="text" name="uesername"></label></div><div class="password"><label>登錄密碼：<input type="password" name="password"></label></div></div><div class="item1"><div class="vip">登錄會(huì)員</div></div></form><div class="close">x</div></div><div class="login-header">單擊登錄會(huì)員...</div><script>var modal = document.querySelector('.modal');var close = document.querySelector('.close');var login = document.querySelector('.login-header');var bg = document.querySelector('.login-bg');//給遮罩層注冊(cè)click事件login.addEventListener('click',function(){modal.style.display = 'block';bg.style.display = 'block';modal.style.backgroundColor = 'white';})//給close注冊(cè)click事件close.addEventListener('click',function(){modal.style.display = 'none';bg.style.display = 'none';})//給modal注冊(cè)mousedown事件modal.addEventListener('mousedown',function(e){//獲取鼠標(biāo)在模態(tài)框中的坐標(biāo)var x = e.pageX - modal.offsetLeft;var y = e.pageY - modal.offsetTop;//定義移動(dòng)函數(shù)var move = function(e){modal.style.left = e.pageX - x + 'px';modal.style.top = e.pageY - y + 'px';}//給文檔對(duì)象注冊(cè)鼠標(biāo)移動(dòng)事件document.addEventListener('mousemove',move);//給文檔注冊(cè)鼠標(biāo)彈起事件document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',move);})})</script> </body> </html>

放大鏡效果代碼實(shí)現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>放大鏡</title><style>#magnifying {display: block;width: 400px;height: 400px;margin: 50px;position: relative;border: 1px solid rgba(122, 74, 74, 0.05);}#origin {position: relative;}#float {display: none;width: 200px;height: 200px;background: #1d882c;border: 1px solid rgb(145, 58, 58);filter: alpha(opacity=30);opacity: 0.3;position: absolute;overflow: hidden;}#mark {position: absolute;display: block;width: 400px;height: 400px;z-index: 10;cursor: move;}#zoom {display: none;position: absolute;top: 0;left: 420px;width: 400px;height: 400px;overflow: hidden;}#zoom img {position: absolute;z-index: 5}</style></head> <body> <div id="magnifying"><div id="origin"><div id="mark"></div><div id="float"></div><img width="400px" src="../../2021-9-25/2021-11-28/document/phone.png"/></div><div id="zoom"><img src="../../2021-9-25/2021-11-28/document/bigphone.png"/></div> </div> <script>window.onload = function () {var Magnifying = document.querySelector("#magnifying");var Origin = document.querySelector("#origin");var Mark = document.querySelector("#mark");var Float = document.querySelector("#float");var Zoom = document.querySelector("#zoom");var ZoomImage = Zoom.getElementsByTagName("img")[0];Mark.addEventListener('mouseover',function () {Float.style.display = "block";Zoom.style.display = "block";});Mark.addEventListener('mouseout',function () {Float.style.display = "none";Zoom.style.display = "none";});Mark.addEventListener('mousemove',function (e) {var _event = e || window.event; //兼容多個(gè)瀏覽器的event參數(shù)模式//計(jì)算鼠標(biāo)中心點(diǎn)的坐標(biāo)var left = _event.clientX - Magnifying.offsetLeft - Origin.offsetLeft - Float.offsetWidth / 2;var top = _event.clientY - Magnifying.offsetTop - Origin.offsetTop - Float.offsetHeight / 2;//判斷鼠標(biāo)中心點(diǎn)是否在圖片內(nèi)部if (left < 0) {left = 0;} else if (left > (Mark.offsetWidth - Float.offsetWidth)) {left = Mark.offsetWidth - Float.offsetWidth;}if (top < 0) {top = 0;} else if (top > (Mark.offsetHeight - Float.offsetHeight)) {top = Mark.offsetHeight - Float.offsetHeight;}Float.style.left = left + "px";Float.style.top = top + "px";//求相對(duì)位置var percentX = left / (Mark.offsetWidth - Float.offsetWidth);var percentY = top / (Mark.offsetHeight - Float.offsetHeight);console.log(percentX);//方向相反，故而是負(fù)值ZoomImage.style.left = -percentX * (ZoomImage.offsetWidth - Zoom.offsetWidth) + "px";ZoomImage.style.top = -percentY * (ZoomImage.offsetHeight - Zoom.offsetHeight) + "px";});} </script> </body> </html>

固定側(cè)邊欄效果代碼實(shí)現(xiàn)

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>.w{width: 70%;margin: 0 auto;margin-top: 10px;}.header{height: 100px;background-color: red;}.bananer{height: 200px;background-color: pink;}.main{height: 1267px;background-color: orange;}.slider-bar{width: 70px;height: 70px;background-color: yellow;position: absolute;left: 85%;top: 330px;}.goBack{display: none;position: absolute;bottom: 30px;cursor: pointer;} </style> <body><div class="header w">頭部區(qū)域</div><div class="bananer w">bananer區(qū)域</div><div class="main w">主體區(qū)域</div><div class="slider-bar"><span class="goBack">返回頂部</span></div><script>var header = document.querySelector('.header');var bananer = document.querySelector('.bananer');var slider = document.querySelector('.slider-bar');var goBack = document.querySelector('.goBack');goBack.addEventListener('click',function(){window.scrollTo(0,0);})document.addEventListener('scroll',function(){//獲取頁(yè)面頂部和左側(cè)卷去了多少slider.style.top = window.pageYOffset;if(window.pageYOffset>(header.scrollHeight+bananer.scrollHeight+30)){goBack.style.display = 'block';slider.style.position = 'fixed';slider.style.left = '85%';slider.style.top = '0px';}else{slider.style.position = 'absolute';slider.style.left = '85%'slider.style.top = (header.scrollHeight+bananer.scrollHeight+30)+'px'goBack.style.display = 'none';}})</script> </body> </html>

上下圖片無(wú)間斷滾動(dòng)代碼實(shí)現(xiàn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>上下無(wú)間斷滾動(dòng)</title><body> <div id="demo" style=" margin-left: 300px; overflow:hidden;height:500px;width:220px; border:1px solid #dde5bc; overflow:hidden;float:left"><div id=demo1> <img src="../../../11-27/1.gif" width="220" height="360"><img src="../../../11-27/2.gif" width="220" height="360"> <img src="../../../11-27/3.gif" width="220" height="360"><img src="../../../11-27/4.gif" width="220" height="360"><img src="../../../11-27/5.gif" width="220" height="360"></div><div id=demo2></div> </div> <script>var speed=10var demo=document.getElementById("demo");var demo2=document.getElementById("demo2");var demo1=document.getElementById("demo1");demo2.innerHTML=demo1.innerHTMLfunction Marquee(){if(demo2.offsetTop-demo.scrollTop<=0)demo.scrollTop-=demo1.offsetHeightelse{demo.scrollTop++}}var MyMar=setInterval(Marquee,speed)demo.onmouseover=function() {clearInterval(MyMar)}demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} </script> </body> </html>

左右圖片無(wú)間斷滾動(dòng)代碼實(shí)現(xiàn)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>左右圖片滾動(dòng)</title> </head> <style type="text/css">#demo {background: #FFF;overflow:hidden;border: 1px dashed #CCC;width: 1000px;}#demo img {width: 220px;height: 360px;border: 3px solid #F2F2F2;}#indemo {float: left;width: 800%;}#demo1 {float: left;}#demo2 {float: left;}</style> <body> <div id="demo"> <div id="indemo"> <div id="demo1"> <a href="#"><img src="../../../11-27/1.gif" border="0" /></a> <a href="#"><img src="../../../11-27/2.gif" border="0" /></a> <a href="#"><img src="../../../11-27/3.gif" border="0" /></a> <a href="#"><img src="../../../11-27/4.gif" border="0" /></a> <a href="#"><img src="../../../11-27/5.gif" border="0" /></a> </div> <div id="demo2"></div> </div> </div> <script> var speed=10; var tab=document.getElementById("demo"); var tab1=document.getElementById("demo1"); var tab2=document.getElementById("demo2"); tab2.innerHTML=tab1.innerHTML; function Marquee(){ if(tab2.offsetWidth-tab.scrollLeft<=0) tab.scrollLeft-=tab1.offsetWidth else{ tab.scrollLeft++; } } var MyMar=setInterval(Marquee,speed); tab.onmouseover=function() {clearInterval(MyMar)}; tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};</script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的JavaScript常见的网页特效（元素样式相关属性）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Ruby On Rails简介
下一篇： Hacking Diablo II之外挂