88必发客户端:js拖拽功能实现代码解析

2016-11-07 07:31:03 88必发客户端

本文解决的问题:1、怎样在网页中实现拖曳功能;2、document.documentElement与document.body的区别。 document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。3、getBoundingClientRect().left与offsetLeft的区别。 getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。4、e.clientX指的是鼠标点相对于窗口的坐标。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>弹窗</title> <style type="text/css"> #mask { position: fixed; left:0; top:0; width:100%; height: 100%; background-color: hsla(250,100%,50%,0.6); display: none; } #popBox { position: absolute; background-color: #fff; width:200px; height: 200px; /*left:50%; top:50%;*/ /*margin-top: -100px; margin-left: -100px;*/ } </style></head><body> <button id="clickBtn">点击</button> <div id="mask"> <div id="popBox"></div> </div> <script type="text/javascript"> var clickBtn = document.getElementById("clickBtn"); var popBox = document.getElementById("popBox") var mask = document.getElementById("mask"); clickBtn.onclick = function() { mask.style.display = "block"; popBox.style.left = (document.documentElement.clientWidth - popBox.offsetWidth)/2 + "px"; popBox.style.top = (document.documentElement.clientHeight - popBox.offsetHeight)/2 + "px"; } popBox.onclick = function(e) { var e = e || window.event;//e指所有代码的集合,通过它可以获取事件的各种属性。 e.cancelBubble = true;//阻止事件冒泡,即点击事件不会传递到mask这一层,意味着不会触发点击mask事件代码。 } mask.onclick = function() { mask.style.display = "none"; } //拖拽 mousedown->mousemove->mouseup popBox.onmousedown = function(e) { var e = e || window.event; var pos = popBox.getBoundingClientRect();//getBoundingClientRect()用于获取元素的left、top、right、bottom。offset获取相对于父级的left和top。getBoundingClientRect()获取相对于窗口的left、top、right、bottom。 var oX = e.clientX - pos.left;//clientX指相对于窗口的坐标。 var oY = e.clientY - pos.top; document.onmousemove = function(e) { var e = e || window.event; var oLeft = e.clientX - oX; var oTop = e.clientY - oY; popBox.style.left = oLeft + "px"; popBox.style.top = oTop + "px"; if (oLeft<0) { popBox.style.left = 0 + "px"; }; if (oLeft>document.documentElement.clientWidth - popBox.offsetWidth) { popBox.style.left = document.documentElement.clientWidth - popBox.offsetWidth + "px";//document.documentElement.clientWidth指整个html文档的宽度,document.body.clientWidth的宽度。这两者是不一样的。可以在console控制台通过console.log(document.documentElement)和console.log(document.body)进行测试。 } if (oTop<0) { popBox.style.top = 0 + "px"; }; if (oTop > document.documentElement.clientHeight - popBox.offsetHeight) { popBox.style.top = document.documentElement.clientHeight - popBox.offsetHeight + "px"; } } popBox.onmouseup = function() { document.onmousemove = null; } } </script></body></html>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

话不多说,请看示例代码:<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="http://r01.uzaicdn.com/content/v1/styles/subject.css"> <link rel="stylesheet" href="styles/lianxi.css"> <script src="http://r01.uzaicdn.com/content/v1/scripts/core.js"></script> <script src="scripts/lianxi.js"></script> <!--[if lt IE 9]><script src="//r.uzaicdn.com/content/libs/html5shiv.js"></script><![endif]--> <!--[if IE 6]><script src="//r.uzaicdn.com/content/libs/dd_belatedpng_0.0.8a-min.js" type="text/javascript"></script><script>DD_belatedPNG.fix('.png');</script><![endif]--> <style type='text/css'> .fn-mask{width: 100%;height: 100%;background: #000;opacity: 0.5;position: fixed;left: 0;top: 0;transition:all 0.5s ease 0s;z-index: 998;} button{margin:0 auto;display: block;margin-top: 300px;background: pink;} .main{width: 100px;height: 100px;background: #fff;position: fixed;left: 50%;top: 50%;z-index: 1000;text-align: center;line-height: 100px;} .main i{color: red;font-size: 36px;position: absolute;top:-30px;right: 0;cursor: pointer;} </style></head><body> <div class="box"> <button>活动细则</button> <div class="fn-mask hide"></div> <div class="main hide"> 你好,我是弹窗 <i>x</i> </div> </div></body> <script> $(function(){ $('button').on('click',function(){ $('.fn-mask').removeClass('hide'); $('.main').removeClass('hide'); }) $('.main i').on('click',function(){ $('.fn-mask').addClass('hide'); $('.main').addClass('hide'); })}) </script></html>以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!

一、js--->单线程   严格意义上来说,javascript没有多线程的概念,所有的程序都是单线程依次执行的。  1、什么是单线程?  通俗点说,就是代码在执行过程中,另一段代码想要执行就必须等当前代码执行完成后才可以进行。我们拿一段代码来解释一下吧 for(var i=1;i<=3;i++){ setTimeout(function(){ console.log(i); //输出:4,4,4 },0) }  我们来看一下上面的这段代码,既然延时器时间设置为0,那么应该执行一遍循环就应该立即打印出一个i,但是最终的打印结果为:4,4,4。之所以会出现上面的结果,正是因为js代码是单线程应用。  在执行过程中,先遇到for循环,for循环先进入线程。当i=1时,循环走到setTimeOut后,此时的for循环还没有执行完成,setTimeOut就会被放入一个地方(线程池)等待执行。此时for循环继续执行,当i=2时,for循环仍没有执行完,这时的setTimeOut仍会被放在线程池中等待执行……依次类推,直到for循环转完3遍后,for循环执行完了,此时线程空闲了,在线程池中等待执行的setTimeOut依次执行打印i,而for循环执行完成后,i变成了4,所以打印出了三个4。  2、如果想要改变上面的状况可以运用以下代码//将var变为letfor(let i=1; i<=3; i++){ setTimeOut(function(){ console.log(i); //输出的结果为1,2,3 },0);}//用自执行函数进行包裹for(var i=1; i<=3; i++){ !function(i){ setTimeOut(function(){ console.log(i); //输出的结果为1,2,3 },0); }(i)}二、js中的函数作用域和代码的执行  >>>函数作用域我们先来了解一下以下几个概念:  1、在js语言中,没有类似于c语言这样的块级作用域。  2、js语言中的顶级作用域为window对象范围内,称为全局作用域,在全局作用域中声明的变量为全局变量。  3、js函数范围内的变量只能在函数内部使用,函数外部无法使用,这样的变量为局部变量。  4、js函数可以嵌套,多个函数的嵌套构成了作用域的层层嵌套,这称为js中的作用域链。  5、js作用域链变量访问规则:    (1)、当前作用域内存在要访问的变量时,则使用当前作用域中的变量。       (2)、当前作用域中不存在要访问的变量时,则会到上一层作用域中寻找,直到全局作用域。  >>>执行顺序   js代码执行分为两个部分:  1、代码的检查装载阶段(预编译阶段),此阶段进行变量和函数的声明,但是不对变量进行赋值,变量的默认值为undefined。  2、代码的执行阶段,此阶段对变量进行赋值和函数的声明。看了上面的一些具体的概念,我们拿一段代码进行举例说明:var a=1; //声明了一个全局变量function func(){ console.log(a); //输出:undefined。打印a,而在func这个作用域中已经声明了a变量,按照js的执行顺序,此时的a并未被赋值。 var a=1; console.log(a); //输出:1。}func();  看上面的代码:第一个a输出undefined。原因:js作用域链的访问规则,当前作用域内存在要访问的变量a,所以使用当前作用域中的变量。再根据js代码的执行顺序,此时的a只是声明了而并未被赋值,默认为undefined,所以输出undefined。  而第二个a,输出1,正是因为此时的a已经被声明且被赋值,所以a输出1。总结以上所述是小编给大家介绍的JavaScript代码执行的先后顺序问题,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

1、步骤分析:第一步:引入jquery的类库第二步:直接写页面加载函数第三步:直接使用jquery的选择器(组合选择)拿到需要操作的元素(奇数行和偶数行)第四步:分别使用CSS的方法(css(name,value))对奇数行和偶数行设置背景颜色。2、具体代码实现:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> //1.页面加载 $(function(){ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").css("background-color","gold"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").css("background-color","pink"); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body></html>3、真正开发时一般CSS样式已经由美工写好,此时可以使用jquery的CSS类操作具体代码如下:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>使用jQuery完成表格隔行换色</title> <link rel="stylesheet" href="../css/style.css" rel="external nofollow" /> <script type="text/javascript" src="../js/jquery-1.8.3.js" ></script> <script> //1.页面加载 $(function(){ //2.获取tbody下面的偶数行并设置背景颜色 $("tbody tr:even").addClass("even"); //3.获取tbody下面的奇数行并设置背景颜色 $("tbody tr:odd").addClass("odd"); }); </script> </head> <body> <table border="1" width="500" height="50" align="center" id="tbl" id="tbl"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody> <tr > <td>1</td> <td>张三</td> <td>22</td> </tr> <tr > <td>2</td> <td>李四</td> <td>25</td> </tr> <tr > <td>3</td> <td>王五</td> <td>27</td> </tr> <tr > <td>4</td> <td>赵六</td> <td>29</td> </tr> <tr > <td>5</td> <td>田七</td> <td>30</td> </tr> <tr > <td>6</td> <td>汾九</td> <td>20</td> </tr> </tbody> </table> </body></html>在谷歌浏览器内运行,就实现了表格隔行换色的效果。以上这篇使用JQ完成表格隔行换色的简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

当页面过长时,通常会在页面下方有一个返回顶部的button,总结一下,大概三种实现方法,下面说下各方法及优缺点。方法一 锚点定位<a href="#" class="top" id="top">返回頂部</a>这种方法设置方便,但缺点是会刷新页面(我是在同事的乐视手机上发现的)。方法二 window.scrollTo(x,y)<a href="javascript:scrollTo(0,0)" class="top" id="top">返回頂部</a>这种方法也很方便,并且不会刷新页面,缺点是没有滚动效果。scrollTo接收的参数用来定位视口左上角在整个滚动内容区域的坐标,比如我设置scrollTo(100,100),就是让滚动内容的坐标(100,100)的点处在视口的左上角。方法三 设置带有动画效果的滚动原生方法/* html部分 */<body><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><a href="javascript:;" class="top" id="top">返回頂部</a></body><style>/* css部分 */div { height: 150px;}div:nth-child(odd) { background-color: #8ae238;}div:nth-child(even) { background-color: #66d9ef;}.top { position: fixed; right: 50px; bottom: 50px; display: block; width: 50px; height: 50px; font-size: 20px; background-color: white; display: none;}</style><script>/* js代码 */ var topBtn = document.getElementById('top'); // 获取视窗高度 var winHeight = document.documentElement.clientHeight; window.onscroll = function () { // 获取页面向上滚动距离,chrome浏览器识别document.body.scrollTop,而火狐识别document.documentElement.scrollTop,这里做了兼容处理 var toTop = document.documentElement.scrollTop || document.body.scrollTop; // 如果滚动超过一屏,返回顶部按钮出现,反之隐藏 if(toTop>=winHeight){ topBtn.style.display = 'block'; }else { topBtn.style.display = 'none'; } } topBtn.onclick=function () { var timer = setInterval(function () { var toTop = document.documentElement.scrollTop || document.body.scrollTop; // 判断是否到达顶部,到达顶部停止滚动,没到达顶部继续滚动 if(toTop == 0){ clearInterval(timer); }else { // 设置滚动速度 var speed = Math.ceil(toTop/5); // 页面向上滚动 document.documentElement.scrollTop=document.body.scrollTop=toTop-speed; } },50); }</script>大概的思路就是:为window绑定scroll事件,监听页面滚动距离,当超过一屏高度时,显示返回顶部的按钮为按钮绑定点击事件,返回顶部的方法就是获取页面滚动的距离,然后计算步长,这里采用滚动距离除以5的方式,滚动速度由快到慢。这里使用定时器控制滚动的频率,建议设置较小一点的值,如果时间间隔过大会有‘跳帧'的感觉。这种方法优点是有了动画效果,只是实现起来比较麻烦,下面介绍一下jQuery方法。jQuery方法jQuery方法只是在js代码部分不同,具体代码如下<script>/* js代码 */$(window).on('scroll', function () { // 判断显示还是隐藏按钮 if($(this).scrollTop()>=$(this).height()){ $('#top').fadeIn('slow'); }else { $('#top').fadeOut('slow'); }});$('#top').on('click',function () { // 设置滚动动画,这里注意使用的是$('body')不是$(window) $('body').animate({scrollTop:'0'},500);});</script>jQuery方法的优点是方便,而且动画效果比较流畅。这里需要注意设置animate方法时使用的是jQuery封装的body对象而不是window对象,因为我们是要设置body的scrollTop属性。总结三个方法各有优劣,不过总体来讲,jQuery的方法更适合大多数场景。以上所述是小编给大家介绍的jQuery中页面返回顶部的方法总结,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!