文档章节

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
太原

暂无文章

Mac OS X下Maven的安装与配置

Mac OS X 安装Maven: 下载 Maven, 并解压到某个目录。例如/Users/robbie/apache-maven-3.3.3 打开Terminal,输入以下命令,设置Maven classpath $ vi ~/.bash_profile 添加下列两行代码,之后...

TonyStarkSir
今天
3
0
关于编程,你的练习是不是有效的?

最近由于工作及Solution项目的影响,我在重新学习DDD和领域建模的一些知识。然后,我突然就想到了这个问题,以及我是怎么做的? 对于我来说,提升技能的项目会有四种: 纯兴趣驱动的项目。即...

问题终结者
今天
4
0
打开eclipse出现an error has occurred see the log file

解决方法: 1,打开eclipse安装目录下的eclipse.ini文件; 2,打开的文本文件最后添加一行 --add-modules=ALL-SYSTEM 3,保存重新打开Eclipse。...

任梁荣
昨天
4
0
搞定Northwind示例数据库,无论哪个版本的SQLServer都受用

Northwind数据库 从这里可以找到突破口: http://social.msdn.microsoft.com/Forums/zh-CN/Vsexpressvb/thread/8490a1c6-9018-40c9-aafb-df9f79d29cde 下面是MSDN: http://msdn2.microsoft......

QQZZFT
昨天
1
0
mysql主从同步,安装配置操作

准备 两台mysql服务,我这里准备了如下: 主库:192.168.176.128 从库:192.168.176.131 如何在Linux上安装mysql服务,请看https://blog.csdn.net/qq_18860653/article/details/80250499 操作...

小致dad
昨天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部