jquery常见特效总结

1.轮播图：

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("../p_w_picpaths/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("../p_w_picpaths/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.一些特有属性：

$("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>

</div>

</div>

</div>

</body>

$(".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.图片特效：

<ul>

</ul>

</div>

</body>

$(".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>

7.图片的动态效果：

<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>

<ul>

</ul>

</div>

</body>

$(".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>

没有注释部分：

加上注释部分：

8.上下拉菜单：

<style>

.box-wrap{

width: 300px;

}

</style>

</head>

<body>

<h1>我是一级菜单</h1>

</div>

<p>我是二级菜单</p>

</div>

<h1>我是一级菜单</h1>

</div>

<p>我是二级菜单</p>

</div>

<h1>我是一级菜单</h1>

</div>

<p>我是二级菜单</p>

</div>

</body>

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

$(this).find(".box-bottom").slideToggle();

$(this).siblings().find(".box-bottom").slideUp();

})

</script>

效果图：

9.轮播图的第二方式：

<!DOCTYPE html>

<head>

<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>

<ul>

</ul>

<ol>

</ol>

</div>

</div>

</body>

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>

转载于:https://blog.51cto.com/13212302/1955939

jquery常见特效总结相关推荐

常见特效的jquery实现
[javascript] view plain copy $("#select1").change(function() {//侦测一级菜单的change事件 varid = $ ...
全面详细的jQuery常见开发技巧手册
本文为大家整理一篇很详尽的jQuery常见开发技巧文章,供大家参考,具体内容如下 1.关于页面元素的引用通过jquery的$()引用元素包括通过id.class.元素名以及元素的层级关系及dom或者 ...
jquery常见的选择器
jquery常见的选择器具体参考官方API:http://jquery.cuishifeng.cn/ 1. 基本选择器 1.通配符选择器 * 用于选择所有元素2.元素选择器选择文档的元素如htm ...
css3轮播不用jpuery_15款效果很酷的最新jQuery/CSS3特效
很久没来博客园发表文章了,今天就分享15款效果很酷的最新jQuery/CSS3特效,废话不说,一起来看看吧. 1.3D图片上下翻牌切换一款基于jQuery+CSS3实现的3D图片上下翻牌切换效果,支 ...
精心挑选的23款美轮美奂的 jQuery 图片特效插件
jQuery是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择.其中,jQuery 最令人印象深刻的应用之一就是对图片的处理,它可以让帮助你在你的项目中加入各种 ...
精心挑选的15款优秀 jQuery 文本特效插件和教程
今天这篇文章向大家分享15款精心挑选的优秀 jQuery 文本特效插件,都带有详细的使用教程.jQuery 是最流行和使用最广泛的 JavaScript 框架,它简化了 HTML 文档遍历,事件处理, ...
WebAPI第五天学习总结—— 移动端常见特效（轮播图）
移动端常见特效案例: 移动轮播图需求:移动端轮播图功能和基本PC端一致可以自动播放图片手指可以拖动播放轮播图案例分析: 自动播放功能开启定时器移动端移动,可以使用translate 移动 ...
七、jQuery动画特效（二）
jQuery动画特效(二) 一.自定义动画 1.简单动画 2.累加或累减动画 3.多重动画 4.动画队列 5.动画回调函数二.停止动画 1.停止元素的动画 2.判断元素是否处于动画状态 3.延迟动画
北大青鸟 JQuery制作特效第二章（上机练习
北大青鸟 JQuery制作特效第二章 (上机练习练习一丶制作简易的当当购物车页面 <!DOCTYPE html> <html> <head lang="en ...

jquery常见特效总结

jquery常见特效总结相关推荐

最新文章

热门文章