jQuery图片切换代码，相应鼠标滑动结果

发布时间：2018-08-17 10:23:15 所属栏目：编程来源：站长网

导读：jQuery 图片切换代码，相应鼠标滑动结果！您第一眼看到这个结果时大概会觉得是flash实现的，当你右击时就会大白不是Flash了，这是jQuery团结CSS和图片完成的，动态切换、还可以表现笔墨问题！为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要刷

　　jQuery图片切换代码，相应鼠标滑动结果！您第一眼看到这个结果时大概会觉得是flash实现的，当你右击时就会大白不是Flash了，这是jQuery团结CSS和图片完成的，动态切换、还可以表现笔墨问题！

　　为办理一些网页殊效运行后不能表现结果（譬喻：jQuery则必要革新）题目，猛火出格新增网页版演示。

　　点击查察：网页殊效

　　运行演示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"/> <title>jQuery实例：图片滑动切换展示结果 - 猛火网 Liehuo.NET</title> <script src="/uploads/common/js/jquery-1.4.2.min.js" type="text/javascript"></script> <div id="cnblogs_post_body"> <style type="text/css"> #photoshow{ border: solid 1px #c5e88e; overflow: hidden; /*图片超出DIV的部门不表现*/ width: 580px; height: 169px; background: #c5e88e; position: absolute; } .photo{ position: absolute; top: 0px; width: 490px; height: 169px; } .photo img{ width: 490px; height: 169px; } .photo span{ padding: 5px 0px 0px 5px; width: 490px; height: 30px; position: absolute; left: 0px; bottom: -32px; /*先容内容开始的时辰不表现*/ background: black; filter: alpha(opacity=50); /*IE透明*/ opacity: 0.5; /*FF透明*/ color: #ffffff; } </style> <p>开始之前，我就喜痪?看一下结果：</p><br> <div> <div id="photoShow"> <div class="photo"><img alt="" src="/uploads/common/images/1.jpg"> <span>A 猛火网演示图片第一张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/2.jpg"> <span>B 猛火网演示图片第二张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/3.jpg"> <span>C 猛火网演示图片第三张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/4.jpg"> <span>D 猛火网演示图片第四张</span> </div> <div class="photo"><img alt="" src="/uploads/common/images/5.jpg"> <span>E 猛火网演示图片第止张</span> </div></div></div> <script type="text/javascript"> $(document).ready(function(){ var imgDivs = $("#photoShow>div"); var imgNums = imgDivs.length; //图片数目 var divWidth = parseInt($("#photoShow").css("width")); //表现宽度 var imgWidth = parseInt($(".photo>img").css("width")); //图片宽度 var minWidth = (divWidth - imgWidth)/(imgNums-1); //表现个中一张图片时其他图片的表现宽度 var spanHeight = parseInt($("#photoShow>.photo:first>span").css("height")); //图片先容信息的高度 imgDivs.each(function(i){ $(imgDivs[i]).css({"z-index": i, "left": i*(divWidth/imgNums)}); $(imgDivs[i]).hover(function(){ //$(this).find("img").css("opacity","1"); $(this).find("span").stop().animate({bottom: 0}, "slow"); imgDivs.each(function(j){ if(j<=i){ $(imgDivs[j]).stop().animate({left: j*minWidth}, "slow"); }else{ $(imgDivs[j]).stop().animate({left: (j-1)*minWidth+imgWidth}, "slow"); } }); },function(){ imgDivs.each(function(k){ //$(this).find("img").css("opacity","0.7"); $(this).find("span").stop().animate({bottom: -spanHeight}, "slow"); $(imgDivs[k]).stop().animate({left: k*(divWidth/imgNums)}, "slow"); }); }); }); }); </script> </body> </html> <br /><center>如不能表现结果，请按Ctrl+F5革新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提醒：可修改儿女码再运行!

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!

MySQL源码安置	运用图形界面从SQL导入
MySQL5.7+keepalived+	windows系统下jsp+mys