简短几句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 相关文章推荐
JavaScript包装对象使用介绍
Aug 29 Javascript
JS JSON对象转为字符串的简单实现方法
Nov 18 Javascript
用Jquery实现滚动新闻
Feb 12 Javascript
jQuery模拟点击A标记示例参考
Apr 17 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
详解如何配置vue-cli3.0的vue.config.js
Aug 23 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
引入外部js脚本加载慢与页面白屏问题的解决
Dec 10 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
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
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
Laravel框架用户登陆身份验证实现方法详解
2017/09/14 PHP
js里的prototype使用示例
2010/11/19 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
JQuery.get提交页面不跳转的解决方法
2015/01/13 Javascript
javascript实现网页子页面遍历回调的方法(涉及 window.frames、递归函数、函数上下文)
2015/07/27 Javascript
javascript中加var和不加var的区别 你真的懂吗
2016/01/06 Javascript
实例详解AngularJS实现无限级联动菜单
2016/01/15 Javascript
JavaScipt选取文档元素的方法(推荐)
2016/08/05 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
基于JS实现翻书效果的页面切换样式
2017/02/16 Javascript
vue.js实现价格格式化的方法
2017/05/23 Javascript
浅谈在Vue-cli里基于axios封装复用请求
2017/11/06 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
JavaScript 日期时间选择器一些小结
2018/04/02 Javascript
在Vue 中使用Typescript的示例代码
2018/09/10 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
2018/09/29 Javascript
微信小程序后端(java)开发流程的详细步骤
2019/11/13 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
[05:09]第二届DOTA2亚洲邀请赛决赛日比赛集锦:iG 3:0 OG夺冠
2017/04/05 DOTA
[02:33]2018 DOTA2亚洲邀请赛回顾视频 再次拾起那些美妙的时刻
2018/04/10 DOTA
在Python中使用NLTK库实现对词干的提取的教程
2015/04/08 Python
Python检测字符串中是否包含某字符集合中的字符
2015/05/21 Python
Python实现将DOC文档转换为PDF的方法
2015/07/25 Python
详解Python迭代和迭代器
2016/03/28 Python
Flask框架信号用法实例分析
2018/07/24 Python
python global关键字的用法详解
2019/09/05 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
zooplus德国:便宜地订购动物用品、动物饲料、动物食品
2020/05/06 全球购物
Hashtable 添加内容的方式有哪几种,有什么区别?
2012/04/08 面试题
计算机网络专业个人的自我评价
2013/10/17 职场文书
3.12植树节活动总结2014
2014/03/13 职场文书
教师求职信
2014/06/17 职场文书
千与千寻观后感
2015/06/04 职场文书
2016年敬老月活动总结
2016/04/05 职场文书