一天一点前端知识

不点不走的广告

2017-11-30  本文已影响9人  akubaba
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>广告</title>
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        #one{
            width: 300px;
            height: 300px;
        }
        #two{
            width: 50px;
            height: 50px;
            background-color: red; 
        }
    </style>
</head>
<body>
    <div id="one">
        <a href="">这是视频1</a><br/>
        <a href="">这是视频2</a><br/>
    </div>
    <div id="two">
        <a href="流氓广告.html" target="_blank" onclick="fun1(this)">这是流氓广告</a><br/>
    </div>
</body>
<script type="text/javascript">
    document.getElementById("one").onmousemove=function(event){
        //1.获得鼠标的位置(clientX/Y)
        var x=event.clientX;
        var y=event.clientY;
        //2.设置id=two的div的位置为鼠标的位置
        var two=document.getElementById("two");
        two.style.position='absolute';
        two.style.top=(y-25)+'px';
        two.style.left=(x-25)+'px';
    }
    function fun1(a){
        //1.获得a标签的父标签
        //2.设置div的display属性为none
        a.parentNode.style.display='none';
    }
</script>
</html>
上一篇 下一篇

猜你喜欢

热点阅读