zoukankan      html  css  js  c++  java
  • 平常项目中用到的分享到侧边栏

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>无标题文档</title>
    <style>
    #div1{100px; height:150px; background:#0F0; position:absolute; left:-100px;}
    #div1 span{position:absolute; 20px; height:60px; line-height:20px; background:#00F; right:-20px; top:50px;}


    </style>
    <script>
    window.onload=function(){
    var oDiv=document.getElementById('div1');
    oDiv.onmouseover=function(){


    startMove(10,0);


    }
    oDiv.onmouseout =function(){


    startMove(-10,-100);


    }

    }
    var timer=null;
    function startMove(speed,locall){
    var oDiv=document.getElementById('div1');
    clearInterval(timer);
    timer=setInterval(function(){
    if(oDiv.offsetLeft==locall){

    clearInterval(timer);

    }
    else{
    oDiv.style.left=oDiv.offsetLeft+speed+'px';


    }



    },30);



    }


    </script>
    </head>

    <body>
    <div id="div1">
    <span>分享到</span>
    </div>
    </body>
    </html>

  • 相关阅读:
    Easyui 表格底部加合计
    jQuery设置checkbox 为选中状态
    HTML 列表中的dl,dt,dd,ul,li,ol区别
    jQuery的toggle事件
    EasyUI 的日期控件单击文本框显示日历
    HTML设置span宽度
    JQuery获取与设置select
    生命周期
    钩子函数
    组件
  • 原文地址:https://www.cnblogs.com/dreamsboy/p/5358607.html
Copyright © 2011-2022 走看看