首页 > 代码库 > 总结jq的一些特效
总结jq的一些特效
Jquery代码总结
1.轮播图：
<script src=http://www.mamicode.com/"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="http://www.mamicode.com/images/33333333_03.png" >-->
<!--<img class="hong" src="http://www.mamicode.com/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=http://www.mamicode.com/"imge/1.jpg" alt="">
</div>
<div class="box">
<img src=http://www.mamicode.com/"imge/2.jpg" alt="">
</div>
<div class="box">
<img src=http://www.mamicode.com/"imge/3.jpg" alt="">
</div>
<div class="box">
<img src=http://www.mamicode.com/"imge/4.jpg" alt="">
</div>
</div>
<div class="box1"></div>
</body>
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/$(this).find("img").attr("src");
$(".box1").show().css({backgroundImage:"url("+src+")"})
},function(){
$(".box1").hide();
)
</script>
6.图片特效：
<div class="box">
<ul>
<li><img src=http://www.mamicode.com/"imge/xiao1.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"imge/xiao2.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"imge/xiao3.jpg" alt=""></li>
<li><img src=http://www.mamicode.com/"imge/xiao4.jpg" alt=""></li>
</ul>
</div>
<div class="box1"></div>
</body>
<script src=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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=http://www.mamicode.com/"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>
总结jq的一些特效