总结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="data:images/33333333_03.png" alt="">-->
<!--<img class="hong" src="data:images/enhe.png" alt="">-->
</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>
总结jq的一些特效的更多相关文章
- jq图片切换特效
首先引入js,内容如下: (function($){$.fn.slides=function(option){option=$.extend({},$.fn.slides.option,option) ...
- 【h5+c3】web前端实战项目、快装webapp手机案例源码
快装WebApp项目(Web移动端开发案例)webapp移动端项目源码.html5+css3实战案例分享.微信端H5实例开发 简介快装WebApp是一个面向移动端的快速装修app,此项目为手机端:使用 ...
- 动画特效的原生、jQ和CSS3方法
最近一直在看运动的JS特效,主要看的是原生写法,太麻烦了,最终看到写了个运动的方法,后面可以直接引用,然后发现这个方法和jQ其实差不多了,代码分别如下: 基本的HMTL和CSS <!DOCTYP ...
- jQ小图标上下滑动特效
嗯,又到了,夜静饥寒的时候,手指颤抖,回望去,屋内满是寂静,寥寥绰影,咳咳咳,想我程序员之路还没到终点...就...咳咳咳 好了日常神经结束,还要涂我的唇膏.还剩下,最后一章,js动画(四),明天放上 ...
- JQ滚动特效
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- 手风琴图片和钢琴导航栏JQ滑动特效
手风琴JQ滑动特效 1.效果预览: 2.相关代码: <!DOCTYPE html> <html lang="en"> <head> <me ...
- 基于jQ+CSS3页面滚动内容元素动画特效
今天给大家分享一款基于jQ+CSS3页面滚动内容元素动画特效.这是一款基于jQuery+CSS3实现的页面滚动代码.该实例适用于适用浏览器:360.FireFox.Chrome.Safari.Oper ...
- 上一个树形菜单的改进，增添了数据绑定功能而非仅仅的jq特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- 网页JQ基础之jq-隐藏以及显示特效
简单的 隐藏以及显示的 JQ 的代码如下: <!DOCTYPE html> <html> <head> <script src="/jquery/j ...
随机推荐
- JAVA基础——面向对象三大特性：封装、继承、多态
JAVA面向对象三大特性详解 一.封装 1.概念: 将类的某些信息隐藏在类内部,不允许外部程序直接访问,而是通过该类提供的方法来实现对隐藏信息的操作和访问. 2.好处: 只能通过规定的方法访问数据. ...
- kindeditor使用入门-张国红
kindeditor是在线编辑器,比较好用,以下是使用这个插件的步骤. 下载kindeditor-4.1.10.zip 解压 asp,asp.net,php对于jsp开发没有用,可以删除 新建web工 ...
- HashMap源码深入研究
简介 HashMap是采用链表和位桶来来实现的,由于一个位桶存在元素太多会导致get效率低,因此在jdk1.8中采用的红黑树实现,当链表长度大于TREEIFY_THRESHOLD(值为8)时会转换为红 ...
- 如何在java中用Arraylist中实现冒泡排序的问题
众所周知,冒泡排序法在一般数组中就3步, if(a<b){ temp=a; a=b; b=temp; } 然而,在集合中就不是简单的交换一下了,因为交换之后,必须保证新的值被重新设置到集合中去. ...
- es6知识总结--3
es6知识总结--3 es6对咱们es3,es5的数据类型进行了升级下边说新APIs! js数据类型有Number.String .oject.Boolean.Null.Undefined六种数据类型 ...
- [POJ2104/HDU2665]Kth Number-主席树-可持久化线段树
Problem Kth Number Solution 裸的主席树,模板题.但是求k大的时候需要非常注意,很多容易写错的地方.卡了好久.写到最后还给我来个卡空间. 具体做法参见主席树论文<可持久 ...
- 有关conv_std_logic_vector和conv_integer
原文地址:关于conv_std_logic_vector 和 conv_integer 这两个函数的使用问题作者:xiphosura std_logic_arithThis is the librar ...
- CJOJ 1331 【HNOI2011】数学作业 / Luogu 3216 【HNOI2011】数学作业 / HYSBZ 2326 数学作业（递推，矩阵）
CJOJ 1331 [HNOI2011]数学作业 / Luogu 3216 [HNOI2011]数学作业 / HYSBZ 2326 数学作业(递推,矩阵) Description 小 C 数学成绩优异 ...
- JavaScript 之 HelloWorld编写
HelloWorld.html 代码如下: <html><body><script type="text/javascript">documen ...
- GitHub 入门教程
一.前言 编程进阶的道路是坎坷的,没有任何捷径.这个时期只能是积累.吸收.学习.坚持,做到量的积累,到质的飞跃 古语有云:'书山有路,勤为径'.'不积跬步,无以至千里' 编程是一个动手实践性的学科,多 ...