js藝龍
阿新 • • 發佈：2018-08-14
特色 cal relative lin func tex osi enter ctype .gif)
<!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藝龍