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> ...
随机推荐
- JavaScript基础介绍
JavaScript组成 •ECMAScript:解释器.翻译 •DOM:Document Object Model •BOM:Browser Object Model –各组成部分的兼容性,兼容性问 ...
- apache2错误日志在哪，可以看到php错误
在以下路径中 /var/log/apache2/error.log
- jQuery清除文本框，内容并设置不可用
JQuery清除文本框,内容并设置不可用 如果是设置只读,则将disabled换成readonly function CleanText(textid) { $("#"+text ...
- ansible操作远程服务器报Error: ansible requires the stdlib json or simplejson module, neither was found!
通过ansible执行远程命令时报如下异常: Error: ansible requires the stdlib json or simplejson module, neither was fou ...
- NGUI 滑动页(UIToggle和UIToggledObjects)
1.NGUI->Create->Scroll View 2.给Scroll View添加一个 UIGrid,自己设置Arragement(横向竖向) 3.给Grid添加元素 4.给元素添加 ...
- find参数exec、管道符|、xargs的区别
1.这三个命令都可以将前面的输出做为后面的输入. 2.他们对于前面的输出,处理方式不同. find . -name "*.sh" -exec cat {} \; find . -n ...
- Oracle备份之RMAN
1.备份:物理备份时文件层次的备份,逻辑备份时数据层次的备份,物理备份为主,逻辑备份作为补充.物理备份分为用户管理备份和RMAN备份,前者使用SQL命令和OS的cp命令进行文件备份,后者使用RMAN工 ...
- C# 反射+抽象工厂模式
此模式可以很好的更换程序使用不同的数据库 1.用到的属性类 using System; using System.Collections.Generic; using System.Linq; usi ...
- 【python】dict4ini和xmltodict模块用途
dict4ini模块:可以读写配置文件 xmltodict模块:将xml和json互相转换 https://pypi.python.org/pypi/xmltodict
- poj 3734 Blocks 快速幂+费马小定理+组合数学
题目链接 题意:有一排砖,可以染红蓝绿黄四种不同的颜色,要求红和绿两种颜色砖的个数都是偶数,问一共有多少种方案,结果对10007取余. 题解:刚看这道题第一感觉是组合数学,正向推了一会还没等推出来队友 ...