以下 的CSS样式跟布局自己写
悬停哪个哪个样式就改变,图片也随之改变
//jquery代码 $("document").ready(function(){ $(".tab-item").mouseenter(function(e){//也可以写成$(".tab li") $(this).addClass("active").siblings().removeClass(); var idx=$(this).index(); console.log(idx) $(".main").eq(idx).addClass("selected").siblings(".main").removeClass("selected") //.siblings().removeClass()这里面加东西是为了筛选,筛选带有.mian样式的兄弟级, 如果不写就表示所有的兄弟级,有时可能不需要全部的兄弟级,所以这是用来筛选的,后面的同理 }) })
点哪个数字就是第几张图片出来
//jquery代码 $(document).ready(function(){ var idx=0; $(".wrap>ol>li").mouseenter(function(){ idx+=1; $(this).addClass("active").siblings().removeClass("active"); $(".wrap>ul>li").eq($(this).index()) .css({ "top":250, "left":650, "z-index":idx }).animate({ "top":0, "left":0, },500) }) })
//jquery代码 $(function () { $(".wrap li").each(function (i,ele) { $(this) .css("background-image","url(img/" + (i + 1) +".jpg)"); }).mouseenter(function () { $(this).stop().animate({ "width":300 },300).siblings().stop().animate({ "width":100 },300) }).mouseleave(function () { $(this).stop().animate({ "width":100 },300) }); })
//jquery代码 $(document).ready(function(){ $("#a").slideDown() $("#b").click(function(){ $("#a").slideUp() }) })