當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
JavaScript常见的网页特效（元素样式相关属性）
生活随笔
收集整理的這篇文章主要介紹了
JavaScript常见的网页特效（元素样式相关属性）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
JavaScript常見的網頁特效
- 特效樣式
- 1、模態框拖曳效果
- 2、放大鏡效果
- 3、固定側邊欄效果
- 4、上下圖片無間斷滾動
- 5、左右圖片無間斷滾動
- 如何實現這些效果呢？
- 元素偏移量offset系列
- 元素可視區client系列
- 元素滾動scroll系列
- 如何實現上面那些效果呢
- 模態框拖曳效果代碼實現
- 放大鏡效果代碼實現
- 固定側邊欄效果代碼實現
- 上下圖片無間斷滾動代碼實現
- 左右圖片無間斷滾動代碼實現
特效樣式
1、模態框拖曳效果
2、放大鏡效果
3、固定側邊欄效果
4、上下圖片無間斷滾動
5、左右圖片無間斷滾動
如何實現這些效果呢？
我想介紹一下元素偏移量offset系列、元素可視區client系列、元素滾動scroll系列相關的知識。
元素偏移量offset系列
offset含義：offset的含義是偏移量，使用offset的相關屬性可以動態地獲取該元素的位置、大小等。
| offsetLeft | 返回元素相對其帶有定位的父元素左邊框的偏移 |
| offsetTop | 返回元素相對其帶有定位的元素上方的偏移 |
| offsetWidth | 返回自身的寬度（包括padding、邊框和內容區域的寬度）。注意返回數值不帶單位 |
| offsetHeight | 返回自身的高度（包括padding、邊框和內容區域的高度）。注意返回數值不帶單位 |
| offsetParent | 返回作為該元素帶有定位元素的父級元素（如果父級都沒有定位則返回body） |
offset與style的區別
| offset可以得到任意樣式表中的樣式值 | style只能得到行內樣式表中的樣式值 |
| offset系列獲得的數值是沒有單位的 | style.width獲得的是帶有單位的字符串 |
| offsetWidth包含padding、border、width的值 | style.width獲得的是不包含padding、border的值 |
| offsetWidth等屬性是只讀屬性，只能獲取不能賦值 | style.width是可讀寫屬性，可以獲取也可以賦值 |
案例
獲取鼠標位置：鼠標指針在盒子內的坐標位置示意圖分析。
效果展示
JavaScript代碼如下
元素可視區client系列
client系列：client中文意思是客戶端，通過使用client系列的相關屬性可以獲取元素可視區的相關信息。
| clientLeft | 返回元素左邊框的大小 |
| clientTop | 返回元素上邊框的大小 |
| clientWidth | 返回自身的寬度（包含padding），內容區域的寬度（不含邊框）。注意返回數值不帶單位 |
| clientHeight | 返回自身的高度（包含padding），內容區域的高度（不含邊框）。注意返回數值不帶單位 |
案例
獲取元素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>我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容</div><script>var div = document.querySelector('div');console.log(div.clientHeight);console.log(div.clientTop);console.log(div.clientLeft);</script></body> </html>元素滾動scroll系列
scroll含義：scroll的含義是滾動，使用scroll系列的相關屬性可以動態地獲取該元素的滾動距離、大小等。
| scrollLeft | 返回被卷去的左側距離，返回數值不帶單位 |
| scrollTop | 返回被卷去的上方距離，返回數值不帶單位 |
| scrollWidth | 返回自身的寬度，不含邊框。注意返回數值不帶單位 |
| scrollHeight | 返回自身的高度，不含邊框。注意返回數值不帶單位 |
案例
獲取scrollHeight。
效果展示
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>我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容我是內容</div><script>var div = document.querySelector('div');console.log(div.scrollHeight);</script></body> </html>如何實現上面那些效果呢
模態框拖曳效果代碼實現
<!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;}/* 表單結構 */.modal form{display: flex;flex-direction: column;width: 100%;height: 100%;}/* 表單標題 */.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;}/* 登錄會員樣式 */.vip{border: 1px solid #ccc;border-radius: 20px;padding: 3px 40px;background-color: orange;color: #fff;}/* 關閉按鈕樣式 */.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">登錄會員</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">登錄會員</div></div></form><!-- 關閉按鈕 --><div class="close">x</div></div><div class="login-header">單擊登錄會員...</div><script>var modal = document.querySelector('.modal');var close = document.querySelector('.close');var login = document.querySelector('.login-header');var bg = document.querySelector('.login-bg');//給遮罩層注冊click事件login.addEventListener('click',function(){modal.style.display = 'block';bg.style.display = 'block';modal.style.backgroundColor = 'white';})//給close注冊click事件close.addEventListener('click',function(){modal.style.display = 'none';bg.style.display = 'none';})//給modal注冊mousedown事件modal.addEventListener('mousedown',function(e){//獲取鼠標在模態框中的坐標var x = e.pageX - modal.offsetLeft;var y = e.pageY - modal.offsetTop;//定義移動函數var move = function(e){modal.style.left = e.pageX - x + 'px';modal.style.top = e.pageY - y + 'px';}//給文檔對象注冊鼠標移動事件document.addEventListener('mousemove',move);//給文檔注冊鼠標彈起事件document.addEventListener('mouseup',function(){document.removeEventListener('mousemove',move);})})</script> </body> </html>放大鏡效果代碼實現
<!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; //兼容多個瀏覽器的event參數模式//計算鼠標中心點的坐標var left = _event.clientX - Magnifying.offsetLeft - Origin.offsetLeft - Float.offsetWidth / 2;var top = _event.clientY - Magnifying.offsetTop - Origin.offsetTop - Float.offsetHeight / 2;//判斷鼠標中心點是否在圖片內部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";//求相對位置var percentX = left / (Mark.offsetWidth - Float.offsetWidth);var percentY = top / (Mark.offsetHeight - Float.offsetHeight);console.log(percentX);//方向相反，故而是負值ZoomImage.style.left = -percentX * (ZoomImage.offsetWidth - Zoom.offsetWidth) + "px";ZoomImage.style.top = -percentY * (ZoomImage.offsetHeight - Zoom.offsetHeight) + "px";});} </script> </body> </html>固定側邊欄效果代碼實現
<!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">頭部區域</div><div class="bananer w">bananer區域</div><div class="main w">主體區域</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(){//獲取頁面頂部和左側卷去了多少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>上下圖片無間斷滾動代碼實現
<!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>上下無間斷滾動</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>左右圖片無間斷滾動代碼實現
<!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>左右圖片滾動</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>總結
以上是生活随笔為你收集整理的JavaScript常见的网页特效（元素样式相关属性）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ruby On Rails简介
- 下一篇： Hacking Diablo II之外挂