<!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. I.MX6 DNS 查看、修改方法

    /************************************************************************** * I.MX6 DNS 查看.修改方法 * 说明 ...

  2. AutoIT: 对Windows桌面的一些操作

    $handle= WinGetHandle("Program Manager") $ctrl= ControlGetHandle("ProgramManager" ...

  3. Orchard 相关

    Orchard中文网: http://www.orchardch.com/ 起飞网: http://www.qeefee.com/category/orchard

  4. PHP中的连贯操作

    连贯操作有什么好处?就是多行操作可以在一行之内完成,要进行连贯操作的方法必须返回$this,也就是当前类的对象实例,然后就可以进行连贯操作了,具体的实现代码如下所示. <?php /** * p ...

  5. 《windows核心编程系列》十五谈谈windows线程栈

    谈谈windows线程栈. 当系统创建线程时会为线程预订一块地址空间区域,注意仅仅是预订.默认情况下预定的这块区域的大小是1MB,虽然预订这么多,但是系统并不会给全部区域调拨物理存储器.默认情况下,仅 ...

  6. javascript---DOM大编程

    编程练习 制作一个表格,显示班级的学生信息. 要求: 1. 鼠标移到不同行上时背景色改为色值为 #f2f2f2,移开鼠标时则恢复为原背景色 #fff 2. 点击添加按钮,能动态在最后添加一行 3. 点 ...

  7. C++入门知识点总结

    阅读目录 1 C++中的命名空间 C++中使用命名空间来解决在相同文件或范围的同名变量问题,示例程序如下: #include <iostream> using namespace std; ...

  8. 暑期训练狂刷系列——poj 3468 A Simple Problem with Integers （线段树+区间更新）

    题目连接: http://poj.org/problem?id=3468 题目大意: 给出n个数,有两种操作: 1:"C a b c",[a,b]中的每一个数都加上c. 2:&qu ...

  9. _bzoj1002 [FJOI2007]轮状病毒【瞎搞】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1002 这种题真是有毒,很多叼一点的都用matrix tree定理推出了递推公式,也有一些用好 ...

  10. 对char类型数组的英文字母进行冒泡排序

    import java.util.Arrays; import java.util.Scanner; public class Demo02 { public static void main(Str ...