总结jq的一些特效

zoukankan html css js c++ java

总结jq的一些特效

    Jquery代码总结

1.轮播图：

<script src="jquery-1.8.3.min.js"></script>
<script>
    var index=0;
    var len=$(".banner .lt .top .left ul li").length;
    $(".banner .lt .top .left .click .prev").click(function(){
        index--;
        if(index<0){
            index=len-1;
        }
        $(".banner .lt .top .left ul li").hide().eq(index).show();
        $(".banner .lt .top .left ol li ").removeClass("cot").eq(index).addClass("cot")
    });
    var dt=function(){            /*function dt()声明式实际开发中常用前后都能调用*/
        /* 表达式只能后面调用*/
        index++;
        if(index>len-1){
            index=0;
        }
        $(".banner .lt .top .left ul li").hide().eq(index).show();
        $(".banner .lt .top .left ol li ").removeClass("cot").eq(index).addClass("cot")
    };
    $(".banner .lt .top .left .click .next").click(function(){
        dt();
    });
    var timer=setInterval(dt,1000);
    $(".banner .lt .top .left").mouseover(function(){
        clearInterval(timer);
    });
    $(".banner .lt .top .left").mouseout(function(){
        timer=setInterval(dt,1000);
    });
    var timer1=null;
    $(".banner .lt .top .left ol li").mouseover(function(){
        clearTimeout(timer1);
        var that=$(this);
        timer1=setTimeout(function(){
            index=that.index();
            that.addClass("cot").siblings().removeClass("cot");
            $(".banner .lt .top .left ul li").hide().eq(index).show();
        },200)
    });

2.红白耳机切换：

Html :<td class="tu4">
    <i></i>
    
    
</td>

Css部分：.main .lt .biao .bto table tr .tu4 i{
    display: block;
    background: url("../images/icons-01.gif")no-repeat -9px -79px;
     21px;
    height: 21px;
    margin: auto;
}

.main .lt .biao .bto table tr .tu4 .hong{
    display: block;
    background: url("../images/icons-01.gif")no-repeat -10px -184px;
     21px;
    height: 21px;

}

Jq部分：$("table .tu4").click(function() {
    $("table .tu4 i").removeClass("hong");
    $(this).find("i").addClass("hong");
})

3.下拉菜单：

$(".header ol li").hover(function(){
    $(this).find("ul li").stop().slideDown();
},(function(){

$(this).find("ul li").stop().slideUp();
})
)

4.一些特有属性：

<script>
    $("input").click(function(){
        $(".box").delay(1000).animate({width:600, height:600},1000,
        function(){
            alert("鼓掌")
        })
    })//animate属性的应用
    var i=0;
    $(".box").mousedown(function(){
        i="按下"
        console.log(i);
    })

    $(".box").mouseup(function(){
        i="抬起"
        console.log(i);
    })//mousedown和mouseup属性的应用
    $("input").keydown(function(e){
        console.log(e.key);
        if(e.key=="Enter"){
            console.log("恭喜你");}
        else{
            console.log("chuqu");
        }
    });//keydown属性的应用
    $(".box").mousemove(function(e){
        $(".box1").css({left:5+e.pageX,top:10+e.pageY});
    }).hover(function(){
        $(".box1").show()
    },function(){
        $(".box1").hide()
    }
    )//mousemove属性的应用
</script>

5.图片放大特效：

<body>
<div class="dbox">
    <div class="box">
        <img src="imge/1.jpg" alt="">
    </div>
    <div class="box">
        <img src="imge/2.jpg" alt="">
    </div>
    <div class="box">
        <img src="imge/3.jpg" alt="">
    </div>
    <div class="box">
        <img src="imge/4.jpg" alt="">
    </div>
</div>
<div class="box1"></div>

</body>
<script src="jquery-1.8.3.min.js"></script>
<script>

    $(".box").mousemove(function(e){

        $(".box1").css({left:5+e.pageX,top:10+e.pageY});
    }).hover(function(){
               var src=$(this).find("img").attr("src");
                $(".box1").show().css({backgroundImage:"url("+src+")"})
            },function(){
                $(".box1").hide();
            )

</script>

6.图片特效：

           <div class="box">
    <ul>
        <li><img src="imge/xiao1.jpg" alt=""></li>
        <li><img src="imge/xiao2.jpg" alt=""></li>
        <li><img src="imge/xiao3.jpg" alt=""></li>
        <li><img src="imge/xiao4.jpg" alt=""></li>
    </ul>
</div>
<div class="box1"></div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    $(".box ul li").click(function(){
    }).hover(function(){
        index=$(this).index();
                $(".box1").show().css({backgroundImage:"url(imge/da"+(index+1)+".jpg)"})
            }
    ).hover(function(){
        $(this).find("img").css({zIndex:999}).stop().animate({
            width:200,height:200,top:-50,left:-50
        },400);
    },function(){
        $(this).find("img").css({zIndex:1}).stop().animate({
            width:100,height:100,top:0,left:0
        });
    })
</script>

6.图片的动态效果：

<style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
             640px;
            height: 320px;

            margin: 50px auto;
            border: 3px solid pink;
            overflow: hidden;
        }
        .box ul{
             1000px;
            background-color: #00030C;
        }

        .box ul li{
             80px;
            height: 320px;
            background-color:white;
            float: left;
            list-style: none;
            background-size: 480px 320px;
            /*background-size:100%;*/
            cursor: pointer;
            /*background-repeat: no-repeat;
            background-position: center;*/
        }

    </style>
</head>
<body>
<div class="box">
    <ul>
        <li style="background-image: url(imge/pic1.jpg)"></li>
        <li style="background-image: url(imge/pic2.jpg)"></li>
        <li style="background-image: url(imge/pic3.jpg)"></li>
        <li style="background-image: url(imge/pic4.jpg)"></li>
        <li style="background-image: url(imge/pic5.jpg)"></li>
        <li style="background-image: url(imge/pic6.jpg)"></li>
        <li style="background-image: url(imge/pic7.jpg)"></li>
        <li style="background-image: url(imge/pic8.jpg)"></li>
    </ul>
</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    $(".box ul li").hover(function(){
        $(this).stop().animate({width:430},200).siblings().
                stop().animate({width:30},200)
    },function(){
        $(".box ul li").stop().animate({width:80},200)
    })
</script>

没有注释部分：

加上注释部分：

7.上下拉菜单：

<style>
        .box-wrap{
             300px;
        }
    </style>
</head>
<body>
<div class="box-wrap">
    <div class="box">
        <div class="box-top">
            <h1>我是一级菜单</h1>
        </div>
        <div class="box-bottom">
            <p>我是二级菜单</p>
            <p>我是二级菜单</p>
            <p>我是二级菜单</p>
            <p>我是二级菜单</p>
        </div>
    </div>
    <div class="box">
            <div class="box-top">
                <h1>我是一级菜单</h1>
            </div>
            <div class="box-bottom">
                <p>我是二级菜单</p>
                <p>我是二级菜单</p>
                <p>我是二级菜单</p>
                <p>我是二级菜单</p>
            </div>
    </div>
    <div class="box">
                <div class="box-top">
                    <h1>我是一级菜单</h1>
                </div>
                <div class="box-bottom">
                    <p>我是二级菜单</p>
                    <p>我是二级菜单</p>
                    <p>我是二级菜单</p>
                    <p>我是二级菜单</p>
                </div>
    </div>
</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    $(".box").click(function(){
        $(this).find(".box-bottom").slideToggle();
        $(this).siblings().find(".box-bottom").slideUp();
    })
</script>

效果图：

8.轮播图的第二方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
      margin: 0;
            padding: 0;
        }
        .box{
             600px;
            height: 300px;
            position: relative;
            border: 2px solid black;
            overflow: hidden;
            margin: 100px auto;
        }
        li{
            list-style: none;
        }
        .box ul{
             4000px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box ul li{
             600px;
            height: 300px;
            font: 900 68px/300px "simsun";
            text-align: center;

            float: left;
        }
        .box ol{
            position: absolute;
             140px;
            height: 20px;
            background-color: #00c6ff;
            left: 50%;
            margin-left: -70px;
            bottom: 10px;
            border-radius: 10px;
        }
        .box ol li{
             20px;
            height: 20px;
            background-color: yellow;
            float: left;
            border-radius: 100%;
            cursor: pointer;
        }
        .box ol li+li{
            margin-left: 10px;
        }
        .box ol li.col{
            background-color: black;
        }
        .box .click div{
             30px;
            height: 40px;
            font:900 20px/40px "simsun";
            position: absolute;
            background-color: rgba(0,0,0,.5);
            top:50%;
            margin-top: -20px;
            color: white;
            text-align: center;
            cursor: pointer;
        }
         .click .next{
            right: 0;
        }
    </style>
</head>
<body onselectstart="return false">
<div class="box">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>1</li>
    </ul>
    <ol>
        <li class="col"></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <div class="click">
        <div class="prev">
            <
        </div>
        <div class="next">
            >
        </div>
    </div>

</div>
</body>
<script src="jquery-1.8.3.min.js"></script>
<script>
    var index=0;        /* 给ul li加索引*/
    var bb=0;           /*给ol li 加索引*/
    var len=$(".box ul li").length;   /* 给ui li 声明总个数*/
    $(".box ol li").click(function(){ /*给小圆圈设置点击事件*/
        index=$(this).index();   /*调用这个索引值*/
       bb=$(this).index();
        $(".box ul").animate({left:-(index*600)},1000);   /*图片进行向左切换*/
        $(".box ol li").removeClass("col").eq(bb).addClass("col"); /*先让黑点全部覆盖，然后一个一个显示出来*/
    })
    var fa=true;          /*声明此过程是为了禁止刷流量*/
    $(".box .click .prev").click(function(){   /* 给左按键设置点击事件*/
        if(fa==true){
            fa=false;
            bb--;
            if (bb<0){
                bb=len-2;          /* 左点击时，给小圆点设置循环，让小圆点和图片同时进行*/
            }
            $(".box ol li").stop().removeClass("col").eq(bb).addClass("col");
            index--;
            if (index<0) {
                index = len-2;
                $(".box ul").css({left:-(len-1)*600});    /*让图片瞬间转到第五张图片*/
                /* $(".box ul").css({left:-((index+1)*600)});*/
            }
            $(".box ul ").stop().animate({left:-(index*600)},1000, /*让图片进行左循环*/
                    function () {
                        fa = true;
                    })
        }
        })
    var fa=true;
    $(".box .click .next").click(function(){
        if(fa==true){
            fa=false;
            bb++;
            if(bb>len-2){
                bb=0             /*当右点击时，让小圆圈随着图片进行右循环*/
            }
            $(".box ol li").stop().removeClass("col").eq(bb).addClass("col");
            index++;
            if(index>len-1){
                index=1;
                $(".box ul").css({left:0}); /* 当图片循环到最右端时，让图片立即返回到第一张图片*/
            }
            $(".box ul ").stop().animate({left:-(index*600)},1000    /*让图片进行右循环*/
                    ,function(){
                        fa=true;
                    });
        }
    })
</script>

查看全文

相关阅读:
PIE SDK介绍
 PIE软件介绍
 PIE SDK与Python结合说明文档
 转载博客（Django2.0集成xadmin管理后台遇到的错误）
python+django学习二
 python+django学习一
 HTML练习二--动态加载轮播图片
 HTML练习一
 LeetCode 999. 车的可用捕获量
 LeetCode 892. 三维形体的表面积

原文地址：https://www.cnblogs.com/zr123/p/7354270.html