<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>利用jquery制作滚动到指定位置触发动画</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style type="text/css">

        * {
            margin: 0px;
            padding: 0px;
        }

        .gs {
            position: relative;
            top: 100px;
            font-weight:bold;">#099;
            left: 150px;
            width: 80px;
        }

        .xz {
            animation: roate 2s;
            animation-fill-mode: forwards;
            animation-direction: alternate;
        }

        .gs {
            float: left;
        }

        @keyframes roate {
            from {
                transform: rotate(0deg);
                width: 100px;
                height: 100px;
            }
            to {
                transform: rotate(360deg);
                width: 200px;
                height: 200px;
            }
        }

        .xs {
            width: 50px;
            float: left;
            height: 30px;
            font-weight:bold;">#F90;
            position: fixed;
            left: 700px;
            top: 0px;
        }
    </style>
</head>

<body>
<script type="text/javascript">
    /*var a,b,c;
     a=$("#dh").offset().top;//元素相对于窗口的距离
     b=$(window).scrollTop(); //监控窗口已滚动的距离;
     c=$(document).height();//整个文档的高度
     d=$(window).height();//浏览器窗口的高度
     element  标签
     cssname  动画
     offset  相对于窗口的距离
     */
    function scrollnumber(element, cssname, offset) {
        var a, b, c, d;
        d = $(element).offset().top;
        a = eval(d + offset);
        b = $(window).scrollTop();
        c = $(window).height();
        if (b + c > a) {
            $((element)).addClass((cssname));
        }
    }

    function scrollfun() {
        scrollnumber("#dh1", 'xz', 100);
        scrollnumber("#dh2", 'xz', 100);
        scrollnumber("#dh3", 'xz', 100);
        scrollnumber("#dh4", 'xz', 100);
    }

    $(document).ready(function (e) {
        scrollfun();
        $(window).scroll(function () {
            scrollfun();
        });
    });
</script>
<div style="height: 1000px;width: 100%"></div>
<div style="height: 1000px;width: 100%">
    <div style="height:auto; font-weight:bold;">#999; width:auto; margin: 0 auto;">
        <div class="com" style="height: auto;font-weight:bold;">darkgray;position: relative;">
            <div id="dh1" class="gs">触发动画111</div>
            <div id="dh2" class="gs">触发动画222</div>
            <div id="dh3" class="gs">触发动画333</div>
            <div id="dh4" class="gs">触发动画444</div>
        </div>

    </div>
</div>
</body>
</html>

利用jquery制作滚动到指定位置触发动画的更多相关文章

  1. scroll 滚动到指定位置触发事件 and 点击一按钮/链接让页面定位在指定的位置

    scroll 滚动到指定位置触发事件:$(function(){ $(window).scroll(function() { var s =$(window).scrollTop(); if (s&g ...

  2. jquery制作滚动条到一定位置触发

    $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);/ ...

  3. jquery滚动到指定位置

    利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

  4. Vue如何引入jquery实现平滑滚动到指定位置效果

    在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

  5. selenium webdriver——JS滚动到指定位置

    1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

  6. 自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置

    double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...

  7. 通过scrollTop，使子元素滚动至指定位置

    想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...

  8. js滚动到指定位置

    序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

  9. ios开发之--令UITableView滚动到指定位置

    这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...

随机推荐

  1. r.json()

    requests模块中,r.json()为Requests中内置的JSON解码器 其中只有response返回为json格式时,用r.json()打印出响应的内容, 如果response返回不为jso ...

  2. Ubuntu 14.04 配置 Java SE jdk-7u55 （转载）

    转自:http://blog.csdn.net/tecn14/article/details/24797545 JDK  目前最新版为jdk-8u5,这次没有选择安装最新的jdk8,而是要安装jdk7 ...

  3. Akka源码分析-Akka Typed

    对不起,akka typed 我是不准备进行源码分析的,首先这个库的API还没有release,所以会may change,也就意味着其概念和设计包括API都会修改,基本就没有再深入分析源码的意义了. ...

  4. Go语言Flag的简单示例

    flag 命令行参数解析,大家可能不太清楚是什么命令行参数解析,不要紧,我们来看看: 他就是干这个活的 func FlagTest1(){ var username string var userag ...

  5. 超短的判断IE javascript代码

    首先说明该代码只能在IE 6~8中有效,再高级的IE已经修复这个BUG <script type=’text/javascript’> var ie = !-[1,]; alert(ie) ...

  6. 通过IDEA制作包含Java应程序的Docker镜像

    IDEA官网在IDEA中把Java App制作成Docker镜像并启动一个容器运行 在idea上使用docker作为java的开发环境[][] ubuntu+docker+docker-compose ...

  7. Lightoj 1054 - Efficient Pseudo Code

    题目连接: http://www.lightoj.com/volume_showproblem.php?problem=1054 题目大意: 给出n,m,问n^m的所有因子之和是多少? 解题思路: 补 ...

  8. 暴力 Codeforces Round #183 (Div. 2) A. Pythagorean Theorem II

    题目传送门 /* 暴力:O (n^2) */ #include <cstdio> #include <algorithm> #include <cstring> # ...

  9. 题解报告：hdu 1087 Super Jumping! Jumping! Jumping!

    Problem Description Nowadays, a kind of chess game called “Super Jumping! Jumping! Jumping!” is very ...

  10. ASP.NET MVC 实现伪静态

    1  什么是伪静态? 现在很多门户网站或者各大电商平台的网站的链接最后都是.htm或者.htm结尾,那么他们的网页真的是静态的html吗?拿京东来说,有无数个页面都都Html,在商品每时每刻都可能被更 ...