js特效

2022-11-06 19:22:35

1.轮播换图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        img{width:170px;height: 130px;}

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(function () {

            var i=0;

            var tt;

            $("img").hover(function () {

                clearInterval(tt);

            },tab);  // 注意这里没有()!

            function tab(){

                tt=setInterval(function(){

                    i++;

                    $("img").attr("src","img/pic"+i+".png");

                    if(i>2){

                        i=0;

                    }

                },1000);

            }

            tab();

        });

    </script>

</head>

<body>

<img src="img/pic1.png"/>

</body>

</html>

2.滑动轮播换图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div,img, body, ul, li {margin: 0;padding: 0;}

        li {list-style: none;float: left;}

        .a, li, img {width: 170px;height: 130px;}

        .a{overflow: hidden;}

        ul{width:510px;}

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(function () {

            function test(){

                var i=0;

                var width=parseInt($("img").width());

                setInterval(function () {

                        i++;

                    if(i>2){

                        i=0;

                    }

                   $("ul").animate({marginLeft:'-'+(width*i)+'px'},1000);

                },3000);

            }

            test();

        });

    </script>

</head>

<body>

<div class="a">

    <ul>

        <li><img src="img/pic1.png"/></li>

        <li><img src="img/pic2.png"/></li>

        <li><img src="img/pic3.png"/></li>

    </ul>

</div>

</body>

</html>

3.左右方向滑动轮播

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div, img, body, ul, li {margin: 0;padding: 0;}

        li {list-style: none;float: left;}

        .wrap, li, img {width: 170px;height: 130px;}

        .wrap {overflow: hidden;height: 130px;margin: 50px;}

        ul {width: 510px;height: 130px;border:1px solid green;}

        .whole{border:1px solid red; width:270px;height: 190px; position: relative;}

        .bt1{position: absolute;top:100px;left: 10px;}    /* 按钮相对定位*/

        .bt2{position: absolute;top:100px;left: 230px;}

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(function () {

            var tt;

            var i = 0;

            var width = parseInt($("img").width());

            function test() {

                 tt=setInterval(function () {

                    doMove(1);       // 定时器调函数，定时传个1  // 默认在定时器完成移动 animate() 由于需要传参，多写了一个函数 doMove()

                }, 3500);

            }

            test();

            function doMove(num){

                //i++;

                i=i+num;     //

                if (i > 2) {

                    i = 0;

                }

                if(i<0){

                    //i=0;   //等于0 就不能再向左滑动了
                     i=2;

                }

                $("ul").stop().animate({'marginLeft': '-' + (width * i)+'px'}, 2000);

            }

            $(".whole").hover(function () {  // 整一块hover()

                clearInterval(tt);

            },test);

            $(".bt1").click(function () {

                doMove(-1);

                console.log("i: "+i);

            });

            $(".bt2").click(function () {

                doMove(1);

                console.log("i: "+i);

            });

        });

    </script>

</head>

<body>

<div class="whole">

    <div class="wrap">

        <ul>

            <li><img src="img/pic1.png"/></li>

            <li><img src="img/pic2.png"/></li>

            <li><img src="img/pic3.png"/></li>

        </ul>

    </div>

    <button class="bt1"><<</button>

    <button class="bt2">>></button>

</div>

</body>

</html>

4.jq拖拽

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .drag{

            position:absolute;

            background:red;

            top:100px;left:200px;

            padding:0;

            width:100px;height: 100px;

        }

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(document).ready(function() {

            var move = false;//移动标记

            var _x, _y;//鼠标离控件左上角的相对位置

            $(".drag").mousedown(function (e) {

                move = true;

                _x = e.pageX - parseInt($(".drag").css("left"));

                _y = e.pageY - parseInt($(".drag").css("top"));

            });

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

                if (move) {

                    var x = e.pageX - _x;//控件左上角到屏幕左上角的相对位置

                    var y = e.pageY - _y;

                    $(".drag").css({"top": y, "left": x});    // 被拖拽的div采用绝对定位

                }

            });

            $(".drag").mouseup(function () {

                move = false;

            });

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

                console.log("mx: "+ e.pageX+": "+ e.pageY);

            })

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="btn"/>

<div class="drag"></div>

<div class="a" style="width:200px; height: 200px; border:1px solid green;"></div>

</body>

</html>

5.jq划线

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style>

        .a{border:1px solid red;width:0px; display: none;}

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(function () {

            $("#btn").click(function () {

                $(".a").show();

                $(".a").animate({width:'+100px'},1000);

            });

        });

    </script>

</head>

<body>

<input type="button" id="btn" value="btn"/>

<div class="a"></div>

</body>

</html>

6.鼠标变成ico图标

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>

    <style>

        .a{cursor:url("a.ico"),auto;}

    </style>

    <script>

        $(function () {

            $("button").click(function () {

                $("body").addClass("b");

            });

        });

    </script>

</head>

<body style="height: 500px;">

<button>btn</button>

</body>

</html>

7.轮播图加链接

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        img{width:170px;height: 130px;}

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(function () {

            var i=0;

            var tt;

            var arrUrl=['http://www.baidu.com','http://www.qq.com','http://www.126.com'];

            var imgPlay=$(".imgPlay");

            var img=$(".imgPlay").find("img");

            var url=$(".imgPlay").find("a");

            $("img").hover(function () {

                clearInterval(tt);

            },tab);  // 注意这里没有()!

            function tab(){

                tt=setInterval(function(){

                    i++;

                    img.attr("src","img/pic"+i+".jpg");

                    var index=i-1;

                    url.attr("href",arrUrl[index]);

                    if(i>2){

                        i=0;

                    }

                },1500);

            }

            tab();

        });

    </script>

</head>

<body>

<div class="imgPlay">

    <a href="http://www.baidu.com">

        <img src="img/pic1.jpg"/>

    </a>

</div>

</body>

</html>

8.轮播图完善版

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        div, img, body, ul, li {margin: 0;padding: 0;}

        li {list-style: none;}

        .carousel{border:1px solid red; width:270px;height: 190px; position: relative; }

        .carousel .wrap {overflow: hidden;margin-left: 50px;margin-top: 50px;height: 130px;width:170px;}

        .carousel .wrap ul {width: 510px;height: 130px;border:1px solid green; margin-left:0;}

        .carousel .wrap ul li {width: 170px;height: 130px;float:left; }

        .carousel .wrap ul li img {width: 170px;height: 130px;}

        .carousel .bt1{position: absolute;top:100px;left: 10px;}    /* 按钮相对定位*/

        .carousel .bt2{position: absolute;top:100px;left: 230px;}

        .carousel .num{position: absolute;top:140px;left:100px;}

        .carousel .num li{float:left;font-size: 16px;margin-right: 5px;width:20px; text-align:center; cursor:pointer;}

        .carousel .num .active{color:red;}

    </style>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>

        $(function () {

            var i = 0;

            var width = parseInt($(".wrap li").width());

            var num=$(".wrap li").length;

            $(".wrap ul").width(num*width+"px");

            function doMove(){

                $(".wrap ul").stop().animate({'marginLeft':'-'+ (width * i)+'px'}, 500);

                $(".num li").eq(i).addClass("active").siblings().removeClass("active");

            }

            $(".bt1").click(function () {

                i--;

                if(i<0){

                    i=3;

                }

                console.log("i: "+i);

                doMove();

            });

            $(".bt2").click(function () {

                i++;

                if(i>3){

                    i=0;

                }

                console.log("ii: "+i);

                doMove();

            });

            $(".num li ").click(function () {

                i = $(this).index();

                console.log("i: "+i);

                doMove();

            });

        });

    </script>

</head>

<body>

<p> 点击 1 2 3 4 无法跳转到对应的图片</p>

<div class="carousel">

    <div class="wrap">

        <ul>

            <li><img src="pic1.png"/></li>

            <li><img src="pic2.png"/></li>

            <li><img src="pic3.png"/></li>

            <li><img src="pic4.png"/></li>

        </ul>

    </div>

    <button class="bt1"><<</button>

    <button class="bt2">>></button>

    <ul class="num">

        <li class="active">1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</div>

</body>

</html>
上一篇：redis整理の走进redis世界


下一篇：BFS与DFS