简短几句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 相关文章推荐
replace()方法查找字符使用示例
Oct 28 Javascript
JQUERY实现网页右下角固定位置展开关闭特效的方法
Jul 27 Javascript
javascript实现tab响应式切换特效
Jan 29 Javascript
关于JavaScript作用域你想知道的一切
Feb 04 Javascript
js时间查询插件使用详解
Apr 07 Javascript
js中的闭包学习心得
Feb 06 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
Vue 指令实现按钮级别权限管理功能
Apr 23 Javascript
vue+axios 拦截器实现统一token的案例
Sep 11 Javascript
详解阿里Node.js技术文档之process模块学习指南
Jan 04 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或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
Javascript面向对象扩展库代码分享
2012/03/27 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
jquery基础知识第一讲之认识jquery
2016/03/17 Javascript
jQuery中的Deferred和promise 的区别
2016/04/03 Javascript
解析JavaScript面向对象概念中的Object类型与作用域
2016/05/10 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
理顺8个版本vue的区别(小结)
2018/09/17 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
[50:38]DOTA2-DPC中国联赛 正赛 Phoenix vs CDEC BO3 第二场 3月7日
2021/03/11 DOTA
flask中使用SQLAlchemy进行辅助开发的代码
2013/02/10 Python
python简单读取大文件的方法
2016/07/01 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python单向链表和双向链表原理与用法实例详解
2018/08/31 Python
Python 实现还原已撤回的微信消息
2019/06/18 Python
pyqt 实现QlineEdit 输入密码显示成圆点的方法
2019/06/24 Python
python卸载后再次安装遇到的问题解决
2019/07/10 Python
Python3和pyqt5实现控件数据动态显示方式
2019/12/13 Python
python GUI库图形界面开发之PyQt5下拉列表框控件QComboBox详细使用方法与实例
2020/02/27 Python
django queryset 去重 .distinct()说明
2020/05/19 Python
sublime3之内网安装python插件Anaconda的流程
2020/11/10 Python
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
美国香薰蜡烛品牌:PADDYWAX
2018/10/06 全球购物
自考生自我鉴定范文
2013/10/01 职场文书
领导调研接待方案
2014/02/27 职场文书
调查研究项目计划书
2014/04/29 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
自主招生专家推荐信
2015/03/26 职场文书
高中体育课教学反思
2016/02/16 职场文书
HTML5 语义化标签(移动端必备)
2021/08/23 HTML / CSS
python中字符串String及其常见操作指南(方法、函数)
2022/04/06 Python