jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。
字符串值无法创建动画(比如 "background-color:red")。
代码如下:
$('#shang').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);});
上面的代码表示滚动条跳到0的位置,页面移动速度是800。
结合scrollTop实用示例:
代码如下:
jQuery(document).ready(function($){
$('#shang').click(function(){
$('html,body').animate({scrollTop: '0px'}, 800);
});
$('#comt').click(function(){
$('html,body').animate({scrollTop:$('#comments').offset().top}, 800);
});
$('#xia').click(function(){
$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);
});
});
表示点击相关ID移动到指定位置:
点击ID为shang的元素,回到顶部;
点击ID为comt的元素,回到ID为comments的位置;
点击ID为xia的元素,回到底部;
相关推荐
-
用js实现的模拟jquery的animate自定义动画(2.5K)
后来发现还不错.不如继续写下去. 这个版本基本上跟jquery的animate一样了. 我是说效果基本上一样了.(效率还没测试过.): 如果有专业测试人员 帮我测试下. 1:功能说明 兼容主流浏览器. 1:支持回调函数: 2:支持级联动画调用: 3:支持delay动画队列延迟: 4:支持stop停止动画: 5:支持opacity透明度变化: 6:支持+= -= *= /=操作: 7:支持单位操作(px, %); 2:使用说明 jelle(A).animate(B, C, D); A:需要执行动画
-
jQuery animate效果演示
animate(params[,duration[,easing[,callback]]]) 用于创建自定义动画的函数.<br /> 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity"). 注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属
-
jQuery中animate的几种用法与注意事项
一.animate语法结构 animate(params,speed,callback) params:一个包含样式属性及值的映射,比如{key1:value1,key2:value2} speed:速度参数[可选] callback:在动画完成时执行的函数[可选] 二.自定义简单动画 用一个简单例子来说明,实现单击某div在页面上横向飘动的效果. <style> #cube{ position:relative;/* 不加这句元素不能动 */ width:30px; height:30px;
-
jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. animate()方法的使用: 方式一: 以"属性名/值"对象的方式定义动画终止样式属性.例如: 复制代码 代码如下: $("div").animate( {width:"1000px"}) 以上代码能够将div从原有的宽度调整到1000px.也可以一次性
-
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. 滚动到顶部: 复制代码 代码如下: $('.scroll_top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); 滚动到指定位置: 复制代码 代码如下: $('.scroll_a').click(function(){$('htm
-
jQuery animate(滑块滑动效果代码)
HTML 复制代码 代码如下: <p><a href="#" class="run">Run</a></p> <div id="box"> </div> <p><a href="#" class="run">Run</a></p><div id="box">
-
jQuery动画animate方法使用介绍
复制代码 代码如下: $(function() { $("#left").click(function(){ $(".block").show(); $(".block").animate({ width: "+200px", height: "+200px", fontSize: "1em", borderWidth: 10 }, "slow","swin
-
jquery (show,fadeOut,Animate)简单效果
jquery show移上去看看 hello fadeout淡出效果 淡出效果淡出效果淡出效果淡出效果淡出效果 淡出效果淡出效果淡出效果淡出效果 [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
-
jquery animate 动画效果使用说明
animate( params, [duration], [easing], [callback] ) 用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样式属性(如"height"."top"或"opacity").注意:所有指定的属性必须用骆驼形式,比如用marginLeft代替margin-left. 而每个属性的值表示这个样式属性到多少时动画结束.如果是一个数值,样式属性就
-
JQuery动画animate的stop方法使用详解
animate语法: 复制代码 代码如下: $(selector).animate(styles,speed,easing,callback) 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Testing</title> <link rel="stylesheet" href="css
随机推荐
- Python定时器实例代码
- mysql 的replace into实例详解
- 跨域请求之jQuery的ajax jsonp的使用解惑
- VBS教程:VBscript属性-功能介绍
- 密码强度检测效果实现原理与代码
- PHP截断标题且兼容utf8和gb2312编码
- javascript中类的定义方式详解(四种方式)
- 使用nodejs爬取前程无忧前端技能排行
- jsp+ajax发送GET请求的方法
- 跟我学习javascript的闭包
- jquery1.5.1中根据元素ID获取元素对象的代码
- jquery带翻页动画的电子杂志代码分享
- javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
- java对象与json对象间的相互转换的方法
- javascript设计模式之中介者模式学习笔记
- IIS APPPOOL\DefaultAppPool登录失败如何解决
- [基础知识]注册表的出生历程
- JavaScript遍历求解数独问题的主要思路小结
- Android 根据EditText搜索框ListView动态显示数据
- 虚拟路由器以虚求实