总结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 ...
随机推荐
- 带你重拾JavaScript(2)之console的你所不知道的功能
JavaScript最常用的调试工具就是console.info()了.console是浏览器中window对象的属性之一,由浏览器对象模型(BOM)提供,作用是访问浏览器控制台,你可以通过conso ...
- 【LeetCode】98. Validate Binary Search Tree
题目: Given a binary tree, determine if it is a valid binary search tree (BST). Assume a BST is define ...
- 【Android Developers Training】 9. 覆盖于布局之上的Action Bar
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【Android Developers Training】 67. 响应触摸事件
注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...
- 【MUI】百度地图定位功能
博主最近进行一款APP开发,需要用到定位功能,经过一番折腾,终于搞定,不废话,代码如下 mui.plusReady(function() { var longitude, latitude; //va ...
- 分页插件Jpages的使用
项目原因需要前端做分页表格,之前做了一个ul的分页效果,但是感觉自己写还是造轮子了,今天网上看到Jpqges插件就试了下,感觉平时使用挺方便的,写一下自己的使用过程. 先上套图,下载下来就2个js和1 ...
- ASP.NET 导出EXCEL文件处理多对应排列的
这次项目遇到了一个导出excel需要对应排列的问题.本来在做这个项目之前都基本没做过excel导出的菜鸡,这次强行做还是有些忐忑的,加上那个表的结构比较奇特. 废话不多说,先介绍表结构吧 是数据 ...
- js加强版图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- ES6的转换器
---恢复内容开始--- ES6代码转为ES5代码的转换器 1.Babel 2.Traceur,Google公司出品 Babel是一个广泛使用的ES6转码器,可以将ES6代码转为ES5代码,从而在现有 ...
- echarts的部署和使用
echarts是百度开发的一款商业级.开源免费的前端图表组件,具体可访问其主页:http://echarts.baidu.com/ echarts目前已经发布了2.0版本,使用起来非常的方便,并且效果 ...