左侧分享到实例

效果图：

功能实现：正常情况下，只显示分享，当鼠标移到分享的时候，左边的内容显示。鼠标离开左边的内容隐藏。html代码：

<!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 type="text/css">
*{ margin:0px auto; padding:0px;}
#div1{width:120px; height:300px;  position:absolute; left:-120px; border:1px solid #CCC;}
#div1 span{ position:absolute; width:20px; height:60px; line-height:30px; vertical-align:middle; background:
#0CF; right:-20px; top:70px;
border-bottom-right-radius:7px; border-top-right-radius:7px;}
.biaoti{ width:120px; height:30px; background:#CCC; color:#000; font-weight:bold; vertical-align:middle; line-height:30px;margin-top:0px;}
#div1 ul{ float:left; width:120px;  }
#div1 ul li{ list-style:none; margin-top:10px; margin-left:10px; }
#div1 ul a{ text-decoration:none; color:#000;}
#div1 ul a:hover{ color:#F00;}
#div1 ul li img{ width:15px; height:15px; margin-right:10px;}
</style>

</head>

<body>
<div id="div1">
<div class="biaoti">分享到</div>
<ul>
    <a href="#"><li><img src="img/qq空间.png">QQ空间</li></a>
   <a href="#"> <li><img src="img/新浪微博.png">新浪微博</li></a>
    <a href="#"><li><img src="img/百度.png">百度搜藏</li></a>
   <a href="#"> <li><img src="img/人人.png">人人网</li></a>
    <a href="#"><li><img src="img/腾讯微博.png">腾讯微博</li></a>
   <a href="#"> <li><img src="img/开心网.png">开心网</li></a>
    <a href="#"><li><img src="img/腾讯.png">腾讯朋友</li></a>
    <a href="#"><li><img src="img/更多.png">更多</li></a>
</ul>
<span>分享</span>
</div>
</body>
</html>
View Code

js代码：

<script type="text/javascript">
window.onload=function(){
        var oDiv=document.getElementById('div1');
        oDiv.onmouseover=function(){
            startMove(0);
            }
            oDiv.onmouseout=function(){
            startMove(-120);
            }
    }
    var timer=null;
    function startMove(iTarget){
            var oDiv=document.getElementById('div1');
            clearInterval(timer);
            timer=setInterval(function(){
                var speed=0;
                if(oDiv.offsetLeft>iTarget){
                        speed=-10;
                    }
                    else{
                        speed=10;
                        }
                if(oDiv.offsetLeft==iTarget){
                    clearInterval(timer);
                    }
                    else{
                        oDiv.style.left=oDiv.offsetLeft+speed+'px';
                        }
                },30);
        }
    
</script>
View Code

 

posted on 2017-01-19 11:14  向前看！明天会更好！  阅读(111)  评论(0)  编辑  收藏  举报