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>



  • 相关阅读:
    并查集(Java实现)
    Flask入门HelloWorld
    归并排序及优化(Java实现)
    用IDEA生成javadoc文档
    windows下安装Virtualenvwrapper
    模板方法模式Template Method(Java实现)
    部署Flask项目到腾讯云服务器CentOS7
    冒泡排序及优化(Java实现)
    迭代器模式Iterator(Java实现)
    堆排序(Java数组实现)
  • 原文地址:https://www.cnblogs.com/jingangel/p/2394002.html
Copyright © 2011-2022 走看看