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