简短几句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之文件操作
Mar 07 Javascript
JavaScript toFixed() 方法
Apr 15 Javascript
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
Aug 03 Javascript
JavaScript+CSS控制打印格式示例介绍
Jan 07 Javascript
javascript中一些util方法汇总
Jun 10 Javascript
jquery实现页面虚拟键盘特效
Aug 08 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
Nov 10 Javascript
require.js 加载 vue组件 r.js 合并压缩的实例
Oct 14 Javascript
在vue中实现简单页面逆传值的方法
Nov 27 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
微信小程序手动添加收货地址省市区联动
May 18 Javascript
小程序实现上下切换位置
Nov 16 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
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
模板引擎正则表达式调试小技巧
2011/07/20 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
PHP中可以自动分割查询字符的Parse_str函数使用示例
2014/07/25 PHP
JavaScript 密码强度判断代码
2009/09/05 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
有关于JS辅助函数inherit()的问题
2013/04/07 Javascript
Function.prototype.call.apply结合用法分析示例
2013/07/03 Javascript
JavaScript中数据结构与算法(五):经典KMP算法
2015/06/19 Javascript
JS中dom0级事件和dom2级事件的区别介绍
2016/05/05 Javascript
gulp-htmlmin压缩html的gulp插件实例代码
2016/06/06 Javascript
canvas实现爱心和彩虹雨效果
2017/03/09 Javascript
详解在Angularjs中ui-sref和$state.go如何传递参数
2017/04/24 Javascript
JS实现unicode和UTF-8之间的互相转换互转
2017/07/05 Javascript
vue+springmvc导出excel数据的实现代码
2018/06/27 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
2020/05/13 Javascript
python字符串对其居中显示的方法
2015/07/11 Python
快速查询Python文档方法分享
2017/12/27 Python
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
python web.py开发httpserver解决跨域问题实例解析
2018/02/12 Python
Python用于学习重要算法的模块pygorithm实例浅析
2018/08/16 Python
利用python实现简易版的贪吃蛇游戏(面向python小白)
2018/12/30 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
PyTorch之图像和Tensor填充的实例
2019/08/18 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
CSS3实现瀑布流布局与无限加载图片相册的实例代码
2016/12/22 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
2013/06/24 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
美国新娘礼品店:The Paisley Box
2020/09/08 全球购物
SheIn沙特阿拉伯:女装在线
2020/03/23 全球购物
2014年两会学习心得体会
2014/03/10 职场文书
红色电影观后感
2015/06/18 职场文书
商场广播稿范文
2015/08/19 职场文书
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python