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> ...
随机推荐
- centos7 & mysql
首先centos7很坑爹. 其次,在centos7上安装mysql更坑爹. 特此记录一次坑爹历程后的唯一出路. 安装mysql wget http://repo.mysql.com/mysql-com ...
- MyEclipse 15 集成SVN
一.在线更新 地址:http://subclipse.tigris.org/update_1.8.x 二.手动安装
- list<T>与ObservableCollection<T>
list<T>与ObservableCollection<T>的用法基本上是一样的.区别: list<T>: 当T继承于INotifyPropertyChanged ...
- 【leetcode】Reverse Nodes in k-Group
Reverse Nodes in k-Group Given a linked list, reverse the nodes of a linked list k at a time and ret ...
- php在没用xdebug等调试工具的情况下如何让调试内容优雅地展现出来？--php数组格式化
不知道各位猿猿们有没有碰到过类似的情况.装的PHP环境没有xdebug,而又经常用到数组.调试的时候也需要经常查看数组的结构和字段内容,用var_dump打印出来的数组内容总是杂乱无章.实在无法忍受, ...
- vs版本转换工具
[转]C#写的工程项目移植转换工具 – 支持VS2005/VS2010/VS2012/VS2013 经常用Visual Studio开发项目的是不是会经常遇到下面这种情况或者类似于这样的情况?用新 ...
- Divide and conquer:Showstopper(POJ 3484)
Showstopper 题目大意:数据挖掘是一项很困难的事情,现在要你在一大堆数据中找出某个数重复奇数次的数(有且仅有一个),而且要你找出重复的次数. 其实我一开始是没读懂题意的...主要是我理解错o ...
- oracle触发器，一个表新增、修改的同时同步另一张表
oracle创建触发器,把本地新增.修改数据过程同步到另一个服务器上去. 如果是本地,加数据库名即可.如果是远程服务器,不是一台机器,做一个db_link操作即可. ----------------- ...
- 【processing】小代码4
translate(x,y); 移动坐标原点到x,y处 rotate(angle); 坐标沿原点顺时针转动angle度 scale(n); 绘制图像放大n倍 pushMatrix() 将当前坐标压入 ...
- js 如何在浏览器中获取当前位置的经纬度
这个有一定的误差哈,具体的误差是多少,有兴趣的朋友可以去测试下 直接上代码 index.html页面代码: <html> <head lang="en"> ...