简短几句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 相关文章推荐
优化网页之快速的呈现我们的网页
Jun 29 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
javascript中attachEvent用法实例分析
May 14 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
jQuery实现带延时功能的水平多级菜单效果【附demo源码下载】
Sep 21 Javascript
Javascript之面向对象--方法
Dec 02 Javascript
jQuery中的一些小技巧
Jan 18 Javascript
jQuery图片轮播功能实例代码
Jan 29 Javascript
javaScript嗅探执行神器-sniffer.js
Feb 14 Javascript
vue实现压缩图片预览并上传功能(promise封装)
Jan 10 Javascript
jQuery-Citys省市区三级菜单联动插件使用详解
Jul 26 jQuery
JQuery绑定事件四种实现方法解析
Dec 02 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中防止伪造跨站请求的小招式
2011/09/02 PHP
jQuery中的RadioButton,input,CheckBox取值赋值实现代码
2014/02/18 PHP
ThinkPHP快速入门实例教程之数据分页
2014/07/01 PHP
php实现源代码加密的方法
2015/07/11 PHP
深入解析PHP的Yii框架中的缓存功能
2016/03/29 PHP
Yii2中使用asset压缩js,css文件的方法
2016/11/24 PHP
PHP利用DWZ.CN服务生成短网址
2019/08/11 PHP
php使用pecl方式安装扩展操作示例
2019/08/12 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
关于viewport,Ext.panel和Ext.form.panel的关系
2009/05/07 Javascript
JavaScript实现三阶幻方算法谜题解答
2014/12/29 Javascript
JavaScript简单实现弹出拖拽窗口(二)
2016/06/17 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
vue实现nav导航栏的方法
2017/12/13 Javascript
微信小程序实现动态列表项的顺序加载动画
2019/07/25 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
使用Python读取大文件的方法
2018/02/11 Python
浅谈python爬虫使用Selenium模拟浏览器行为
2018/02/23 Python
基于tensorflow加载部分层的方法
2018/07/26 Python
Python3几个常见问题的处理方法
2019/02/26 Python
Python生成MD5值的两种方法实例分析
2019/04/26 Python
基于pandas中expand的作用详解
2019/12/17 Python
Python爬虫程序架构和运行流程原理解析
2020/03/09 Python
Anaconda+VSCode配置tensorflow开发环境的教程详解
2020/03/30 Python
完美解决pyinstaller打包报错找不到依赖pypiwin32或pywin32-ctypes的错误
2020/04/01 Python
keras 自定义loss model.add_loss的使用详解
2020/06/22 Python
python上selenium的弹框操作实现
2020/07/13 Python
安装不同版本的tensorflow与models方法实现
2021/02/20 Python
澳大利亚领先的孕妇服装品牌:Mamaway
2018/08/14 全球购物
中层干部竞争上岗演讲稿
2014/01/13 职场文书
小学数学教学反思
2014/02/02 职场文书
关于旷工的检讨书
2014/02/02 职场文书
幼儿园感谢信
2015/01/21 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
大学生学年个人总结
2015/02/15 职场文书
python数据可视化JupyterLab实用扩展程序Mito
2021/11/20 Python