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> ...
随机推荐
- 获取shell脚本自身所在目录的Shell脚本分享
前几天写的七牛的参赛demo,用bash写了一个便捷安装的脚本,涉及到了路径相关的判断,从stackoverflow,加上自己的实践整理一下. 简单版 下面是一个最简单的实现,可以解决大多数问题,缺陷 ...
- 错误描述：请求“System.Data.SqlClient.SqlClientPermission, System.Data, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089”类型的权限已失败
错误描述:请求“System.Data.SqlClient.SqlClientPermission, System.Data, Version=2.0.0.0, Culture=neutral, Pu ...
- oracle/node-oracledb 数据库驱动 与 Meteor 驱动包！
oracle/node-oracledb: https://github.com/oracle/node-oracledb Oracle 官方维护. metstrike/meteor-oracle ...
- wxPython中文教程入门实例
这篇文章主要为大家分享下python编程中有关wxPython的中文教程,分享一些wxPython入门实例,有需要的朋友参考下 wxPython中文教程入门实例 wx.Window 是一个基类 ...
- spring + myBatis 常见错误：SQL语法错误
在程序运行时,有时候会出现如下错误: 这个错误通常是你的sqlmapper.xml中sql语句语法有错误.所以请仔细查看你sql语句是否正确,比如{#id}这样写就会报上述错误,其实应该#{id}这样 ...
- Tomcat服务器绑定域名的配置
前面写到过Linux下tomcat服务器的部署,实际上只要域名正常解析到了服务器,那么不用绑定域名也是可以正常访问的,比如默认情况下访问xxx.net:8080与www.xxx.net:8080都可以 ...
- 移动端设页面根目录HTML的字体大小
@media (max-width: 359px){ html { font-size: 62.5%; }}@media (min-width: 360px) and (max-width: 374p ...
- Effective C++ -----条款39：明智而审慎地使用private继承
Private继承意味is-implemented-in-terms of(根据某物实现出).它通常比复合(composition)的级别低.但是当derived class需要访问protected ...
- Valentine's Day Round 1001.Ferries Wheel（hdu 5174）解题报告
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5174 题目意思:给出 n 个人坐的缆车值,假设有 k 个缆车,缆车值 A[i] 需要满足:A[i−1] ...
- 自定义tld标签，页面使用
背景需求: 系统本身的session不能在页面使用 如下: controller: @RequestMapping(method=RequestMethod.GET) public String ge ...