你知道如用jq实现简单拖曵原理实例吗_51模板集

51模板集专业软件定制、系统开发以及各种开源CMS教程,织梦教程、帝国cms教程、phpcms教程、.net教程、JS特效等

主页 > 网页特效 > jquery特效 >

你知道如用jq实现简单拖曵原理实例吗

分享到：

来源：未知浏览：次发布时间：2018-10-17 17:10

利用jquery实现简单拖曵原理实例 www.51mubanji.com 51模板集试试用鼠标拖动图层看看效果演示 http://www.51mubanji.com 网页特效网

你知道如用jq实现简单拖曵原理实例吗

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>用jq实现简单拖曵原理</title>
<style type="text/css">
#drag{width:400px;height:300px;cursor:move;position:absolute;top:100px;left:100px;border:solid 1px #ccc;}
  h2{color:#fff;background: none repeat scroll 0 0 rgba(16, 90, 31, 0.7);color:#FFFFFF;height:40px;line-height:40px;margin:0;}</style>
<script src="http://www.51mubanji.com/js/jquery.js" type="text/javascript"></script><script type="text/javascript">
        $(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;
                $("#drag").css({"left":oX + "px", "top":oY + "px"});
                return false;
                }
            };
            $(document).mouseup(function(e) {
                dragging = false;
                $("#drag")[0].releaseCapture();
                e.cancelBubble = true;
            })

})

</script>
<div id="drag">
	<h2>
		51模板集</h2>
	试试用鼠标拖动图层看看效果 演示 http://www.51mubanji.com <a href='http://www.51mubanji.com/wytx/' target='_blank'><u>网页特效</u></a>网</div>
<br />

<script src="/js/dashang.js" type="text/javascript" charset="utf-8"></script>
<p>你知道如用jq实现简单拖曵原理实例吗 转载请注明出处 <a target="_blank" href="http://www.51mubanji.com">网页特效</a><p></p>

提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。

上一篇：如何实现简单大方Tab菜单选项卡的JS特效
下一篇：没有了

栏目列表

点击排行

代码实现JQuery图片轮播效果代码

input带输入的下拉菜单效果

漂亮的鼠标经过弹出层jquery特效

带左右按钮jquery图片切换代码

jquery实现鼠标经过改变图片透明度

带左右控制的按钮flash图片特效3D立体动画焦点图片切换

好看的导航二级菜单jquery下拉菜单

带左右按钮的jQuery图片切换特效

简单的jquery选项卡特效

原创右侧可折叠在线客服广告代码

相关文章推荐

你知道如用jq实现简单拖曵原理实例吗

如何实现简单大方Tab菜单选项卡的JS特效

如何设计一款简易伸展显示详情菜单特效

关于鼠标经过时显示详情的JS

网站右侧在线客服公众号返回顶部多功能悬浮菜单栏js插

带左右控制的按钮flash图片特效3D立体动画焦点图片切换

带左右按钮的jQuery图片切换特效

jquery水平滑动图片切换特效

jquery可点击左右按钮切换的特效

jquery鼠标滑动小图大图切换特效

本站部分资源收集整理于互联网，免费供网友参考学习使用，并不用于商业用途，若侵犯了您的版权请来信告知，再次感谢您的分享！

皖公网安备 34010302000133号