时间:2021-07-01 10:21:17 帮助过:11人阅读
代码:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>PHP中文网--手风琴焦点图</title> <style> *{margin:0; padding:0;} body,html{width:100%; height:100%;} .bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .bg-box-1{ background: url('http://www.gxlcms.com/tpl/Index/Static/img/zhibo4.jpg') no-repeat center/cover; } .bg-box-2{ background: url('http://www.gxlcms.com/tpl/Index/Static/img/banner1.jpg') no-repeat center/cover; } .bg-box-3{ background: url('http://www.gxlcms.com/tpl/Index/Static/img/banner3.jpg') no-repeat center/cover; } .bg-box-4{ background: url('http://www.gxlcms.com/tpl/Index/Static/img/banner4.jpg') no-repeat center/cover; } #wrap{ position: absolute; overflow: hidden; top:0; left:0; right:0; bottom:0; margin:auto; width: 1000px; height: 400px; } #wrap > ul{ width: 120%; list-style: none; } #wrap > ul > li{ float: left; width: 100px; height: 400px; cursor: pointer; } #wrap > ul > li:nth-child(1){ background: url('http://www.gxlcms.com/tpl/Index/Static/img/zhibo4.jpg') no-repeat center/cover; } #wrap > ul > li:nth-child(2){ background: url('http://www.gxlcms.com/tpl/Index/Static/img/banner1.jpg') no-repeat center/cover; } #wrap > ul > li:nth-child(3){ background: url('http://www.gxlcms.com/tpl/Index/Static/img/banner3.jpg') no-repeat center/cover; } #wrap > ul > li:nth-child(4){ background: url('http://www.gxlcms.com/tpl/Index/Static/img/banner4.jpg') no-repeat center/cover; width: 700px; } #wrap > ul > li > .text{ width: 100px; height: 100%; background: #000; opacity: .5; } #wrap > ul > li > .text p{ padding: 20px 40px; font-family: 'Microsoft yahei'; color: #fff; } </style> </head> <body> <div class="bg bg-box-1"></div> <div class="bg bg-box-2"></div> <div class="bg bg-box-3"></div> <div class="bg bg-box-4"></div> <div id="wrap"> <ul> <li> <div> <p>PHP中文网线上培训班</p> </div> </li> <li> <div> <p>创建一个属于自己的框架</p> </div> </li> <li> <div> <p>企业站点开发</p> </div> </li> <li> <div> <p>PHP中文网--这个专注编程教育的网站</p> </div> </li> </ul> </div> <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"></script> <script type="text/javascript"> (function(){ $('#wrap li').mouseover(function(){ if(!$(this).hasClass('curr')){ $('#wrap li').removeClass('curr'); $(this).addClass('curr'); // 切换背景 $('#wrap li').each(function(index){ if($(this).hasClass('curr')){ $('.bg').fadeOut(300); $('.bg:eq(' + index + ')').fadeIn(500); } }); $('.curr').stop().animate({ width: 700 }, 500, 'linear'); $('#wrap li').not('.curr').stop().animate({ width: 100 }, 500, 'linear'); } }); })() </script> </body> </html>
以上是jquery手风琴焦点动画的源码,感兴趣或者需要的同学可以直接拿去使用、研究!更多文章、源码请到PHP中文网搜索哦~~
相关推荐:
jquery标题选择动画
jQuery实现div跟随鼠标移动的代码案例
jquery实现手势解锁源码
以上就是jquery手风琴焦点动画的详细内容,更多请关注Gxl网其它相关文章!