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> ...
随机推荐
- 求最大公约数和小于n的所有质数
//algorithm.h enum SWAP_TYPE{MEMORY, COMPLEX}; struct SIntArray { int *pData; int num; SIntArray():p ...
- PHPCMS V9教程之快速入门
这篇文章要为大家来介绍PHPCMS V9这个系统的一些基本知识,PHPCMS是基于面向对象的,严格的安装MVC开发模式开发的CMS系统,同时他还是一个非 常不错的PHP框架.下面我们一起看一下PHPC ...
- 转：SQL子句的执行顺序
SQL 不同于与其他编程语言的最明显特征是处理代码的顺序.在大数编程语言中,代码按编码顺序被处理,但是在SQL语言中,第一个被处理的子句是FROM子句,尽管SELECT语句第一个出现,但是几乎总是最后 ...
- Zebra_Form Packages: Zebra_Form Controls Generic XSS_Clean Classes: Zebra_Form_Control Class: Zebra_Form_Control
http://stefangabos.ro/wp-content/docs/Zebra_Form/Generic/Zebra_Form_Control.html#methodset_rule
- 【GoLang】50 个 Go 开发者常犯的错误
1. { 换行: Opening Brace Can't Be Placed on a Separate Line 2. 定义未使用的变量: Unused Variables 2. import ...
- sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback
sharepoint 2010 页面刷新时滚动条位置保持不变 Controlling scrollbar position on postback在sharepoint 2010中,如果当前页面的篇幅 ...
- centos6.5 iptables结合ipset批量屏蔽ip
安装ipset yum install ipset #创建ip地址集合 ipset create bansms hash:net 查找访问了“getVerificationCode”并且次数大于10次 ...
- iOS 真机文件系统区分大小写，而模拟器可能不区分
模拟器区不区分大小写要看mac os是不是区分大小写,而这个和你的文件系统有关,如下图 如果你使用了默认的格式,就区分不了大小写了! 看来以后还是应该使用第二种格式啊!
- ios UIButton shadowcolor 导致黑边问题
注意这个属性,会导致按钮文字有一定黑边,其实就是阴影效果,如果不是想要的效果,应该把它设置为clearcolor.这种情况在亮色背景下比较突出.
- 打包文件 MANIFEST.MF 功能详解
最近研究了如何在java工程打包,期间遇到的一些问题进行总结,如打包成test.jar 文件 Manifest-Version: 1.0 Main-Class: windows.VideoWindow ...