珠海政府网站建设公司宁波seo搜索优化费用
一、js的特效
1、offset含义：offset的含义是偏移量，使用offset的相关属性可以动态地获取该元素的位置、大小等。
offsetLeft：相对于父元素左边框的偏移量
offsetTop：相对于父元素上边框的偏移量
offsetWidth：返回元素自身的宽度（padding、边框、内容区域)，不带单位
offsetHeight：返回元素自身的高度（padding、边框、内容区域)，不带单位
offsetParent：返回元素的父元素
（1）通过offset获取鼠标的位置
案例实现：获取鼠标在盒子内的坐标位置的值。
<style>#box{position: absolute;left: 50px;top: 20px;width: 200px;height: 200px;background-color: thistle;}
</style>
<body><div id="box"></div><script>var box = document.querySelector('#box')//1、输出 盒子的宽度和 高度console.log("宽度：",box.offsetWidth);console.log("高度：",box.offsetHeight);//2、给box绑定 鼠标移动的事件box.addEventListener('mousemove',function(e){//2.1获取box的左右上下偏移量var left = box.offsetLeft;var top = box.offsetTop;// console.log("偏移量：",left,top);//2.2计算鼠标指针在box中的坐标var x = e.pageX - left;var y = e.pageY - top;console.log("x的坐标："+x+",y的坐标：",+y)})</script>
</body>（2）【案例】模态框拖曳效果
<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: #fff;}/*遮罩层样式*/.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 for="">用户名:<input type="text" name="username"></label></div><div class="password"><label for="">登录密码：<input type="text" name="password"></label></div></div><div class="item1"><div class="vip">登录会员</div><div><!----><div class="close">X</div></div></div></form></div><!--单击，弹出登录窗口--><div class="login-header">单击，登录会员...</div><script>//1.获取对象元素var modal = document.querySelector('.modal');var close = document.querySelector('.close');var login = document.querySelector('.login-header');var bg = document.querySelector('.login-bg');//2.单击遮罩层注册click事件login.addEventListener('click',function(){modal.style.display = 'block';bg.style.display = 'block';modal.style.backgroundColor = 'white';});//3.关闭模态对话框,给close注册click事件close.addEventListener('click',function(){modal.style.display = 'none';bg.style.display = 'none';});//4.给modal注册mousedown事件modal.addEventListener('mousedown',function(e){//4.1获取鼠标按下 时，鼠标指针在模态框中的坐标var x = e.pageX - modal.offsetLeft;var y = e.pageY - modal.offsetTop;//4.2 定义移动的函数var move = function(){modal.style.left = e.pageX - x + 'px';modal.style.top = e.pageY - y + 'px';}//4.3给文档对象注册鼠标移动事件（mousemove）document.addEventListener('mousemove',move);//4.4给文档对象注册鼠标弹起事件（mouseup）document.addEventListener('mouseup',function(){document.addEventListener('mousemove',move)});});</script>
</body>模态对话框：必须进行响应的对话框，否则不能进行其他操作
非模态对话框：不响应对话框，也可以进行其他操作
【案例】放大镜效果
<style>
．．．（省略图片预览区） /* 放大镜 */.mask {display: none;width: 200px;height:200px;background-color: red;opacity: 0.5;position: absolute;}．．．（省略大图片外部区域样式代码）
</style>
<script>// 获取元素对象var mask = document.querySelector('.mask');var preview = document.querySelector('.preview_img');var big = document.querySelector('.big');var bigIMg = document.querySelector('.bigIMg');
．．．（省略了事件逻辑代码）
</script>
2、client系列：client中文意思是客户端，通过使用client系列的相关属性可以获取元素可视区的相关信息。
clientLeft：返回元素左边框的大小
clientTop：返回元素上边框的大小
clientWidth：返回元素自身的宽度（padding、内容的宽度），不带单位
clientHeight：返回元素自身的高度（padding、内容的宽度），不带单位
获取元素client代码实现
<div>我是内容．．．</div>
<style>．．．（省略了样式代码）</style>
<script>var div = document.querySelector('div');console.log(div.clientHeight);console.log(div.clientTop);console.log(div.clientLeft);
</script>
3、scroll含义：scroll的含义是滚动，使用scroll系列的相关属性可以动态地获取该元素的滚动距离、大小等。
【案例】固定侧边栏效果
<style>.w{width: 70%;margin: 0 auto;margin-top: 10px;}.header{height: 100px;background-color: orange;}.banner{height: 200px;background-color: orchid;}.main{height:1300px ;background-color: palegreen;}.slider-bar{height: 200px;width: 70px;background-color: yellow;position: absolute;left: 85%;top: 330px;}.goback{display: none;position: absolute;bottom: 0;}
</style>
<body><div class="header w">头部区域</div><div class="banner w">banner区域</div><div class="main w">主体区域</div><div class="slider-bar"><span class="goback">返回顶部</span></div><script>//1.获取元素var header = document.querySelector('.header')var banner = document.querySelector('.banner')var slider = document.querySelector('.slider-bar')var goback = document.querySelector('.goback')//2.给goback注册click事件goback.addEventListener('click',function(){window.scrollTo(0,0)})//3.给整个页面绑定 scroll滚动事件document.addEventListener('scroll',function(){//3.1获取页面左侧和顶部卷去的距离slider.style.top = window.pageYOffset;if(window.pageYOffset > (header.scrollHeight+banner.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.left.top = (header.scrollHeight+banner.scrollHeight + 30) + 'px';goback.style.display = 'none'}})</script>
</body>
