js特效
1.轮播换图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{width:170px;height: 130px;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function () {
var i=0;
var tt;
$("img").hover(function () {
clearInterval(tt);
},tab); // 注意这里没有()!
function tab(){
tt=setInterval(function(){
i++;
$("img").attr("src","img/pic"+i+".png");
if(i>2){
i=0;
}
},1000);
}
tab();
});
</script>
</head>
<body>
<img src="img/pic1.png"/>
</body>
</html>
2.滑动轮播换图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div,img, body, ul, li {margin: 0;padding: 0;}
li {list-style: none;float: left;}
.a, li, img {width: 170px;height: 130px;}
.a{overflow: hidden;}
ul{width:510px;} </style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function () {
function test(){
var i=0;
var width=parseInt($("img").width());
setInterval(function () {
i++;
if(i>2){
i=0;
}
$("ul").animate({marginLeft:'-'+(width*i)+'px'},1000);
},3000);
}
test();
});
</script>
</head>
<body>
<div class="a">
<ul>
<li><img src="img/pic1.png"/></li>
<li><img src="img/pic2.png"/></li>
<li><img src="img/pic3.png"/></li>
</ul>
</div>
</body>
</html>
3.左右方向滑动轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, img, body, ul, li {margin: 0;padding: 0;}
li {list-style: none;float: left;}
.wrap, li, img {width: 170px;height: 130px;}
.wrap {overflow: hidden;height: 130px;margin: 50px;}
ul {width: 510px;height: 130px;border:1px solid green;} .whole{border:1px solid red; width:270px;height: 190px; position: relative;}
.bt1{position: absolute;top:100px;left: 10px;} /* 按钮相对定位*/
.bt2{position: absolute;top:100px;left: 230px;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function () {
var tt;
var i = 0;
var width = parseInt($("img").width());
function test() {
tt=setInterval(function () {
doMove(1); // 定时器调函数，定时传个1 // 默认在定时器完成移动 animate() 由于需要传参，多写了一个函数 doMove()
}, 3500);
}
test();
function doMove(num){
//i++;
i=i+num; //
if (i > 2) {
i = 0;
}
if(i<0){
//i=0; //等于0 就不能再向左滑动了
i=2;
}
$("ul").stop().animate({'marginLeft': '-' + (width * i)+'px'}, 2000); }
$(".whole").hover(function () { // 整一块hover()
clearInterval(tt);
},test);
$(".bt1").click(function () {
doMove(-1);
console.log("i: "+i);
});
$(".bt2").click(function () {
doMove(1);
console.log("i: "+i);
}); });
</script>
</head>
<body>
<div class="whole">
<div class="wrap">
<ul>
<li><img src="img/pic1.png"/></li>
<li><img src="img/pic2.png"/></li>
<li><img src="img/pic3.png"/></li>
</ul> </div>
<button class="bt1"><<</button>
<button class="bt2">>></button>
</div>
</body>
</html>
4.jq拖拽
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.drag{
position:absolute;
background:red;
top:100px;left:200px;
padding:0;
width:100px;height: 100px;
}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
var move = false;//移动标记
var _x, _y;//鼠标离控件左上角的相对位置
$(".drag").mousedown(function (e) {
move = true;
_x = e.pageX - parseInt($(".drag").css("left"));
_y = e.pageY - parseInt($(".drag").css("top"));
});
$(".drag").mousemove(function (e) {
if (move) {
var x = e.pageX - _x;//控件左上角到屏幕左上角的相对位置
var y = e.pageY - _y;
$(".drag").css({"top": y, "left": x}); // 被拖拽的div采用绝对定位
}
});
$(".drag").mouseup(function () {
move = false;
});
$(".a").mousemove(function (e) {
console.log("mx: "+ e.pageX+": "+ e.pageY);
})
});
</script>
</head>
<body>
<input type="button" id="btn" value="btn"/>
<div class="drag"></div>
<div class="a" style="width:200px; height: 200px; border:1px solid green;"></div>
</body>
</html>
5.jq划线
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.a{border:1px solid red;width:0px; display: none;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function () {
$("#btn").click(function () {
$(".a").show();
$(".a").animate({width:'+100px'},1000);
});
});
</script>
</head>
<body>
<input type="button" id="btn" value="btn"/>
<div class="a"></div>
</body>
</html>
6.鼠标变成ico图标
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style>
.a{cursor:url("a.ico"),auto;}
</style>
<script>
$(function () {
$("button").click(function () {
$("body").addClass("b");
});
});
</script>
</head>
<body style="height: 500px;">
<button>btn</button>
</body>
</html>
7.轮播图加链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{width:170px;height: 130px;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function () {
var i=0;
var tt;
var arrUrl=['http://www.baidu.com','http://www.qq.com','http://www.126.com'];
var imgPlay=$(".imgPlay");
var img=$(".imgPlay").find("img");
var url=$(".imgPlay").find("a");
$("img").hover(function () {
clearInterval(tt);
},tab); // 注意这里没有()!
function tab(){
tt=setInterval(function(){
i++;
img.attr("src","img/pic"+i+".jpg");
var index=i-1;
url.attr("href",arrUrl[index]);
if(i>2){
i=0;
}
},1500);
}
tab();
});
</script>
</head>
<body>
<div class="imgPlay">
<a href="http://www.baidu.com">
<img src="img/pic1.jpg"/>
</a>
</div>
</body>
</html>
8.轮播图完善版
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div, img, body, ul, li {margin: 0;padding: 0;}
li {list-style: none;}
.carousel{border:1px solid red; width:270px;height: 190px; position: relative; }
.carousel .wrap {overflow: hidden;margin-left: 50px;margin-top: 50px;height: 130px;width:170px;}
.carousel .wrap ul {width: 510px;height: 130px;border:1px solid green; margin-left:0;}
.carousel .wrap ul li {width: 170px;height: 130px;float:left; }
.carousel .wrap ul li img {width: 170px;height: 130px;}
.carousel .bt1{position: absolute;top:100px;left: 10px;} /* 按钮相对定位*/
.carousel .bt2{position: absolute;top:100px;left: 230px;}
.carousel .num{position: absolute;top:140px;left:100px;}
.carousel .num li{float:left;font-size: 16px;margin-right: 5px;width:20px; text-align:center; cursor:pointer;}
.carousel .num .active{color:red;}
</style>
<script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(function () {
var i = 0;
var width = parseInt($(".wrap li").width());
var num=$(".wrap li").length;
$(".wrap ul").width(num*width+"px"); function doMove(){
$(".wrap ul").stop().animate({'marginLeft':'-'+ (width * i)+'px'}, 500);
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
} $(".bt1").click(function () {
i--;
if(i<0){
i=3;
}
console.log("i: "+i);
doMove();
});
$(".bt2").click(function () {
i++;
if(i>3){
i=0;
}
console.log("ii: "+i);
doMove();
});
$(".num li ").click(function () {
i = $(this).index();
console.log("i: "+i);
doMove();
});
});
</script>
</head>
<body>
<p> 点击 1 2 3 4 无法跳转到对应的图片</p>
<div class="carousel">
<div class="wrap">
<ul>
<li><img src="pic1.png"/></li>
<li><img src="pic2.png"/></li>
<li><img src="pic3.png"/></li>
<li><img src="pic4.png"/></li>
</ul>
</div>
<button class="bt1"><<</button>
<button class="bt2">>></button>
<ul class="num">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div> </body>
</html>
js特效的更多相关文章
- 滚动变色的文字js特效
Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...
- 150个JS特效脚本
收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...
- <一>初探js特效魅力之全选不选反选04
初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...
- <一>初探js特效魅力之选项卡05
初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...
- 带左右箭头切换的自动滚动图片JS特效
效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
- 鼠标经过显示二级菜单的js特效
本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- 又到圣诞节，让你的网页下起雪(js特效)
又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...
- 很不错的js特效
这里有好多的js特效:http://www.jsfoot.com/jquery/images/qh/ jquery图片特效 jquery幻灯片 .... 有什么js需要可以到这里来下载:http:// ...
- 个人网站html5雪花飘落代码JS特效下载
如何给自己的网站/页面添加雪花代码.特效呢?有的网站配合自己的主题模板添加雪花飘落效果挺好看的.特别是与冬天季节相关的主题,很多的博客空间都加了雪花的效果.在网上搜索了几种雪花效果,做了简单的修改,在 ...
- js特效 15个小demo
js特效和15个小demo 代码如下:images文件夹未上传 1.图片切换: <!DOCTYPE html> <html> <head> <title> ...
随机推荐
- sublime配置markdown
1.安装sublime 2.安装package control 3.ctrl+shift+P输入install进入Install Packages 4.安装markdown preview 5.配置删 ...
- C#系统委托之Action And Func
Action Action<T> Func Func<T> Action:封装一个方法,该方法不具有参数并且不返回值 public delegate void Action() ...
- 《C++ Primer》 ---- 关于变量 与 基本类型
类型是所有程序的基础; C++ 定义了几种基本类型: 字符型(char 和 wchar_t),整型(short int long bool),浮点型(float doubel) 并且提供自定义数 ...
- gtk+2.24.0-glib-2.28.1-staticLib-mingw32-x86-2016-08-10.7z
GTK_PATH=D:/MSYS/opt/gtk+2.24.0-staticLib b1-static.sh --------------------------------------------- ...
- linux 解压缩
tar f 使用档案名字,这个参数是最后一个参数,后面只能接档案名 c 建立压缩档案 x 解压 t 查看内容 r 向压缩归档文件末尾追加文件 u 更新原压缩包中的文件 z 有gzip属性的 j 有bz ...
- spfa(模板)
spfa作为图论中的常用算法,深受各类出题人和各位OIer的喜爱: so,为了给大众创造福利,宝宝在此奉上spfa大发的思路和模板:以感谢社会, 感谢CCF,感谢CCTV, 感谢我的老师,感谢同学们, ...
- 自定义View和ViewGroup
为了扫除学习中的盲点,尽可能多的覆盖Android知识的边边角角,决定对自定义View做一个稍微全面一点的使用方法总结,在内容上面并没有什么独特的地方,其他大神们的博客上面基本上都有讲这方面的内容,如 ...
- 【leetcode】Evaluate Reverse Polish Notation（middle）
Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, -, ...
- HDU 4946 Area of Mushroom (几何凸包)
题目链接 题意:给定n个人,每个人有一个速度v方向任意.如果平面中存在一个点只有某个人到达的时间最短(即没有人比这个人到的时间更短或相同),那么我们定义这个店归这个人管辖,现在问这些人中哪些人的管辖范 ...
- ajax鼠标滚动请求 或 手机往下拉请求
Zepto(function($){ var url = $('.page-url').val(); var cur = false; var href_url = $('.page-url').at ...