JQuery回转图片展示（鼠标交互式）

查看次数8634 发表时间2012-12-14 21:48:54

HTML:

<script type="text/javascript" src="/css_js/jquery182.js"></script>

<div id="runout">
   <div id="run1" class="rundiv">
    <table><tr>
    <td><a href="http://ano.cn" target="_blank"><img src="/te/image/swf/icon_ano.png" /></a></td>
    <td><a href="http://www.jimbrothers.net" target="_blank"><img src="/te/image/swf/icon_jim.png" /></a></td>
    <td><a href="http://www.ccgrass.cn" target="_blank"><img src="/te/image/swf/icon_ccg.png" /></a></td>
    <td><a href="http://dision.com.cn" target="_blank"><img src="/te/image/swf/icon_dision.png" /></a></td>
    <td><a href="http://www.ecovacs.com" target="_blank"><img src="/te/image/swf/icon_ecovacs.png" /></a></td>
    <td><a href="http://hanwell.cc" target="_blank"><img src="/te/image/swf/icon_hw.png" /></a></td>
    <td><a href="http://www.joyea.cn" target="_blank"><img src="/te/image/swf/icon_j1.png" /></a></td>
    <td><a href="http://timethink.net" target="_blank"><img src="/te/image/swf/icon_tt.png" /></a></td>
    <td><a href="http://msxy.njnu.edu.cn" target="_blank"><img src="/te/image/swf/icon_nnu.png" /></a></td>
    </tr></table>
  </div>
  <div id="run2" class="rundiv"></div>
</div>

CSS:

#runout {width:1000px; height:80px; margin:0px auto; overflow:hidden; position:relative;}
.rundiv { position:absolute; top:0px; left:0px;}
.rundiv td{padding:0px 10px; filter:Alpha(opacity=30); -moz-opacity:0.3; opacity:0.3;}
.rundiv td:hover{filter:none; -moz-opacity:1; opacity:1;}

 

JS:

$(window).load(function () {
            var runoutW = $("#runout").width(); //获取容器宽度
            var runW = $("#run1").width();  //获取移动块的宽度
            $("#run2").html($("#run1").html()); //把run1的内容复制给run2
            var Speed = 2;  //初始速度2移动
            $("#runout").mousemove(function (e) {
                var mouseX = e.pageX - $(this).offset().left; //光标相对于容器的X位置
                Speed = Math.round((mouseX / runoutW) * 20 - 10); //把容器宽度分为20档，速度从-10到10
            });
            $("#runout").mouseout(function (e) {
                Speed = 2;
            });
            var timer = setInterval(runYou, 30); //每30毫秒执行一次runYou函数
            function runYou() {
                var run1L = $("#run1").position().left;
                var run2L = $("#run2").position().left;
                $("#run1").css({ left: run1L - Speed + "px" });
                if (run1L + runW <= runoutW) { //如run1向左移动脱离容器右边，把run2放到run1右边
                    $("#run2").css({ left: run1L + runW + "px" });
                };
                if (run1L >= 0) { //如run1向右移动脱离容器左边，把run2放到run1左边
                    $("#run2").css({ left: run1L - runW + "px" });
                };
                if (run1L + 2 * runW <= runoutW) { //如run2向左移动脱离容器右边，把run1放到run2右边
                    $("#run1").css({ left: run2L + runW + "px" });
                };
                if (run1L - runW >= 0) { //如run2向右移动脱离容器左边，把run1放到run2左边
                    $("#run1").css({ left: run2L - runW + "px" });
                };
            };
});

效果请看：http://www.thinkenter.net/
 

(转发请注明转自:学PHP)    

1楼 学phper说： 2015-05-23 03:19:25

-1'

2楼 学phper说： 2015-05-23 03:19:26

1

3楼 -1'说： 2015-05-23 03:19:27

1

昵称：

(不超过20个字符或10个汉字)

内容：

发 表