这个我还没用过,但感觉以后会用到,就随手摘抄一下啦
<div id="a1"></div>
<div id="a2"></div>
<div id="a3"></div>
//引入jQuery.js
<script>
var t1=$("#a1").offset().top;
var t2=$("#a2").offset().top;
var t3=$("#a3").offset().top;
$(window).scroll(function(){
var top=$(window).scrollTop();
if(top>t1&&top<t2){
$("#a1").addClass("an1");
}
if(top>t2&&top<t3){
$("#a2").addClass("an1");
}
if(top>t3){
$("#a3").addClass("an1");
}
});
</script>

如何使CSS3中的animation动画当每滑到一屏时每次都运行的更多相关文章

  1. 怎样使CSS3中的animation动画当每滑到一屏时每次都运行

    这个得结合js来做的.比如这里有3个层,js判断滚动到当前层位置的时候给其加上一个class即可,而加的这个class就是带css3执行动画的 class <div id="a1&qu ...

  2. CSS3中的animation动画

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. css3中的制作动画小总结

    系列教程 CSS3属性中有关于制作动画的三个属性:Transform,Transition,Animation: Transform 在CSS3中transform主要包括以下几种:旋转rotate. ...

  4. css3中变形与动画(三)

    transform可以实现矩阵变换,transition实现属性的平滑过渡,animation意思是动画,动漫,这个属性才和真正意义的一帧一帧的动画相关.本文就介绍animation属性. anima ...

  5. CSS3中的3D动画实现(钟摆、魔方)--实现代码

    CSS3中的3D动画实现(钟摆.魔方) transition-property 过渡动画属性  all|[attr] transition-duration 过渡时间 transition-delay ...

  6. android中设置Animation 动画效果

    在 Android 中, Animation 动画效果的实现可以通过两种方式进行实现,一种是 tweened animation 渐变动画,另一种是 frame by frame animation ...

  7. css3中变形与动画(一)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). 首先介绍transform变形. transform英文意思:改变,变形. css3 ...

  8. css3中的animation

    不使用js或jquery,用css3实现一张图片的滑动.我用的是animation来设置所要应用的动画效果,首先在html中写好一个<div></div>,并放置一张图片在di ...

  9. css3中变形与动画(二)

    css3制作动画的几个属性:变形(transform),过渡(transition)和动画(animation). transform介绍过了.接下来介绍过渡transition. 一.例子 先通过一 ...

随机推荐

  1. sqlserver安装出现问题

    今天用友财务软件免费下载网站小编给 一个客户安装畅捷通T +11.51软件时,首先参照了SQL 2008 R2数据库安装教程安装SQL 2008 R2数据库时碰到一个奇怪的问题现象就是:安 装 SQL ...

  2. 7.$a = 'abcdef'; 请取出$a的值并打印出第一个字母

    echo $a[0]; echo $a{0}; echo chr(ord($a));//先输出$a字符串里的第一个字符的ASCII值 再从指定的 ASCII 值返回字符.

  3. 配置本地光盘为yum源

    挂载cd-rom mount /dev/cdrom /mnt http://javaarm.com/faces/display.xhtml?tid=3520 关闭selinux vi /etc/sys ...

  4. each(callback) 对于每个匹配的元素所要执行的函数

    以每一个匹配的元素作为上下文来执行一个函数. 意味着,每次执行传递进来的函数时,函数中的this关键字都指向一个不同的DOM元素(每次都是一个不同的匹配元素).而且,在每次执行函数时,都会给函数传递一 ...

  5. [转]Git调用第三方对比工具beyondCompare

    点击阅读原文 对于我这种 git 命令行小白来说, git 自带的对比工具各种水土不服,想念以前的 svn 小乌龟 + beyondCompare 的日子...纠结完 gitHub client 未果 ...

  6. zigbee学习之路(二)点亮LED

    一.前言 今天,我来教大家如何点亮led,这也是学习开发板最基础的步骤了. 二.原理分析 cc2530芯片跟虽然是51的内核,但是它跟51单片机还是有区别的,51单片机不需要对IO口进行配置,而cc2 ...

  7. CocoaPods安装第三方出错:XCode7.3

    错误[!] The dependency `Masonry (~> 0.6.1)` is not used in any concrete target. 在之前,我使用的版本是XCode7.0 ...

  8. GZAPI框架初识

    新建一个MVC项目(GZAPIFramework.Demo): mvc:用于API接口文档查看,Log日志查看 webapi:api调用 新建一个Biz类库并添加nuget引用: 搜索GZAPI.Co ...

  9. java 代理模式一: 静态代理

    代理模式: 代理模式的作用:为其他对象提供一种代理以控制对 特定对象  的访问. 某种情况下,一个客户不想或者直接引用另一个对象,而代理对象可以在客户端和目标对象之间起到中介的作用:通过代理对象引用. ...

  10. hibernate中设置BigDeCimal的精度

    @Column(precision = 12, scale = 2) 在MySQL数据库中的精度为: