js 图片的拖动

 $(".photowall li").css({"position":"absolute"})
        /*+++++ 拖曳效果 ++++++
         *原理:标记拖曳状态dragging,坐标位置iX、iY
         *   mousedown:fn(){dragging = true:记录起始坐标位置,设置鼠标捕获}
         *   mouseover:fn(){判断如果dragging = true,则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值}
         *   mouseup:fn(){dragging = false:释放鼠标捕获,防止冒泡}
         */
        var dragging = false;
        var iX, iY;
        var a;
        $(".photowall li").mousedown(function(e) {
            dragging = true;
            iX = e.clientX - this.offsetLeft;
            iY = e.clientY - this.offsetTop;
            a=$(this);
            var length=$(this).nextAll().length;
            for(var i=1;i<=length;i++){
                $(this).next().after(this);
            }
            this.setCapture && this.setCapture();
            return false;
        });
        document.onmousemove = function(e) {
            if (dragging) {
                var e = e || window.event;
                var oX = e.clientX - iX;
                var oY = e.clientY - iY;
                a.css({"left":oX + "px", "top":oY + "px"});
                return false;
            }
        };
        $(document).mouseup(function(e) {
            dragging = false;
            a[0].releaseCapture();
            e.cancelBubble = true;
        })

  找了好久。还是记下来好~

时间: 2024-10-02 03:35:23

js 图片的拖动的相关文章

js实现可拖动Div

js实现可拖动Div 随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的   mousemove事件 3.取消事件 然后我们看一下代

JS之相册拖动管理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JS之相册拖动管理</title&g

js图片轮播与索引变色

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

JS 图片转Base64

JS 图片转Base64 有时候需要向HTML中插入一张图片,可苦于上线后找不到一个合适的网盘来存储这些图片,有没有一种办法能将图片转换成文字,然后直接插入HTML中呢,通过Base64编码就可以解决这个问题. 废话不多说直接上代码.不知道什么是Base64的请自行百度. 图片转Base64 示例代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS

JS图片Switchable切换大集合

JS图片切换大集合 利用周末2天把JS图片切换常见效果封装了下,比如:轮播,显示隐藏,淡入淡出等.废话不多说,直接看效果吧!JSFiddler链接如下: 想看JS轮播切换效果请点击我! 当然由于上传图片时候 png图片自动转换成jpg 所以左右按钮有透明,但是也没有关系,我们最主要的是看看效果是什么样的,至于图片大家可以替换.下面看看默认配置项吧!   container '',     外层容器 必填项 默认为空  contentCls  '.list',     内容所在的容器 默认为'.l

js图片延迟加载

http://stylechen.com/imglazyload2.html [译]页面加载中的图片性能优化 2013年05月26日 吴 天豪 性能优化  原文地址:http://www.stevesouders.com/blog/2013/04/26/i/ 我的大部分性能优化工作都集中在JavaScript和CSS上,从早期的Move Scripts to the Bottom和Put Stylesheets at the Top规则.为了强调这些规则的重要性,我甚至说过,"JS和CSS是页面

js图片放大镜

JS图片放大镜效果. 应用场景:各大电商网站. (附件) <!-- Author: XiaoWen Create a file: 2017-01-13 12:28:36 Last modified: 2017-01-13 17:16:46 Start to work: Finish the work: Other information: --> <!DOCTYPE html> <html lang="en"> <head> <me

图片切换特效(1):原生JS图片切换效果

转自:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全

常用JS图片滚动(无缝.平滑.上下左右滚动)代码大全 今天刚网上看的 不多说直接帖代码---- <head><-----></head><body> <!--向下滚动代码开始--><div id="colee" style="overflow:hidden;height:253px;width:410px;"><div id="colee1"><p>&