文字、图片拖曳移动

网页特效

网站首页菜单导航日期时间背景图像图层样式鼠标键盘页面窗口色彩表格链接文字表单按钮计数转换游戏娱乐综合实例

您的位置: 网页特效 -> 链接文字 -> 文字、图片拖曳移动

文字、图片拖曳移动

作者:admin 发布时间:2010-8-9 1:28:23 发布人: admin

<html>
<head>
<title>文字与图片被拖曳</title>
<style type="text/css">
*{padding:0;margin:0;}
.tips{position:absolute;background:#eee;}
</style>
</head>
<body>
<div class="tips" id="tips1" onmouseover="dragF.drag('tips1');">
<img src="http://web.archive.org/web/20150530061139im_/http://bankcha.com/logo.gif">拖动图片</div>
<div class="tips" id="tips2" onmouseover="dragF.drag('tips2');"><a href="http://web.archive.org/web/20150530061139/http://www.bankcha.com/" target="_blank">链接</a><br/>	拖动链接也可以
</div>
</body>
<script type="text/javascript">
var $id=function(id){return document.getElementById(id);}
var dragF={
	locked:false,
	lastObj:undefined,
	drag:function(obj){
		$id(obj).onmousedown=function(e){
			var e = e ? e : window.event;
			if(!window.event) {e.preventDefault();}/* 阻止标注浏览器下拖动a,img的默认事件 */
			dragF.locked=true;
		  	$id(obj).style.position="absolute";
			$id(obj).style.zIndex="100";
			if (dragF.lastObj&&dragF.lastObj!=$id(obj)) {/* 多元素拖动时候需要恢复上一次元素的状态 */
				dragF.lastObj.style.zIndex = "1";
			}
			dragF.lastObj=$id(obj);
			var tempX=$id(obj).offsetLeft;
			var tempY=$id(obj).offsetTop;
			dragF.x=e.clientX;
			dragF.y=e.clientY;
			document.onmousemove=function(e){
				var e = e ? e : window.event;
				if(dragF.locked==false) return false;
				$id(obj).style.left=tempX+e.clientX-dragF.x+"px";
				$id(obj).style.top=tempY+e.clientY-dragF.y+"px";
				if(window.event) {e.returnValue=false;}/* 阻止ie下a,img的默认事件 */
			}
			document.onmouseup=function(){
				dragF.locked=false;
			}
		}
	}
}
</script>
</html>

文字与图片的拖动效果，也可以拖动链接，操作体验挺不错，JavaScript代码实现，无jQeury，而且代码实现很简化，效果不错。

将本文收藏到QQ书签与更多好友分享

上一篇：文章：CSS竖向Tab代码下一篇：文章：Js表格排序美化版

网页特效

文字、图片拖曳移动

本类浏览排行 »

本站推荐文章 »