<!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 PLL5 clock hakcing

    /************************************************************************** * I.MX6 PLL5 clock hakci ...

  2. Windows7下安装golang语言开发环境和revel框架

    1.下载先去下载32位或64 golang window 安装包 并安装下载地址:https://www.golangtc.com/download 本人更改了安装地址为 D:\GO\Go 2. go ...

  3. LR：HTML-based script和URL-based script方式录制的区别

    转http://www.cnblogs.com/xiaojinniu425/p/6275257.html 一.区别: 为了更加直观的区别这两种录制方式,我们可以分别使用这两种方式录制同一场景(打开百度 ...

  4. STM32:获取复位源，软件复位

    RCC CSR寄存器会存储复位标示,可通过它来知道复位原因,来源: if(RCC_GetFlagStatus(RCC_FLAG_PINRST)) printf("PINRST\r\n&quo ...

  5. pom.xml内容没有错，但一直报错红叉 解决办法

    转自:http://www.cnblogs.com/sxdcgaq8080/p/5590254.html [maven] pom.xml内容没有错,但一直报错红叉 解决办法 1.首先看一下下面的这两个 ...

  6. mysql同步延迟导致的问题

    前几天又遇到一个mysql读写分离的坑, 在将数据写入master后,因为存在同步延迟,所以如果立马去从库查询刚刚插入的数据可能会出现查询不到数据的情况, 解决办法:强制从主库读取数据,将插入和查询放 ...

  7. HDU 4893 Wow! Such Sequence! (树状数组)

    题意:给有三种操作,一种是 1 k d,把第 k 个数加d,第二种是2 l r,查询区间 l, r的和,第三种是 3 l r,把区间 l,r 的所有数都变成离它最近的Fib数, 并且是最小的那个. 析 ...

  8. “Live Desktop” privacy statement

    “Live Desktop” pays attention to your privacy protection. Sometimes we need some information to prov ...

  9. form表单提交的几种方法

    form表单提交的几种方法 <form id="myform" name="myform" method="post" onsubmi ...

  10. 自己动手利用CentOS6.5 搭建php环境安装discuz论坛

    1.安装搭建论坛必要的软件 apache php mysql CentOS系统我们可以直接使用 yum install 的方式进行软件安装,腾讯云有提供软件安装源,是同步CentOS官方的安装源,包涵 ...