联调/轮播/手风琴模式/QQ弹窗

联调

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

QQ弹窗

//jquery代码
$(document).ready(function(){
   $("#a").slideDown()
   $("#b").click(function(){
   	 $("#a").slideUp()
   })
})