Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 jquery实现鼠标拖动图片效果示例代码

jquery实现鼠标拖动图片效果示例代码

发布时间:2014-06-14   编辑:www.jquerycn.cn
鼠标拖动图片的效果想必大家都有见到过吧,其实实现起来很简单的,下面使用query来实现下,感兴趣的朋友不要错过
复制代码 代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title><script type="text/javascript" src="jquery-1.4.4.js"></script>
<script type="text/javascript">
$(function(){
$("html").mousemove(function(e){
$("#a").css("left",e.pageX).css("top",e.pageY);
});
});
</script>
<style type="text/css">
.a {
width:200px;
height:100px;
position:absolute;
background-color:rgb(0,0,0);
}
</style>
</head>
<body>

<img src="图片" id="a" name="a" class="a" >

只做了一个简单的实例
</body>

</html>

您可能感兴趣的文章:
jquery实现鼠标拖动图片效果示例代码
用jquery等比例控制图片宽高的具体实现
Jquery uploadify图片上传插件无法上传的解决方法
jQuery拖动图片删除示例
JQuery 图片滚动轮播示例代码
jquery预览图片实现鼠标放上去显示实际大小
JQuery实现鼠标移动到图片上显示边框效果
jquery实现简单易懂的图片展示小例子
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
jQuery实现图片放大预览实现原理及代码

关键词: jquery  鼠标拖动   
[关闭]