以下 的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()
})
})