总结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>
    <!--<img src="images/33333333_03.png" >-->
    <!--<img class="hong" src="images/enhe.png" >-->
</td>

Css部分：.main .lt .biao .bto table tr .tu4 i{
    display: block;
    background: url("../images/icons-01.gif")no-repeat  -9px -79px;
    width: 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;
    width: 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{
            width: 640px;
            height: 320px;
            
            margin: 50px auto;
            border: 3px solid pink;
            overflow: hidden;
        }
        .box ul{
            width: 1000px;
            background-color: #00030C;
        }

.box ul li{
            width: 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{
            width: 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{
            width: 600px;
            height: 300px;
            position: relative;
            border: 2px solid black;
            overflow: hidden;
            margin: 100px auto;
        }
        li{
            list-style: none;
        }
        .box ul{
            width: 4000px;
            position: absolute;
            left: 0;
            top: 0;
        }
        .box ul li{
            width: 600px;
            height: 300px;
            font: 900 68px/300px "simsun";
            text-align: center;
            
            float: left;
        }
        .box ol{
            position: absolute;
            width: 140px;
            height: 20px;
            background-color: #00c6ff;
            left: 50%;
            margin-left: -70px;
            bottom: 10px;
            border-radius: 10px;
        }
        .box ol li{
            width: 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{
            width: 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>

时间： 2024-10-13 03:13:51

总结jq的一些特效的相关文章

jq图片切换特效

首先引入js,内容如下: 1 (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option);return this.each(function(){$('.'+option.container,$(this)).children().wrapAll('<div class="slides_control"/>');var elem=$(this),control

JQ One()函数特效

先看一个例子,当点击 p 元素时,增加该元素的文本大小,代码如下:<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script><p id="keleyione" style="border:solid 1px silver">柯乐义 http

想成为前端工程师？希望读完这篇文章能对你有所帮助。

作为一名前端攻城狮(前端工程师),javascript是必修且必精的一门语言,但是有多少前端做到了呢?过去的一段时间我已经无数次看到听到人事们在迫切的渴望前端人事的加入.但是却无法找到合适的人员加入.这到底是为什么? 其实前端岗位缺口的确很大,不过很多前端人员并不清晰自己的定位.这使得自己认为自己是前端工程师,实际上并不是.所以首先要给大家一个定位. 网页重构师:掌握html,css,js(jq)网页布局特效. 前端工程师:在网页重构技能基础上掌握javascript开发,以及javascrip

JS 知识点收集

setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式.setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭.setInterval() 的返回值返回一个可以传递给 Window.clearInterval()的参数, 从而取消对 code 的周期性执行的值.   <html> <body> <input type="text" id="cl

简单返回顶部代码

动态按需加载返回顶部,css侧边屏幕绝对定位,结合简单jQuery动画实现更好体验 /*默认样式,主要是position:fixed实现屏幕绝对定位,ie6不支持position:fixed效果*/ #gotoTop{/*返回顶部按钮的位置与样式*/ display:none; position:fixed; text-align:center;/*实现按钮内部字体的水平居中 */ top:75%;/*定位向上的位置*/ left:50%;/* 相对于水平向右移50% */ cursor:poi

JQ特效开发系列——鼠标移入时div高度和颜色发生变化 animate

需要展示的jQuery效果: 同一级别下有5个div,当鼠标移上任意一个div的时候,该div背景颜色和高度都发生变化,移出时背景颜色和高度都恢复为原来设置的样式,高度的变化过程是渐变,背景颜色的变化在高度变化之后进行. 基本结构样式代码: <style> * { margin: 0; padding: 0; } html,body { height: 100%; } .main div{ width: 800px; height: 80px; margin-bottom: 10px; bac

上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script> <style typ

基于jQ+CSS3页面滚动内容元素动画特效

今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Opera.傲游.搜狗.世界之窗. 不支持IE8及以下浏览器. 在线预览   源码下载 实现的代码. html代码: <div class="htmleaf-container"> <div class="container"> <h2 class

css输入框文字点击消失输入文字颜色变深JQ特效

css输入框文字点击消失输入文字颜色变深JQ特效,输入框原始有默认说明文字内容,鼠标点击输入框后文字消失,鼠标离开默认文字又显示,如果输入框输入新文字内容,新输入文字颜色变深变化. CSS输入框文字点击消失输入文字颜色变深效果截图 输入框原始文字与输入文字颜色变化说明:上海治疗阳痿哪家好默认输入框文字颜色比较浅,鼠标点击输入框内原始文字消失,鼠标离开原始文字又显示,如果新输入文字,此时新输入文字颜色有变化(根据需要可以设置). 使用说明上海最好的性病医院:输入框默认的文字与input.js里代码