您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 图片特效 >

Js图片拖动，随意移动图片

时间：2014-05-04 08:40 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>随意拖动图片</title>
</head>
<body onLoad="remove()">
<div id="div1" onMouseOver="dragimages=div1;drag=1;"style="height:77px;left:10px;position:absolute;top:10px;width:90px">
<img name="img1" alt="" border="0" src="http://www.codesocang.com/images/logo.png" style="cursor:pointer ">
</div>
<p>
<script language="javascript">
drag = 0;
move = 0;
function mousedown()
{
	if(drag)
	{
		X1 = window.event.x - parseInt(dragimages.style.left);
		Y1 = window.event.y - parseInt(dragimages.style.top);
		dragimages.style.Index += 1;
		move = 1;
	}
}
function mouseStop()
{
	window.event.returnValue = false;
}
function mousemove()
{
	if (move)
	{
		dragimages.style.left = window.event.x - X1;
		dragimages.style.top = window.event.y - Y1;
	}
}
function mouseup()
{
	move = 0;
}
function remove()
{
	document.all.div1.onmousemove = mousemove;
	document.all.div1.onmousedown = mousedown;
	document.all.div1.onmouseup = mouseup;
	document.all.div1.ondragstart  = mouseStop;
}
</script>
</body>
</html>

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

Js图片拖动移动特效，在图片上按下鼠标左键，移动鼠标，图片便可跟随鼠标随意移动位置。经测试，兼容IE6+以上版本，火狐、Chrome等主流浏览器下需要修正代码，这个就留给JS爱好者吧。。

Js图片拖动，随意移动图片由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/pic/7294.html

标签：网站源码

上一篇：JavaScript定义按钮控制图片放大缩小显示

下一篇：图片瀑布流布局 HTml5 jquery代码

[图片特效] HTML5鼠标悬停放大图片心形图片

[图片特效] 给图片加上播放按钮

[图片特效] 带左右按钮js+css淘宝网焦点图切

[图片特效] 带小圆点的大屏焦点图轮播代码

[图片特效] 鼠标经过CSS图片边框效

[图片特效] 原生js面对对象封装版仿淘宝首页

[图片特效] CSS Filter属性特效大全

[图片特效] 一个JS横向左右切换的枫叶焦点图

[图片特效] 图片不存在的时候，显示一个默认

[图片特效] Animated CSS3 Gallery基于 CSS3

[图片特效] JS实现图片翻书效果

[图片特效] 仿新浪滑屏大图广告定时收缩为小

相关内容推荐

时间转换方法

3D透明精致PNG图标

网页背景切换

JavaScript教程

可爱猫猫洗澡澡

东莞网站公司

东莞网站优化

邯郸网络公司

机械工业出版社

以不变应万变

Excel斜表头的做法

网页播放器

Sencha 中文站

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1