简短几句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 混淆加密收藏
Jan 16 Javascript
JavaScript学习笔记(十七)js 优化
Feb 04 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
js onmousewheel事件多次触发问题解决方法
Oct 17 Javascript
jQuery插件formValidator自定义函数扩展功能实例详解
Nov 25 Javascript
在Vue.js中使用Mixins的方法
Sep 12 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
最适应的vue.js的form提交涉及多种插件【推荐】
Aug 27 Javascript
vue-cli3配置与跨域处理方法
Aug 17 Javascript
JavaScript undefined及null区别实例解析
Jul 21 Javascript
vue组件实现移动端九宫格转盘抽奖
Oct 16 Javascript
Vue中强制组件重新渲染的正确方法
Jan 03 Vue.js
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 FTP类的详解
2013/06/13 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
php图片缩放实现方法
2014/02/20 PHP
php将字符串全部转换成大写或者小写的方法
2015/03/17 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
Zend Framework教程之模型Model用法简单实例
2016/03/04 PHP
Javascript类库的顶层对象名用户体验分析
2010/10/24 Javascript
实现变速回到顶部的JavaScript代码
2011/05/09 Javascript
jQuery EasyUI API 中文文档 - MenuButton菜单按钮使用介绍
2011/10/06 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
ASP.NET jquery ajax传递参数的实例
2016/11/02 Javascript
网页挂马方式整理及详细介绍
2016/11/03 Javascript
微信小程序 用户数据解密详细介绍
2017/01/09 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
bootstrap select下拉搜索插件使用方法详解
2017/11/23 Javascript
spirngmvc js传递复杂json参数到controller的实例
2018/03/29 Javascript
在element-ui的el-tree组件中用render函数生成el-button的实例代码
2018/11/05 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
微信小程序实现底部弹出框
2020/11/18 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
简单上手Python中装饰器的使用
2015/07/12 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
Python读取表格类型文件代码实例
2020/02/17 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
美国咖啡批发网站:Coffee.org
2017/06/29 全球购物
北京鼎普科技股份有限公司软件测试面试题
2012/04/07 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
模具数控专业自荐信
2014/01/27 职场文书
互联网创业计划书的书写步骤
2014/01/28 职场文书
税务会计岗位职责
2014/02/18 职场文书
市场营销毕业生自荐信范文
2014/04/01 职场文书
竞聘演讲稿
2014/04/24 职场文书
六查六看剖析材料
2014/10/06 职场文书
导游词400字
2015/02/13 职场文书
Golang生成Excel文档的方法步骤
2021/06/09 Golang
JavaScript实现酷炫的鼠标拖尾特效
2022/02/18 Javascript