文档章节

jq

茶葉麵包
 茶葉麵包
发布于 2016/06/16 09:07
字数 223
阅读 3
收藏 0

####图片拖拽效果,网上找的某位大神力作:

$(function(){
            /*--------------拖曳效果----------------
            *原理:标记拖曳状态dragging ,坐标位置iX, iY
            *         mousedown:fn(){dragging = true, 记录起始坐标位置,设置鼠标捕获}
            *         mouseover:fn(){判断如果dragging = true, 则当前坐标位置 - 记录起始坐标位置,绝对定位的元素获得差值}
            *         mouseup:fn(){dragging = false, 释放鼠标捕获,防止冒泡}
            */
            var dragging = false;
            var iX, iY;
            $("#drag").mousedown(function(e) {
                dragging = true;
                iX = e.clientX - this.offsetLeft;
                iY = e.clientY - this.offsetTop;
                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;
				locationX=(507-oX)*3264/380;
				locationY=oY*3264/380;
                $("#drag").css({"left":oX + "px", "top":oY + "px"});
                return false;
                }
            };
            $(document).mouseup(function(e) {
                dragging = false;
                $("#drag")[0].releaseCapture();
                e.cancelBubble = true;
            })
 
        })


####html代码

<div style="height:100%;position:relative;margin:10px auto;width:507px">
	<img src='' id="printimg" style='height:380px;position:absolute;top:0;right:0;'/>
	<img src='${path}/style_cp/img/red.png' id="drag"
	style='height:25px;width:25px;position:absolute;top:0;right:0;z-index:10;cursor:hand'/>
</div>

© 著作权归作者所有

共有 人打赏支持
茶葉麵包
粉丝 0
博文 1
码字总数 223
作品 0
太原
私信 提问

暂无文章

BitMap的JAVA实现

相关概念 基础类型 在java中: byte -> 8 bits -->1字节char -> 16 bit -->2字节short -> 16 bits -->2字节int -> 32 bits -->4字节float -> 32 bits -->4字节long ->......

freeli
5分钟前
0
0
如何实现前端微服务化

摘要: fundebug-cli是Fudnebug的命令行工具,可以用于批量上传Source Map文件。 Fundebug支持使用Source Map还原真正的错误位置。这样的话,开发者能够迅速定位出错的源代码。另外,Fundebu...

Fundebug
16分钟前
0
0
spring boot jdbc

TODO

zzx10
18分钟前
0
0
var 是 Java 开发的好朋友啊!

简评:Java var != JavaScript var。 Java 10 中引入了新的语法用于局部变量类型推断,很多开发者有所疑惑,希望这篇文章能帮到你。 什么是类型推断 其实在 Java 中类型推断早就存在了,看下...

极光推送
22分钟前
0
0
进阶的Redis之Sentinel原理及实战

Redis作为一款高效的内存数据库,可作用于方方面面,相信如今项目的开发都离不开它。大家可能都知道Redis是高可用的,但很少知道具体高可用是利用什么去实现的。 抛两个问题: 只部署一个Red...

公众号_Zack说码
27分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部