网站首页地址是什么,潍坊网站制作 熊掌号,专业长春网站建设网,注册公司入口官网一、js的特效
1、offset含义#xff1a;offset的含义是偏移量#xff0c;使用offset的相关属性可以动态地获取该元素的位置、大小等。 offsetLeft#xff1a;相对于父元素左边框的偏移量 offsetTop#xff1a;相对于父元素上边框的偏移量 offsetWidth#xff1a;返回元素…一、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
bodydiv idbox/divscriptvar 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
bodydiv classlogin-bg/div!--模态对话框--div classmodalform div classitem1登陆会员/divdiv classitem2div classusernamelabel for用户名:input typetext nameusername/label/divdiv classpasswordlabel for登录密码input typetext namepassword/label/div/divdiv classitem1div classvip登录会员/divdiv!----div classcloseX/div/div/div/form/div!--单击弹出登录窗口--div classlogin-header单击登录会员.../divscript//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给文档对象注册鼠标移动事件mousemovedocument.addEventListener(mousemove,move);//4.4给文档对象注册鼠标弹起事件mouseupdocument.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;}省略大图片外部区域样式代码
/stylescript// 获取元素对象var mask document.querySelector(.mask);var preview document.querySelector(.preview_img);var big document.querySelector(.big);var bigIMg document.querySelector(.bigIMg);
省略了事件逻辑代码
/script2、client系列client中文意思是客户端通过使用client系列的相关属性可以获取元素可视区的相关信息。 clientLeft返回元素左边框的大小 clientTop返回元素上边框的大小 clientWidth返回元素自身的宽度padding、内容的宽度不带单位 clientHeight返回元素自身的高度padding、内容的宽度不带单位 获取元素client代码实现
div我是内容/div
style省略了样式代码/style
scriptvar div document.querySelector(div);console.log(div.clientHeight);console.log(div.clientTop);console.log(div.clientLeft);
/script3、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
bodydiv classheader w头部区域/divdiv classbanner wbanner区域/divdiv classmain w主体区域/divdiv classslider-barspan classgoback返回顶部/span/divscript//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.scrollHeightbanner.scrollHeight 30)){goback.style.display block;slider.style.position fixed;slider.style.left 85%slider.style.top 0px;}else{slider.style.position absoluteslider.style.left 85%slider.left.top (header.scrollHeightbanner.scrollHeight 30) px;goback.style.display none}})/script
/body
