这个我还没用过,但感觉以后会用到,就随手摘抄一下啦
<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. matlab实现分水岭算法处理图像分割

    此程序为优化后的分水岭算法,避免了图像过分割 I= imread('D:\Images\pic_loc\1870405130305041503.jpg'); imshow(I); h=fspecial ...

  2. Leetcode: 132 Pattern

    Given a sequence of n integers a1, a2, ..., an, a 132 pattern is a subsequence ai, aj, ak such that ...

  3. emacs + quicklisp + slime

  4. shell 显示字体颜色

    (2).颜色语法:     \033[前景色;背景色m     \033[0m                   #0m代表恢复到系统默认的颜色   (3).字符界面前景颜色与背景颜色:     前 ...

  5. ubuntu 中增加鼠标右键菜单,为Windows 的exe 程序快速增加桌面快捷键

    #!/bin/bashmyfile=$NAUTILUS_SCRIPT_SELECTED_FILE_PATHSmyfilename=${myfile##*/}myfilename=${myfilenam ...

  6. innodb必收藏

    http://www.xaprb.com/blog/2015/08/08/innodb-book-outline/

  7. javaWeb 数据库连接池连接数据库

    需要的公共jar包 mysql-connector-java-5.0.8-bin.jar(mysql数据库)   ojdbc14.jar(oracle数据库) A.DBCP 需要jar包: commo ...

  8. Xcode7编译打包后,iOS9设备无法打开http网址的问题

    在info.plist中添加一个节点: <key>NSAppTransportSecurity</key> <dict> <key>NSAllowsAr ...

  9. Effective_Python mapreduce

    完全吊炸天构造器的写法... import os import threading,time class GenericInputData(object): def read(self): raise ...

  10. Asp.net 之Application

    using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.We ...