jQuery中animate与scrollTop、offset().top实例
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>scrollTop与offset.top、animate</title>
<style>
* {
margin: 0;
padding: 0
} body {
margin: 0 auto;
max-width: 640px;
background-color: #fbfbfb;
padding: 10px;
} .bd {
height: 1650px;
overflow: hidden;
} .btn_animate {
position: absolute;
width: 120px;
height: 30px;
line-height: 30px;
background-color: rgb(129, 26, 26);
color: #fff;
text-align: center;
} .btn_ho {
position: absolute;
top: 40px;
left: 0;
width: 120px;
height: 30px;
line-height: 30px;
background-color: rebeccapurple;
border-radius: 5px;
color: #fff;
text-align: center;
margin: 10px 0;
} .btn_go {
position: absolute;
left: 0;
top: 90px;
height: 30px;
line-height: 30px;
width: 150px;
background-color: plum;
border-radius: 5px;
text-align: center;
} .hide {
position: absolute;
top: 160px;
left: 0;
display: none;
width: 100px;
height: 30px;
background-color: orange;
}
.btn_top{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: navy; border-radius: 5px; color: #fff;}
.btn_top_r{ overflow: hidden; height: 30px;line-height: 30px; width: 130px; text-align: center; background-color: rgb(11, 104, 84); border-radius: 5px; color: #fff;}
</style>
</head> <body>
<div class="bd">
<div style="height: 400px; background-color: rgb(33, 107, 172); position: relative;" id="demo">
<div class="btn_animate" id="btnAnimate">点击向左移动</div>
<div class="btn_ho" id="btnHo">点击切换</div>
<div class="hide" id="hide">后显示</div>
<div class="btn_go" id="go">点击变化</div>
</div>
<h2>注意：用animate效果的时候样式一定要定位</h2>
<div style="height: 500px; background-color: rgb(34, 59, 99)" id="floor"></div>
<div style="height: 500px; background-color: orangered"></div>
<div class="btn_top" id="btnTop">scrollTop:top</div>
<div class="btn_top_r" id="btnTop_r">offset().top</div> </div>
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function () {
// 让指定元素左右移动
$("#btnAnimate").on("click", function () {
$(this).animate({
left: '+150px'
}, "slow");
});
//在600毫秒内切换段落的高度和透明度
$("#btnHo").on("click", function () {
$("#btnAnimate").animate({
height: 'toggle',
opacity: 'toggle'
}, "slow");
});
//用500毫秒将段落移到left为50的地方并且完全清晰显示出来（透明度为1）
$("#go").click(function () {
$("#hide").animate({
width: "40%",
height: "100%",
fontSize: "20px",
left: 50,
opacity: 'show'
}, 500); });
$("#btnTop").on("click",function(){
//html,body是兼容Firfox与Chrome
$("html,body").animate({"scrollTop":top})
})
$("#btnTop_r").on("click",function(){
$("html,body").scrollTop($("#floor").offset().top - 50)
}) });
</script>
</body> </html>
效果图：
jQuery中animate与scrollTop、offset().top实例的更多相关文章
- jQuery中animate()的方法以及$("body").animate({"scrollTop":top})不被Firefox支持问题的解决
转载请注明出处:http://blog.csdn.net/dongdong9223/article/details/50846678 本文出自[我是干勾鱼的博客] jQuery中animate()的方 ...
- jQuery中animate()方法用法实例
本文实例讲述了jQuery中animate()方法用法.分享给大家供大家参考.具体分析如下: 此方法用于创建自定义动画,并且能够规定动画执行时长.擦除效果.动画完成后还可以地触发一个回调函数. ani ...
- jQuery中animate动画第二次点击事件没反应
jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...
- jQuery中Animate进阶用法（一）
jQuery中animate的用法你了解多少呢?如果仅仅是简单的移动位置,显示隐藏,哦!天哪你在浪费资源!因为animate太强大了,你可以有很多意想不到的用法!让我们一起研究一下吧~~ 首先要了解j ...
- jQuery动画效果animate和scrollTop结合使用实例
CSS属性值是逐渐改变的,这样就可以创建动画效果.只有数字值可创建动画(比如 "margin:30px").字符串值无法创建动画(比如 "background-color ...
- jquery中attr()与prop()函数用法实例详解(附用法区别)
本文实例讲述了jQuery中attr()与prop()函数用法.分享给大家供大家参考,具体如下: 一.jQuery的attr()方法 jquery中用attr()方法来获取和设置元素属性,attr是a ...
- scrollTop,offset().top
1.scrollTop是指滚动条滚动的距离 如果没有出现滚动条,则距离为0 css: <style type="text/css"> *{ margin: 0; pad ...
- jQuery中animate()方法以及$('body').animate({"scrollTop":top})不被Firefox支持问题的解决
$("body").animate({"scrollTop":top}): 只被chrome支持,而不被Firefox支持 $("html" ...
- jQuery中Animate进阶用法（二）
Step Type: Function( Number now, Tween tween )每个动画元素的每个动画属性将调用的函数.这个函数为修改Tween 对象提供了一个机会来改变设置中得属性值. ...
随机推荐
- 学习Maven之PropertiesMavenPlugin
1.PRoperties-maven-plugin是个什么鬼? 介绍前我们先看一个问题,比如我们有一个maven项目结构如下:一般我们都把一些配置文件放到像src/main/resources/jdb ...
- canvas和svg的区别
讨论关于canvas和svg的区别.首先canvas是html5提供的新元素<canvas>,而svg存在的历史要比canvas久远,已经有十几年了.svg并不是html5专有的标签,最初 ...
- ubuntu 安装google输入法
第五步:通常情况下,IBus图标(一个小键盘)会出现在桌面右上角的任务栏中.有时候这个图标会自行消失,可使用以下命令,找回消失的IBus图标: ibus-daemon -drx 不建议用googl ...
- Java 目标
Java 技术 其次掌握的技能树主要有三个方面:第一个是基础,比如对集合类,并发包,IO/NIO,JVM,内存模型,泛型,异常,反射,等有深入了解,最好是看过源码了解底层的设计.比如一般面试都会问Co ...
- python3菜鸟教程
http://www.runoob.com/python3/python3-class.html
- PHP ImageMagick
简介: ImageMagick是用C语言开发图片处理程序.可以对图片进行改变大小.旋转.锐化.减色或增加特效等操作.对图片的操作,即可以通过命令行进行,也可以用C/C++.Perl.Jav ...
- 38.Count and Say 报数
［抄题］: The count-and-say sequence is the sequence of integers beginning as follows:1, 11, 21, 1211, 1 ...
- centos6.5修改root密码
转:https://blog.csdn.net/cui1834515/article/details/77860113
- Java中10个流对象重点掌握
目前为止,10个流对象重点掌握: 字符流: FileReader FileWriter BufferedReader BufferedWriter 字节流: FileInputStream FileO ...
- 虚拟机CentOS6.5搭建samba服务器实现文件共享
Samba是SMB的一种实现方法,主要用来实现Linux系统的文件和打印服务.Linux用户通过配置使用Samba服务器可以实现与Windows用户的资源共享:而守护进程smbd和nmbd是Samba ...