zoukankan      html  css  js  c++  java
  • 简单的广告窗跟随滚动条滚动的效果

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    *{
    margin: 0;
    padding: 0;
    }
    body{
    height:5000px;
    }
    #side{
    50px;
    height: 100px;
    background-color: #000000;
    position:absolute;
    right: 0;
    top:45%;
    }
    </style>
    </head>
    <body>
    <div id="side">

    </div>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">

    $(function() {
    var $sidebar = $("#side");
    var $window = $(window);
    $window.scroll(function() {
    $sidebar.stop(true).animate({
    'marginTop': $window.scrollTop()
    },1000);

    });
    window.onload=function(){
    $(window).trigger('scroll'); //页面加载完毕后自动触发事件
    };
    $(window).resize(function(){
    $(window).trigger('scroll'); //刷新窗口的scroll事件
    })
    });



    </script>
    </body>
    </html>

  • 相关阅读:
    JavaScript之正则表达式
    BOM之本地数据存储
    BOM之定时器
    BOM之window核心模块
    BOM简介
    DOM之元素定位
    DOM之事件
    DOM之节点操作
    DOM简介
    linux机制
  • 原文地址:https://www.cnblogs.com/luoguixin/p/6271598.html
Copyright © 2011-2022 走看看