<div id="rotates" class="column">
<ul class="list">
<li><img src="images/image10.jpg"></li>
<li><img src="images/image1.jpg"></li>
<li><img src="images/image2.jpg"></li>
<li><img src="images/image3.jpg"></li>
<li><img src="images/image4.jpg"></li>
<li><img src="images/image5.jpg"></li>
<li><img src="images/image6.jpg"></li>
<li><img src="images/image7.jpg"></li>
<li><img src="images/image8.jpg"></li>
<li><img src="images/image9.jpg"></li>
<li><img src="images/image11.jpg"></li>
<li><img src="images/image12.jpg"></li>
<li><img src="images/image13.jpg"></li>
<li><img src="images/image14.jpg"></li>
<li><img src="images/image15.jpg"></li>
<li><img src="images/image16.jpg"></li>
<li><img src="images/image17.jpg"></li>
<li><img src="images/image18.jpg"></li>
</ul>
<style>
.list {width: 400px; float:left; border:5px solid #d5d5d5;}
.list li{display:none;}
.list li:first-child{display:block;}
.list li img {width: 100%;}
</style>
</div>
<script>
$(function(){
var pic_X = $('.list').offset().left;
var pic_Y = $('.list').offset().top;
var pic_W = $('.list').width()/2;
var pic_H=$('.list').height()/2;
var center_X = pic_X + pic_W;
var center_Y = pic_Y + pic_H;
var movestop = pic_W/10;
$('.list').mousemove(function(event){
var mouse_X = event.pageX;
var mouse_Y = event.pageY;
if(mouse_X - center_X <= 0){
moveImg(mouse_X, mouse_Y, 'left');
}else{
moveImg(mouse_X, mouse_Y);
}
});
function moveImg(m_X,m_Y, dir){
var index = parseInt(Math.abs(m_X - center_X)/movestop);
if(dir){
$('.list li').eq(index).show().siblings().hide();
}else{
$('.list li').eq(18-index).show().siblings().hide();
}
}
});
</script>
No comments:
Post a Comment