JQuery回转图片展示(鼠标交互式)
查看次数10610 发表时间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)
相关推荐
- JQuery输入框选中加亮效果 (2012-12-14 22:19:22)
- jQuery页面加载初始化的3种方法 (2012-12-14 22:21:28)
- js、jquery图片动画,图片动态切换 (2012-12-15 20:39:56)
- jQuery源码分析 (2012-12-15 20:40:11)
- jQuery 遮罩层插件blockUI (2012-12-21 21:52:17)
- 15个值得开发人员关注的jQuery开发技巧和心得 (2012-12-14 21:48:41)
- JQUERY获取当前页面的URL信息 (2012-11-28 09:27:49)
- JQuery 模拟弹出窗口 (2012-11-26 22:36:59)
- Jquery获得控件值的方法 (2012-11-26 22:36:51)
- Web开发必备jQuery插件 (2012-11-26 22:36:23)
- 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
发表评论