面向对象的简单鼠标拖动效果
Posted 凌晨四点的北京
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了面向对象的简单鼠标拖动效果相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body,html{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100%;
height: 100%;
background: url(images/deadpool-bg.png);
background-size: cover;
overflow: hidden;
position: relative;
}
.wrap img{
position: absolute;
}
.img1{
width: 210px;
height: 300px;
left: 20px;
top: 20px;
}
.img2{
width: 210px;
height: 300px;
left: 20px;
top: 0px;
}
.img4{
width: 140px;
height: 200px;
left: 0px;
top: 0px;
bottom: 0;
right: 0;
margin: auto;
}
.img3{
width: 350px;
height: 500px;
left: 0px;
top: 0px;
right: 0;
/*margin: auto;*/
}
.img5{
width: 210px;
height: 300px;
right: 20px;
top: 0px;
}
.img6{
width: 210px;
height: 300px;
right: 40px;
bottom: 0px;
}
.img7{
width: 210px;
height: 300px;
left: 40px;
bottom: 0px;
}
.img8{
width: 280px;
height: 400px;
left: 280px;
bottom: 0px;
top: 0;
bottom: 0;
margin: auto;
}
.img9{
width: 280px;
height: 400px;
right: 280px;
bottom: 0px;
top: 0;
bottom: 0;
margin: auto;
}
.img10{
width: 70px;
height: 100px;
right: 0px;
bottom: 80px;
left: 0;
margin: auto;
}
.img11{
width: 70px;
height: 100px;
right: 0px;
top: 80px;
left: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="wrap" id=\'wrap\'>
<img class=\'img1 img\' data-pos=\'0.9\' src="images/deadpool.png" />
<img class=\'img2 img\' data-pos=\'0.85\' src="images/deadpool-title.png" />
<img class=\'img4 img\' data-pos=\'0.8\' src="images/deadpool.png" />
<img class=\'img5 img\' data-pos=\'0.75\' src="images/deadpool.png" />
<img class=\'img6 img\' data-pos=\'0.7\' src="images/deadpool.png" />
<img class=\'img7 img\' data-pos=\'0.65\' src="images/deadpool.png" />
<img class=\'img8 img\' data-pos=\'0.6\' src="images/deadpool.png" />
<img class=\'img9 img\' data-pos=\'0.55\' src="images/deadpool.png" />
<img class=\'img10 img\' data-pos=\'0.5\' src="images/deadpool.png" />
<img class=\'img11 img\' data-pos=\'0.45\' src="images/deadpool.png" />
</div>
<script src="./jquery-2.1.1.min.js"></script>
<script>
(function (){
var $show={
$wrap:$("#wrap"),
$obj:$(\'#wrap\').find(\'img\'),
_init:function(){
this._hander();
this._position();
},
_center:function(){
return {
left:this.$wrap.width()/2,
top:this.$wrap.height()/2
}
},
_position:function(){
$.each(this.$obj,function(){
$(this).data(\'pos\',{
left:parseInt($(this).css(\'left\')),
top:parseInt($(this).css(\'top\')),
})
})
},
_hander:function(){
var that=this
this.$wrap.on(\'mousemove\',function(event){
var event=event||window.event
var mx=event.pageX-that._center().left;
var my=event.pageY-that._center().top
that._move(mx,my)
})
},
_move:function(mx,my){
$.each(this.$obj,function(){
var pos=$(this).data(\'pos\');
$(this).css({
left:(pos.left+mx*Number($(this).attr(\'data-pos\')))>0?(pos.left+mx*Number($(this).attr(\'data-pos\'))):0,
top:(pos.top+my*Number($(this).attr(\'data-pos\')))>0?(pos.top+my*Number($(this).attr(\'data-pos\'))):0,
})
})
}
}
$show._init()
})()
</script>
</body>
</html>
以上是关于面向对象的简单鼠标拖动效果的主要内容，如果未能解决你的问题，请参考以下文章