JQ基础练习---图片划过变暗
生活随笔
收集整理的這篇文章主要介紹了
JQ基础练习---图片划过变暗
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
簡單分享下,劃過一張圖片其余圖片變暗,圖片劃過變暗的簡單效果,JQ實現主要是css寫法跟思路變化。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function (){$(".n_pagescon_img li").eq(0).addClass("")$(".n_pagescon_img li").hover(function () { $(this).siblings().find("img").css("opacity", 0.6); },function () { $(".n_pagescon_img li").find("img").css("opacity", 1); })}); </script>?
?
注意當中的 li 有背景色
.n_pagescon_img{padding-top:151px;} .n_pagescon_img li{float:left;width:320px;height:501px; background-color:#000;margin-right:10px;overflow:hidden;} .n_pagescon_img li.bnone{margin:0;} .n_pagescon_img li img{opacity: 1;} .n_pagesimg img{display:block;}轉載于:https://www.cnblogs.com/ninali/p/3148303.html
總結
以上是生活随笔為你收集整理的JQ基础练习---图片划过变暗的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: (转)mssql2005生成表字典
- 下一篇: 做了一款股票复盘工具