<!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. 并不对劲的bzoj4012:loj2116:p3241: [HNOI2015]开店

    题目大意 有一棵\(n\)(\(n\leq1.5*10^5\))个节点的二叉树,有点权\(x\),边权\(w\),\(q\)(\(q\leq2*10^5\))组询问,每组询问给出\(u,l,r\),求 ...

  2. 洛谷 P1311 选择客栈 —— 水题

    题目:https://www.luogu.org/problemnew/show/P1311 看每个位置能否成为咖啡店,然后作为客栈和前面配对即可. 代码如下: #include<iostrea ...

  3. python3中digest()和hexdigest()区别

    hashlib是涉及安全散列和消息摘要,提供多个不同的加密算法接口,如SHA1.SHA224.SHA256.SHA384.SHA512.MD5等. 其中 hash.digest() 返回摘要,作为二进 ...

  4. HDU1244：Max Sum Plus Plus Plus

    题目链接:Max Sum Plus Plus Plus 题意:在n个数中取m段数使得这m段数之和最大,段与段之间不能重叠 分析:见代码 //dp[i][j]表示前i个数取了j段的最大值 //状态转移: ...

  5. poj 3243 Clever Y && 1467: Pku3243 clever Y【扩展BSGS】

    扩展BSGS的板子 对于gcd(a,p)>1的情况 即扩展BSGS 把式子变成等式的形式: \( a^x+yp=b \) 设 \( g=gcd(a,p) \) 那么两边同时除以g就会变成: \( ...

  6. Educational Codeforces Round 52 (Rated for Div. 2) F. Up and Down the Tree 树型DP

    题面 题意:给你一棵树,你起点在1,1也是根节点,你每次可以选择去你子树的某个叶子节点,也可以选择,从叶子节点返回距离不超过k的一个根, 也就是说,你从1开始,向下跳,选择一个叶子(就是没有子树的节点 ...

  7. java-通过反射获取目标类的属性,方法,构造器

    首先定义一个urse package com.studay_fanshe; public class User { private String uname; private int age; pri ...

  8. Workflow 规则大全 最新版

    ​对于怎么操作Workflow我就不重复说明了 大家可以搜索我的另一条微博.Workflow,作为一款提高效率的软件,我觉得很有必要进行推广,当然我比较需要这里面的很多规则,先为己再为公.首先我只是出 ...

  9. 《windows核心编程系列 》六谈谈线程调度、优先级和关联性

    线程调度.优先级和关联性 每个线程都有一个CONTEXT结构,保存在线程内核对象中.大约每隔20ms windows就会查看所有当前存在的线程内核对象.并在可调度的线程内核对象中选择一个,将其保存在C ...

  10. [Usaco2017 Feb]Why Did the Cow Cross the Road II (Platinum)

    Description Farmer John is continuing to ponder the issue of cows crossing the road through his farm ...