jQuery实现简单滚动动画效果
动画的思路很简单,点击页面上一个元素,页面滚动到指定位置。下面介绍一下我3个小时百度的研究成果:
首先是html部分:
<html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html>
先添加两个<a>元素作为按钮。然后对<a>元素进行补充:
<html> <body> <a href="javascript:;" id="tab1">顶部</a> <a href="javascript:;" id="tab2">中部</a> ...<p>持续添加直到出现滚动条</p>... </body>
href="javascript:;"大概意思是说a元素可以激活js代码。如果不加则代码无效。使用<button>则无需添加。
接着引入jquery和写入代码:
<script src="js/jquery-1.10.2.min.js"></script> <script> $(document).ready(function(){ $("#tab1").click(function(){ $("html,body").animate({scrollTop:'0px'},300); }); $("#tab2").click(function(){ $("html,body").animate({scrollTop:'600px'},300); }); }); </script>
需要注意:
1、写入的代码最好在引入的jquery语句下方
2、id一定要和<a>元素对应
3、"html,body"代表整体移动
4、({scrollTop:'600px'},300);前面的数值是移动距离,后面的数值是动画时间(单位是毫秒)
做到这一步代码就能运行了。
下面详细的解析一下jquery代码:
$(document).ready(function(){ //这一句都要加,不加会出错,没有实际作用 $("#tab1").click(function(){ //$("#tab1")是选择器,click()是方法。意思是说对#tab1使用click方法 $("html,body").animate({scrollTop:'0px'},300); //我理解的scrollTop是个变量属性,代表元素最顶端和当前浏览器显示区域上边沿之间的距离,所以这句话的意思是:让body的上边沿和浏览器可视区域上边沿距离为0px,结果就是回到页面顶端。 }); ... });
以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
相关推荐
-
通过jquery实现页面的动画效果(实例代码)
有很多函数可以用来实现动画效果,其中animate函数为最为常见的函数之一.以下为对该函数使用方式的简要介绍. animate函数基本形式 通过animate实现动画效果的基本形式为: $(selector).animate({params},speed,callback); 其中{params}为必须项,它是一个对象,指明了我们希望指定元素通过动画效果运行后,其所具有的的CSS样式,speed和callback则皆为可选项,其中speed指明了动画运行的速度,其值可为数值类型(如1000表示动
-
深入理解JQuery中的事件与动画
首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo
-
jQuery实现点击水纹波动动画
jQuery点击水纹波动动画原理: 1.在需要实现水波纹效果的标签中添加<XXX class="ripple-wrapper"></XXX> 2.代码会定位 鼠标相对 与 标签的位置,以鼠标点为圆心画圆 3.圆的半径 可以自定义(默认为标签的最大宽或高度) 4.圆点颜色,和动画时间等可以自行修改内部代码,或直接 调用 $().css({})方法 进行覆盖 ripple-wrapper.js $(function(){ $(".r
-
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> <tit
-
jQuery中事件与动画的总结分享
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) --:只是等待标签完毕,即可执行 区别:前者在HTML页面中只能解析最后一个,二后者是N个 window.onload() = function () { } $(function () { $("li").bind("click", function () { $(this).css("
-
JQuery实现DIV其他动画效果的简单实例
1.toggle 切换对象的隐藏和显示,可以用来代替show和hide <!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>
-
原生js仿jquery animate动画效果
jquery animate动画效果: 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <style> *{margin:0;padding:0;} .box{width: 400px;height: 300px;background: #000;margin:40
-
jQuery简单动画变换效果实例分析
本文实例讲述了jQuery简单动画变换效果.分享给大家供大家参考,具体如下: 1.效果图如下: 2.html代码: <div id="panel"> <h5 class="head">什么是jQuery?</h5> <div class="content"> jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目.j
-
jQuery中使用animate自定义动画的方法
动画 animate() 01.animate()方法的简单使用 有些复杂的动画通过之前学到的几个动画函数是不能够实现,这时候就是强大的animate方法了. 操作一个元素执行3秒的淡入动画,对比下一下2组动画设置的区别. $(elem).fadeOut(3000) $(elem).animate({ opacity:0 },3000) 显而易见,animate方法更加灵活了,可以精确的控制样式属性从而执行动画. 语法: 1 .animate( properties [, duration ]
-
jQuery实现简单滚动动画效果
动画的思路很简单,点击页面上一个元素,页面滚动到指定位置.下面介绍一下我3个小时百度的研究成果: 首先是html部分: <html> <body> <a>顶部</a> <a>中部</a> ...<p>持续添加直到出现滚动条</p>... </body> </html> 先添加两个<a>元素作为按钮.然后对<a>元素进行补充: <html> <bo
-
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> <title></title
-
jQuery实现的导航动画效果(附demo源码)
本文实例讲述了jQuery实现的导航动画效果.分享给大家供大家参考,具体如下: 经常在网上看到的,鼠标在导航上移动时,导航底部的横条会自动移动到鼠标悬浮的导航项上. 效果如下图: 利用jquery的 animate 函数,很好实现.代码很简单! 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>测试</title> <scrip
-
如何用WindowsForm给窗口添加一些简单的动画效果
在显示或者隐藏窗口的时候,可以利用Windows API中的AnimateWindow函数实现一些特殊的效果.主要的动画类型有四种:滚动.幻灯片.折叠或展开和alpha混合渐变. 窗口动画效果 首先定义动画工具类,引入AnimateWindow函数. public class WindowsEffects { public const int AW_ACTIVATE = 0x00020000; // 激活窗口.不要在AW_HIDE中使用此值. public const int AW_BLEND
-
jquery实现简单文字提示效果
本文实例讲述了jquery实现简单文字提示效果.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>jquery实现简单文字提示</title> &l
-
jQuery实现感应鼠标动画效果自动伸长的输入框实例
本文实例讲述了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
-
jQuery实现带滚动导航效果的全屏滚动相册实例
本文实例讲述了jQuery实现带滚动导航效果的全屏滚动相册.分享给大家供大家参考.具体如下: 运行效果图如下: 主要代码如下: $(function() { //加载时的图片 var $loader= $('#st_loading'); //获取的ul元素 var $list= $('#st_nav'); //当前显示的图片 var $currImage = $('#st_main').children('img:first'); //加载当前的图片 //同时显示导航的项 $('<img>')
-
基于jQuery实现图片推拉门动画效果的两种方法
''推拉门''动效也可以称作"手风琴"效果,大多数效果实现的思路基本是一样的,下面介绍两种方法,一种是通过改变图片的偏移位置实现移动,另一种是通过遍历背景图片后改变图片的宽度实现变换. 实现方法一:改变图片宽度 html+css代码 <body> <div class="box"> <ul> <!-- <li>![](images/slidepic2.jpg)</li> --> <li&g
-
jQuery实现简单的点赞效果
本文实例讲解了jQuery实现简单的点赞效果的详细代码,具体内容如下 效果图: 下面提供一个"点赞"的实例代码,用ASP.NET MVC4+jQuery Ajax实现. Model: namespace MvcAjaxAdd.Models { public class ClickCountModel { [Key] [DatabaseGeneratedAttribute(System.ComponentModel.DataAnnotations.Schema.DatabaseGener
随机推荐
- Java Swing中的JButton、JComboBox、JList和JColorChooser组件使用案例
- MySQL exists 和in 详解及区别
- PHP服务端SESSION管理工具提供下载
- Python判断列表是否已排序的各种方法及其性能分析
- asp.net XMLHttpRequest实现用户注册前的验证
- php获取当前页面完整URL地址
- PHP批量去除BOM头代码分享
- 一个php导出oracle库的php代码
- C#开发微信门户及应用(3) 文本消息和图文消息应答
- 使用text-align:justify实现两端对齐一例
- 卸载VS2011 Developer Preview后Sql Server2008 R2建立数据库关系图报“找不到指定的模块”错误的解决方法
- Mongodb聚合函数count、distinct、group如何实现数据聚合操作
- 重置MySQL中表中自增列的初始值的实现方法
- php array_map使用自定义的函数处理数组中的每个值
- javascript游戏开发之《三国志曹操传》零部件开发(四)用地图块拼成大地图
- js单向链表的具体实现实例
- 用Javascript轻松制作一套简单的抽奖系统
- 元素未显示设置width/height时IE中使用currentStyle获取为auto
- 详解Linux进程间通信——使用共享内存
- 详解C++编程中类模板的相关使用知识