<!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. Ordeby then by

    先按orderby排序,再按thenby排序 return PartialView("_ClickRangeOnCategory", articles.OrderByDescend ...

  2. 11_传智播客iOS视频教程_NS前缀和@符号

    NS前缀的有NSLog和NSString Cocoa就是用来开发带界面的应用程序. Foundation框架之中的类.函数绝大多数都是从NextStep来的.看到NS前缀就知道这个类是从哪里来的.是很 ...

  3. 关于netty的简单实现

    1. 新建两个maven项目, 分别为 netty-server: netty的服务端: 消息的消费者 netty-client: netty的客户端: 消息的生产者 2. 分别引入netty的mav ...

  4. poj2676 Sudoku（搜索）

    题目链接:http://poj.org/problem?id=2676 题意:9*9的方格,0代表没数字,其他代表数字,请在格子中填入1~9的数字,使得在每行,每列和每个3*3的方块中,1~9的数字每 ...

  5. mysql 安装命令

    mysqld install MySQL --defaults-file="D:\worksoft\mysql-5.7.17-winx64\my-default.ini" D:\w ...

  6. Kafaka入门篇

    1.Apache Kafka - 简介 Apache Kafka是一个分布式发布 - 订阅消息系统和一个强大的队列,可以处理大量的数据,并使您能够将消息从一个端点传递到另一个端点. Kafka适合离线 ...

  7. php 打包下载

    <?php class zipfile { var $datasec = array (); var $ctrl_dir = array (); var $eof_ctrl_dir = &quo ...

  8. bzoj1233 [Usaco2009Open]干草堆tower 【单调队列dp】

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=1233 单调队列优化的第一题,搞了好久啊,跟一开始入手斜率优化时感觉差不多... 这一题想通了 ...

  9. 题解报告：hdu 1220 Cube

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1220 问题描述 Cowl擅长解决数学问题. 有一天,一位朋友问他这样一个问题:给你一个边长为N的立方体 ...

  10. 423 Reconstruct Original Digits from English 从英文中重建数字

    给定一个非空字符串,其中包含字母顺序打乱的英文单词表示的数字0-9.按升序输出原始的数字.注意:    输入只包含小写英文字母.    输入保证合法并可以转换为原始的数字,这意味着像 "ab ...