当前位置：
首页 >
前端技术
> 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之外挂