jQuery初学之拖曳图片

胡杨 2010-04-30 电脑

　　最近学了下jQuery，一开始接触jQuery的“链”式方法时，就感觉像是在写正则表达式一样，果然jQuery源码中有很多非常复杂的正则表达式。

　　写了段拖曳图片的代码，算是作业吧，类似于Google Map中的拖动地图。
　　jQuery真的很强大，几行代码就能达到这样的功能，再也不用考虑浏览器的兼容问题。


　　dragimgae.js代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(function(){
    var dragImage=$(".dragImage");
    dragImage.mousedown(function(e){
        var x1,y1;
        var img=$("img",this);
        var offset=img.position();
        x1=e.clientX-offset.left;
        y1=e.clientY-offset.top;
 
        dragImage.mousemove(function(e){
    	    img.css("left",(e.clientX-x1)+"px");
            img.css("top",(e.clientY-y1)+"px");
            e.preventDefault();
        })
        e.preventDefault();
    });
 
    dragImage.mouseup(function(e){
  	dragImage.unbind("mousemove");
    });
    dragImage.mouseleave(function(e){
        dragImage.unbind("mousemove");
    });
 
});

　　其实，我是想做一个插件，包括拖曳、放大、缩小、原图大小、适合图片大小、全屏显示等功能的图片插件，不过，已经有类似这种插件（iviewer）。

　　无所不有无所不能的jQuery。

标签：, ,

相关文章：

  • 没有相关文章

添加新评论