发布于 2016-12-22 20:45:12 | 18 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


说到拖拽功能,现在各大,中,小型网站都基本上有类似的东西,特别是对弹出层拖拽,更是常见的一塌糊涂。。。
其实对于弹出层而言,拖拽最初的目的很单纯,就是为了通过拉开层,使被弹出层挡住的内容可见,(当然,后来关于拖拽的功能不断被优化,使得拖拽的应用有了别的意义,最典型的如igoogle的自定义首页,通过拖放的形式满足用户自定义想要的内容模块顺序和位置)。

本文讨论的重点不是iGoogle的拖放效果,那属于进阶篇,本文是拖拽的“第一阶”,如题,实现最简单的拖拽。
这里的“最简单”即不考虑多个拖拽层的堆叠顺序,不考虑拖拽范围限制,不考虑类似iGoogle的“dragTo”的效果等等。。。

恩,废话不多说了,先给大家看个实例吧:

拖我试试...
content...点此-->打开 由于我是直接在页面上内嵌的所有代码,加上博客园第三方插件的原因,代码执行效率高,有可能运行起来不是很流畅

拖拽其实就涉及的鼠标的三个事件,onmousedown,onmouseup,onmousemove,再结合获取鼠标的位置以及层的left和top即可实现类似的效果。

在编码的时候,有两个需要注意的地方,一个是获取当前样式,currentStyle只在ie下有效,故对于非ie我们可以通过getComputedStyle实现(当然,对于这种需要获取的属性不是很多的情况,您也可以直接用obj.style[key]来获取您当前想要的属性值)

 
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+ 

另一个点就是在获取鼠标位置时要用到event,event这个东西很奇怪,ie下是局部变量,moz内核下是全局变量(说法不准确,只是便于理解),所以在获取鼠标位置时候要对event做个判断

 
bar.onmousedown = function(e){ 
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
}; 

恩,注意以上两点,结合正确的思路其实就可以了,并不难,下面提供参考代码:

 
function getStyle(o,key){return o.currentStyle? o.currentStyle[key] : document.defaultView.getComputedStyle(o,null)[key]}//'currentStyle' only for ie5.0+ 

var drag = function(bar, target){ 
var params = { 
startLeft:0, 
startTop:0, 
_X:0, 
_Y:0, 
isDrag:false 
}; 
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')} 
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')} 
bar.onmousedown = function(e){ 
e = e?e:window.event; //'event' ie下局部变量,ff下全局变量 
params.isDrag = true; 
params._X = e.clientX; params._Y = e.clientY; 
}; 
document.onmouseup = function(){ 
params.isDrag = false; 
if(getStyle(target,'left') != 'auto'){params.startLeft = getStyle(target,'left')} 
if(getStyle(target,'top') != 'auto'){params.startTop = getStyle(target,'top')} 
}; 
document.onmousemove = function(e){ 
var e = e?e:window.event; 
if(params.isDrag){ 
var curX = e.clientX, curY = e.clientY, desL = curX-params._X+parseInt(params.startLeft), desT = curY-params._Y+parseInt(params.startTop); 
target.style['left'] = desL>=0?desL + 'px':0; 
target.style['top'] = desT>=0?desT + 'px':0; 
} 
} 
}; 

恩,至此,本文差不多可以结束了,关于类似的iGoogle的拖拽进阶篇,有时间会继续的,下面结合拖拽举个综合弹出层的例子,

不设任何options参数的box(默认高200px,宽300px)
无遮罩的box
这个弹出层插件是我在上文中就提到的,而且还提供了源文件下载,在此只是加上了拖动效果而已
ps:由于代码高亮插件的原因,遮罩层上会有白色小方块,暂没做处理。。。


相关阅读 :
js最简单的拖拽效果实现代码
JS 拖动效果实现代码 比较简单
对google个性主页的拖拽效果的js的完整注释[转]
js 表格拖拽效果实例代码 (IE only)
一个很简单的无限分类树实现代码
javascript 拖放效果实现代码
JavaScript实现的简单拖拽效果
最简单的js图片切换效果实现代码
JavaScript实现文字与图片拖拽效果的方法
JS+CSS制作DIV层可(最小化/拖拽/排序)功能实现代码
js实现完美拖拽效果可拖动层与回放拖动规迹并显示拖动距离参数
JS简单实用的倒计时效果实现代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2015 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务