总结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 ...
随机推荐
- Structured-Streaming之窗口操作
Structured Streaming 之窗口事件时间聚合操作 Spark Streaming 中 Exactly Once 指的是: 每条数据从输入源传递到 Spark 应用程序 Exactly ...
- JDBC数据库增、删、改、查方法实现类
package daoMYSQL;import java.sql.Connection;import java.sql.DriverManager;import java.sql.PreparedSt ...
- 13.什么是javabean，以及使用原则
javabean简介 javabeans就是符合某种特定的规范的java类,使用javabeans的好处是解决代码的重复编写,减少代码 冗余,功能区分明确,提高了代码的维护性. javabean的设计 ...
- WCF学习——构建第二个WCF应用程序（六）
一.创建客户端应用程序 若要创建客户端应用程序,你将另外添加一个项目,添加对该项目的服务引用,配置数据源,并创建一个用户界面以显示服务中的数据.若要创建客户端应用程序,你将另外添加一个项目,添加对该项 ...
- 关于Ext 修复源代码 bug的方法
Ext修复源代码出现的问题 1.使用override属性,重写组件 定义一个新的组件,override属性设为要重写的源组件 例子: Extjs4.2.3遇到的一个bug,Datefield 选择不了 ...
- 安装WIA组件
下载地址: http://pan.baidu.com/s/1bnGU5Nx 安装方法: 将下载后的WIAAutSDK.zip解压,复制wiaaut.dll到C:\Windows\System32,注册 ...
- Java数据类型在实际开发中的应用二枚举类型
在实际编程中,往往存在着这样的"数据集",它们的数值在程序中是稳定的,而且"数据集"中的元素是有限的.在JDK1.5之前,人们用接口来描述这一种数据类型. 1. ...
- JavaWeb 后端 <六> 之 EL & JSTL 学习笔记
一.EL表达式(特别重要)
- js中嵌入jsp(html)代码的双引号转换问题--事件没反应
下面是一段今天遇到问题的代码,select中写了onchange事件 ,在没有加转义的情况下,F12解析的代码是错乱的,双引号与内容中写的不一致,还会有空格出现,经过一段时间的摸索,发现在出错的地方加 ...
- vue vuex的用法
1.引入 vue.js vuex.js 文件 2.创建Store文件 var sSatte=new Vuex.Store({ state:{}, mutations:{}, actions:{ ...