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只能得到行内样式表中的样式值
offset系列获得的数值是没有单位的	style.width获得的是带有单位的字符串
offsetWidth包含padding、border、width的值	style.width获得的是不包含padding、border的值
offsetWidth等属性是只读属性，只能获取不能赋值	style.width是可读写属性，可以获取也可以赋值

案例

获取鼠标位置：鼠标指针在盒子内的坐标位置示意图分析。

效果展示

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+')');//计算鼠标在box中的坐标var x = e.pageX-left;var y = e.pageY-top;console.log('x轴的坐标:'+x+','+'y轴的坐标:'+y);})</script>
</body>
</html>

元素可视区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常见的网页特效（元素样式相关属性）相关推荐

javaScript PC端网页特效
PC端网页特效 1. 元素偏移量 offset 系列 1.1 offset 概述 1.2 offset 与 style 区别 2. 元素可视区 client 系列 2.1 立即执行函数 2.2 loa ...
JavaScript—— PC 端网页特效
目录一.PC 端网页特效 1. 元素偏移量 offest 系列 1.1 offset 概述 1.2 offset 与 style 区别案例:获取鼠标在盒子内的坐标案例:模拟框拖拽 html cs ...
JavaScript——PC端网页特效
目录一.元素偏移量offset系列 1. offset概述 2. 常见属性 3. offset与style区别案例--鼠标在盒子内坐标案例--拖动模态框案例--京东放大镜二.元素可视区cli ...
JavaScript - 移动端网页特效
目录 1. 触屏事件 1)常见的触屏事件 2)触摸事件对象(TouchEvent) 3)移动端拖动元素 2. 移动端常见特效 1)classList属性 2)click延时解决方案 3. 移动端常用开 ...
html盒子页面居中,网页布局盒子(box)相关属性和盒子居中
网页布局中盒子的相关属性: 一.盒子的基础属性: 1.width和height:设置盒子的宽度和高度:常见单位:px,em,rem,vh/vm等 2.background:color(设置背景颜色), ...
JavaScript——移动端网页特效
目录 1.触屏事件 1.1概述 1.2常见的触屏事件 1.2.1 代码演示 1.2.2.效果图 1.3触屏事件对象 1.3.1概述 1.3.2常见的触摸事件对象 1.4移动端拖动元素 1.触屏事件 1 ...
javascript常见方法汇总之一——数组字符串相关
(转载至慕课网) 原文链接:https://www.imooc.com/article/46933 github地址:https://github.com/dorseysen/notes-about- ...
html5关于元素溢出相关属性6,1+x 证书 Web 前端开发初级实操考试（试卷 6 ）
一.单选题共 30 题,60 分 1. 阅读下面的 JavaScript 代码,输出结果是() Bfunction f(y) { var x=y*y; return x; } for(x=0;x B0 ...
JavaScript 之网页特效篇（offset系列、client系列、scroll系列、动画函数封装、常见网页特效）
网页特效 1.元素偏移量 offset 系列 offset 翻译过来就是偏移量,我们使用offset系列相关属性可以动态的得到该元素的位置(偏移).大小等. 获得元素距离带有定位父元素的位置可以获取 ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...

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