? ? ? ?我不會寫文章,只是把前端學習jquery的一些經驗和大家分享一下,希望能夠幫助一下需要學習或者是想要某個效果但是一時想不出怎么做的朋友!
看圖片箭頭效果
? ? ? ?先看上圖,想要達到的效果是點擊價格排序時箭頭向上或者是向下,點擊銷量排序時箭頭也向上向下,兩個是相互不干擾的。根據網絡上的介紹,有一種方法就是利用插件,jQueryRotate.js,但是我看過感覺好亂,為了實現一個效果要加那么多東西,不是很好~
? ? ? ?這里是自己寫的jquery,僅供參考~~
樣式代碼
.bb{margin:0 auto;width:1000px;}
.aa i{float:left;width:128px;height:128px;}
.arrow1{background: url(img/top.png) no-repeat;}
.arrow2{background: url(img/top1.png) no-repeat;}
解釋:top.png是向上的箭頭,top1.png是向下的箭頭,自己去網絡上下載圖片
jquery代碼
$(".bb div").click(function(){
var i=$(".bb div").index($(this));
$(".aa > i").eq(i).toggleClass("arrow2");
});
? ? 記得要調用jquery.js文件,才會有效果~