jQuery郵票人 @Draven

• 效果預覽
• html代碼
• css代碼
• js代碼

效果預覽

html代碼

<div class="wrap"><ul><li><a href="#"><img src="img/01.jpg" alt=""/></a></li><li><a href="#"><img src="img/02.jpg" alt=""/></a></li><li><a href="#"><img src="img/03.jpg" alt=""/></a></li><li><a href="#"><img src="img/04.jpg" alt=""/></a></li><li><a href="#"><img src="img/05.jpg" alt=""/></a></li><li><a href="#"><img src="img/06.jpg" alt=""/></a></li></ul> </div>

css代碼

<style type="text/css">* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}</style>

js代碼

<script>$(function () {//鼠標經過的時候，讓自己的透明度為1，其余為0.5$(".wrap li").hover(function () {$(this).stop().fadeTo(300,1).siblings().stop().fadeTo(300,0.4)}, function () {//鼠標離開的時候，所有圖片透明度恢復為1$(".wrap li").stop().fadeTo(300,1)})}) </script>

總結

以上是生活随笔為你收集整理的jQuery邮票人 --＞ 案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。