简短几句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 相关文章推荐
IE与firefox下Dhtml的一些区别小结
Dec 02 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
浅析javascript中函数声明和函数表达式的区别
Feb 15 Javascript
JavaScript控制浏览器全屏及各种浏览器全屏模式的方法、属性和事件
Dec 20 Javascript
js密码强度实时检测代码
Mar 02 Javascript
JS动态给对象添加事件的简单方法
Jul 19 Javascript
js实现tab选项卡切换功能
Jan 13 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
基于JavaScript实现表格隔行换色
May 08 Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 Javascript
详解Vue的组件中data选项为什么必须是函数
Aug 17 Javascript
js闭包和垃圾回收机制示例详解
Mar 01 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
PHP 图片文件上传实现代码
2010/12/29 PHP
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
短信提示使用 特效
2007/01/19 Javascript
javascript正则表达式中参数g(全局)的作用
2010/11/11 Javascript
JS性能优化笔记搜索整理
2013/08/21 Javascript
form表单action提交的js部分与html部分
2014/01/07 Javascript
angularjs中的单元测试实例
2014/12/06 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
JQuery中attr属性和jQuery.data()学习笔记【必看】
2016/05/18 Javascript
Vue.js 表单校验插件
2016/08/14 Javascript
JavaScript实现审核流程状态的动态显示进度条
2017/03/15 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
微信小程序中post方法与get方法的封装
2017/09/26 Javascript
使用Bootrap和Vue实现仿百度搜索功能
2017/10/26 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
使用vue-router完成简单导航功能【推荐】
2018/06/28 Javascript
微信小程序select下拉框实现源码
2019/11/08 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python的时间模块datetime详解
2017/04/17 Python
Python三种遍历文件目录的方法实例代码
2018/01/19 Python
Python对数据进行插值和下采样的方法
2018/07/03 Python
django之使用celery-把耗时程序放到celery里面执行的方法
2019/07/12 Python
python 写一个文件分发小程序
2020/12/05 Python
西班牙电子产品购物网站:Electronicamente
2018/07/26 全球购物
2014年五一劳动节社区活动总结
2014/04/14 职场文书
幼儿园六一活动总结
2014/08/27 职场文书
保密工作承诺书
2014/08/29 职场文书
党的群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
2014年管理人员工作总结
2014/12/01 职场文书
2014年绩效考核工作总结
2014/12/11 职场文书
2015年学校减负工作总结
2015/05/19 职场文书
证婚人致辞精选
2015/07/28 职场文书
600字作文之感受大自然
2019/11/27 职场文书
“鬼灭之刃”热度不减,其成功背后的原因是什么?
2022/03/22 日漫