简短几句jquery代码的实现一个图片向上滚动切换


Posted in Javascript onSeptember 02, 2011

animate()参数介绍:
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
PS:但是如果你引用了最新jquery ui框架的话backgroudColor,color之类的属性也可以实现渐变了。
PS:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
首先依然要引用jquery框架,你懂得。
再来看看代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
</head> 
<body> 
<div style="border:5px #666 solid; width:500px; height:350px; overflow:hidden;"> 
<div id="box"> 
<div style="width:500px; height:350px; background-color:#0F0;">One</div> 
<div style="width:500px; height:350px; background-color:#00F;">Two</div> 
<div style="width:500px; height:350px; background-color:#696;">Three</div> 
</div> 
</div> 
<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
var Top=-350;//定义一个向上移动的距离,这个数值和你图片或DIV的高度相等 
var Time=500;//定义一个速度 
function move(){ 
$("#box").animate({"margin-top":Top},Time);//animate方法,只能对数值型的值进行渐变 
Top+=-350;//运行一次增加一个图片的高度 
if(Top==-1050)//判断当总高度大于你DIV或者图片总高度 
{ 
Top=0;//把距离设置回0 
Time=400;//加快移动速度 
} 
else 
{ 
Time=500;//否则减慢速度 
} 
} 
setInterval(move,3000);//3秒执行一次move() 
}) 
</script> 
</body> 
</html>

js部分也可以这样,实现一个回滚效果:
$(document).ready(function(){ 
var Top=-350; 
var Time=500; 
var more=-50; 
function move(){ 
$("#box").animate({"margin-top":Top+more},Time); 
$("#box").animate({"margin-top":Top},300); 
Top+=-350; 
if(Top==-1050) 
{ 
Top=0; 
more=50; 
Time=400; 
} 
else 
{ 
Time=500; 
more=-50; 
} 
} 
setInterval(move,3000); 
})
Javascript 相关文章推荐
创建公共调用 jQuery Ajax 带返回值
Aug 01 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
Javascript进制转换实例分析
May 14 Javascript
JS实现下拉菜单赋值到文本框的方法
Aug 18 Javascript
js实现索引图片切换效果
Nov 21 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
Angular表格神器ui-grid应用详解
Sep 29 Javascript
vue 路由页面之间实现用手指进行滑动的方法
Feb 23 Javascript
vue之将echart封装为组件
Jun 02 Javascript
解决vue移动端适配问题
Dec 12 Javascript
微信小程序实现日历效果
Dec 28 Javascript
25个非常棒的jQuery滑块插件和教程小结
Sep 02 #Javascript
基于jQuery+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 #Javascript
基于jquery的loading 加载提示效果实现代码
Sep 01 #Javascript
jQuery1.6 类型判断实现代码
Sep 01 #Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
Sep 01 #Javascript
用javascript作一个通用向导说明
Aug 30 #Javascript
JS 无限级 Select效果实现代码(json格式)
Aug 30 #Javascript
You might like
JAVA/JSP学习系列之七
2006/10/09 PHP
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
JS中encodeURIComponent函数用php解码的代码
2012/03/01 PHP
Windows中使用计划任务自动执行PHP程序实例
2014/05/09 PHP
PHP采集类snoopy详细介绍(snoopy使用教程)
2014/06/19 PHP
PHP计算一年多少个星期和每周的开始和结束日期
2014/07/01 PHP
PHP实现模拟http请求的方法分析
2017/12/20 PHP
php框架CodeIgniter主从数据库配置方法分析
2018/05/25 PHP
PhpStorm的使用教程(本地运行PHP+远程开发+快捷键)
2020/03/26 PHP
javascript定时保存表单数据的代码
2011/03/17 Javascript
js特殊字符转义介绍
2013/11/05 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
浅谈JavaScript正则表达式-非捕获性分组
2017/03/08 Javascript
jQuery插件HighCharts绘制2D圆环图效果示例【附demo源码下载】
2017/03/09 Javascript
详解JS数据类型的值拷贝函数(深拷贝)
2017/07/13 Javascript
微信小程序按钮点击跳转页面详解
2019/05/06 Javascript
layer 刷新某个页面的实现方法
2019/09/05 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
json.stringify()与json.parse()的区别以及用处
2021/01/25 Javascript
Scrapy基于selenium结合爬取淘宝的实例讲解
2018/06/13 Python
Python类装饰器实现方法详解
2018/12/21 Python
python字典的常用方法总结
2019/07/31 Python
Python字符串中删除特定字符的方法
2020/01/15 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
Python 图片处理库exifread详解
2021/02/25 Python
高中毕业生自我鉴定例文
2013/12/29 职场文书
《小小雨点》教学反思
2014/02/18 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
医院合作协议书
2014/08/19 职场文书
四风查摆剖析材料
2014/10/10 职场文书
班主任班级管理心得体会
2016/01/07 职场文书
小学生节约用水倡议书
2019/08/12 职场文书
导游词之广东佛山(南风古灶)
2019/09/24 职场文书
django注册用邮箱发送验证码的实现
2021/04/18 Python
据Python爬虫不靠谱预测可知今年双十一销售额将超过6000亿元
2021/11/11 Python
Python之matplotlib绘制折线图
2022/04/13 Python