Learn free online HTML5, javascript, and jquery Tutorials by Examples

Wednesday 25 January 2017

on mouse move image rotate in jquery



















 <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