scroll 滚动广告

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
</head>
<body>
    <!-- 
    <style type="text/css">
    
        body{
            height: 3000px;
        }
    </style>
    <script type="text/javascript">
        window.onscroll=function(){   //onscroll  滚动事件
            alert('滚动了')
        }
    </script> -->



<!-- 
以下是上下左右居中特效
    <style type="text/css">
        .box{
            width:100px;
            height: 100px;
            background-color: yellow;
            position: absolute;
            right: 0;
            top:0;
        }
    </style>
    <div id="box" class="box"></div>
    <script type="text/javascript">
        var oDiv=document.getElementById('box');
        var ch=document.documentElement.clientHeight;  //获取可视区域的高度
        var cw=document.documentElement.clientWidth;//获取可视区域的宽度
        oDiv.style.top=(ch-oDiv.offsetHeight)/2+'px';  //  offsetHeight获取元素高度   包括边框
        oDiv.style.right=(cw-oDiv.offsetWidth)/2+'px';  //offsetWidth  元素高度获取 包括边框
    </script> -->



    <!-- <style type="text/css">
        #box{
            width:200px;
            height: 200px;
            background-color: yellow;
            position: absolute;
            right: 0px;
            top: 0px;
        }
    </style>
    <div id="box"></div>
    <script type="text/javascript">
        var oDiv=document.getElementById('box');
        var ch=document.documentElement.clientHeight;
        oDiv.style.top=(ch-oDiv.offsetHeight)/2+'px';    
    </script>

     -->



<!-- 下面代码  滚动时上下居中 -->
<!-- <style type="text/css">
body{
    height: 3000px
}
    #box{
        width: 200px;
        height: 200px;
        background: #333;
        position: absolute;
        right: 0px;
        top: 0px;
    }
</style>
<div id="box"></div>
<script type="text/javascript">
    var oDiv=document.getElementById('box');
    var ch=document.documentElement.clientHeight; //获取窗口可视高度
    //算元素在上下的位置居中  = （可视区 - 元素尺寸） / 2
      oDiv.style.top=(ch-oDiv.offsetHeight)/2+'px'; // 设置div的top  等于  可视高度减去元素高度差除以2
      window.onscroll=function(){
          var scrolltop=document.documentElement.scrollTop|document.body.scrollTop; //  获取文档 窗口滚动的高度     

                    // 在（quirk 模式）的时候 document.body.scrollTop 在 Internet Explorer, Firefox, Opera, Google Chrome Safari 返回正确的值。
                    // 在（quirk 模式）的时候 document.documentElement.scrollTop 永远是零

                    // 非quirk模式的时候 document.documentElement.scrollTop Internet Explorer, Firefox and Opera 返回正确的值 但是在 Google Chrome ，Safari 中永远是零

          oDiv.style.top=(ch-oDiv.offsetHeight)/2+scrolltop+'px';
      }

</script>
 -->




<!-- 浏览器判断

<style>
        body{height: 3000px;}
        #box{
            width: 200px;
            height: 100px;
            background-color: hotpink;
            position: fixed;
            _position: absolute;
            right: 0; top: 0;
        }
    </style>
 <div id="box"></div>
<script language="JavaScript">
        function getOs() {
            var OsObject = "";
           if(navigator.userAgent.indexOf("MSIE")>0) { 

                return "MSIE";
           }
           if(navigator.userAgent.indexOf("Firefox")>0){

                return "Firefox";
           }
           if(isSafari=navigator.userAgent.indexOf("Safari")>0) {

                return "Safari";
           } 
           if(isCamino=navigator.userAgent.indexOf("Camino")>0){

                return "Camino";
           }
           if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){

                return "Gecko";
           }
        }
     alert("您的浏览器类型为:"+getOs());

    </script> -->





<!-- 
    <style>
        body{height: 3000px;}
        #box{
            width: 200px;
            height: 100px;
            background-color: hotpink;
            position: fixed;
            _position: absolute;
            right: 0; top: 0;
        }
        body{
            _background-image: url('abc');
            _background-attachment: fixed;
        }
    </style>
    <div id="box"></div>
    <script>
    var oDiv = document.getElementById('box');
    var ch = document.documentElement.clientHeight;
    //算元素在上下的位置居中  = （可视区 - 元素尺寸） / 2
    oDiv.style.top = ch - oDiv.offsetHeight + 'px';

    window.onscroll = function(){

        //检测浏览器版本
        if(window.navigator.userAgent.indexOf('IE 6.0')!=-1){
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            oDiv.style.top = scrollTop + ch - oDiv.offsetHeight + 'px';
        }               
    }
    </script>
 -->




</body>
</html>
posted @ 2017-05-10 15:27 Jinsuo 阅读(168) 评论(0) 收藏举报
刷新页面返回顶部
jinsuo

scroll 滚动广告

公告
