分享框——点击分享，从侧边弹出分享框 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
#div1 {width: 100px; height: 200px; background: red; position: absolute; left: -100px; top: 100px;}
#div2 {width: 30px; height: 60px; position: absolute; right: -30px; top: 70px; background: black; color: white; text-align: center;}
</style>
<script>
window.onload = function() {    
    var oDiv = document.getElementById('div1');    
    oDiv.onmouseover = function() {
        this.style.left = '0px'; //当鼠标移动到div1及子元素身上的时候，div1红框显示
    }    
    oDiv.onmouseout = function() {
        this.style.left = '-100px'; //当移出区域滑出屏幕
    }    
}
</script>
</head>
<body>
    <div id="div1">
        <div id="div2">分享到</div>
    </div>
</body>
</html>

 

posted @ 2017-04-14 13:32  念念念不忘  阅读(570)  评论(0)    收藏  举报