js艺龙
Posted 狗尾草的博客
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js艺龙相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>艺龙</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } #box { margin: 50px auto; width: 1205px; } #box li { position: relative; float: left; width: 200px; height: 260px; cursor: pointer; } #box li .shadow { position: absolute; width: 100%; height: 100%; background: rgba(0, 0, 0, .2); } #box li .text { position: absolute; left: 0; right: 0; margin: 30px auto 0; width: 40px; font-size: 30px; color: #fff; text-align: center; } </style> </head> <body> <ul id="box"> <li style="background:url(images/1.jpg) center no-repeat;"> <div class="shadow"></div> <div class="text">园林酒店</div> </li> <li style="background:url(images/2.jpg) center no-repeat;"> <div class="shadow"></div> <div class="text">设计师酒店</div> </li> <li style="background:url(images/3.jpg) center no-repeat;"> <div class="shadow"></div> <div class="text">青年旅社</div> </li> <li style="background:url(images/4.jpg) center no-repeat;"> <div class="shadow"></div> <div class="text">特色客栈</div> </li> <li style="background:url(images/5.jpg) center no-repeat;"> <div class="shadow"></div> <div class="text">海岛酒店</div> </li> <li style="background:url(images/6.jpg) center no-repeat;"> <div class="shadow"></div> <div class="text">海外温泉</div> </li> </ul> <script src="https://cdn.bootcss.com/jquery/1.12.1/jquery.js"></script> <script> $(\'#box li\').mouseover(function () { $(this).stop(true).animate({ width:400 }).children().css(\'display\', \'none\').end().siblings().stop(true).animate({width:160}).children().css(\'display\', \'block\'); }); $(\'#box\').mouseout(function () { $(this).children().animate({width: 200}).children().css(\'display\', \'block\'); }); </script> </body> </html>
图片更换即可
以上是关于js艺龙的主要内容，如果未能解决你的问题，请参考以下文章