码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象的简单鼠标拖动效果

时间:2018-05-03 10:23:49      阅读:156      评论:0      收藏:0      [点我收藏+]

标签:ima   rip   分享图片   query   面向对象   png   UNC   osi   top   

技术分享图片

 

<!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>

面向对象的简单鼠标拖动效果

标签:ima   rip   分享图片   query   面向对象   png   UNC   osi   top   

原文地址:https://www.cnblogs.com/ypwei/p/8983887.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!