zoukankan      html  css  js  c++  java
  • 用js实现分享到随页面滚动而滑动效果

    页面向上向下滚动,分享到的模块随着滑动。

    要点:

    var scrtop =document.documentElement.scrollTop||document.body.scrollTop;
    var height = document.documentElement.clientHeight||document.body.clientHeight;
    var top = scrtop + (height - share.offsetHeight)/2;
    top = parseInt(top);

    获得页面垂直居中的位置

    上代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="gb2312" />
    <title>无标题文档</title>
    <style>
    body
    {margin:0; padding:0; font:12px/1.5 arial; height:2000px;}
    #share
    {width:100px; height:200px; line-height:200px; text-align:center; border:1p solid #ccc; background:#f5f5f5; position:absolute; left:-100px; top:0;}
    #share_tit
    {position:absolute; right:-20px; top:60px; width:20px; height:60px; padding:10px 0; background:#06c; text-align:center; line-height:18px; color:#fff;}
    </style>
    <script>
    /*jingangel http://www.cnblogs.com/jingangel/ */
    window.onload
    = function(){
    var share = document.getElementById("share");
    share.onmouseover
    = function(){
    startrun(share,
    0,"left")
    }
    share.onmouseout
    = function(){
    startrun(share,
    -100,"left")
    }
    window.onscroll
    = window.onresize = function(){
    var scrtop =document.documentElement.scrollTop||document.body.scrollTop;
    var height = document.documentElement.clientHeight||document.body.clientHeight;
    var top = scrtop + (height - share.offsetHeight)/2;
    top = parseInt(top);
    startrun(share,top,
    "top")
    }
    }

    var timer = null
    function startrun(obj,target,direction){
    clearInterval(timer);
    timer
    = setInterval(function(){
    var speed = 0;

    if(direction == "left"){
    speed
    = (target-obj.offsetLeft)/8;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);

    if(obj.offsetLeft == target){
    clearInterval(timer);
    }
    else{
    obj.style.left
    = obj.offsetLeft + speed + "px";
    }
    }

    if(direction == "top"){
    speed
    = (target-obj.offsetTop)/8;
    speed = speed>0?Math.ceil(speed):Math.floor(speed);

    if(obj.offsetTop == target){
    clearInterval(timer);
    }
    else{
    obj.style.top
    = obj.offsetTop + speed + "px";
    }
    document.title
    = obj.offsetTop + ',' + target + ',' +speed;
    }

    },
    30)
    }
    </script>
    </head>

    <body>

    <div id="share">
    分享到内容
    <span id="share_tit">分享到</span>
    </div>

    </body>
    </html>



  • 相关阅读:
    宋宝华:slab在内核内存管理和用户态Memcached的双重存在
    能感知功耗的Linux调度器(EAS)
    内存检测王者之剑—valgrind
    随心所动,厂商的CPU核管理策略介绍
    一文读懂 进程怎么绑定 CPU
    Fastbootd实现原理分析
    cachestat、cachetop、pcstat-linux系统缓存命中率分析工具
    WIFI的WPS和pin码(测试失败)
    视频下载(钉钉、B站等) 解决方案
    DevExpress 报表设计文件(.vsrepx)不显示或显示空白
  • 原文地址:https://www.cnblogs.com/jingangel/p/2394002.html
Copyright © 2011-2022 走看看