您现在的位置: 365建站网 > 365学习 > 悬浮广告/按钮制作实例

悬浮广告/按钮制作实例

文章来源:365jz.com     点击数:251    更新时间:2018-11-04 08:12   参与评论

悬浮广告有三种形式

悬浮侧栏(120*270)、悬浮按钮(100*100)和悬浮视窗(300*250)。

悬浮侧栏 可以配置在两侧同时展现,或在仅左侧,仅右侧进行展现。当两侧同时展现的时候,通常情况下,左右两侧的推广物料和内容是不同的,关闭一侧的侧栏不影响另一侧侧栏的展示。 

悬浮按钮 可以配置在两侧同时展现,或在仅左侧,仅右侧进行展现。在两侧同时展现的时候,通常情况下,左右两侧的推广物料和内容是不同的,关闭一侧的侧栏不影响另一侧侧栏的展示。

悬浮视窗 只能在窗口右下角进行展示。


悬浮广告/按钮制作实例1:

<style type="text/CSS">
    div{
    position:relative;
    width: 200px;
    height: 200px;
    }
    img{
    width: 200px;
    height: 200px;
    position: absolute;
    border-radius: 50%;
    }
</style>
</head>
<body>
    <div id="floatdiv"><img src="img/god.gif"></div>
</body>
</HTML>
<script type="text/JavaScript">
    var div=document.getElementById("floatdiv");
    var x=0,y=0;
    var xSpeed=2,ySpeed=2;
    var w=document.body.clientWidth-200,h=document.body.clientHeight-100;
    function floatdiv(){
     if(x>w||x<0) xSpeed= -xSpeed;
     if(y>h||y<0) ySpeed= -ySpeed;
     x+=xSpeed;
     y+=ySpeed;
     div.style.top=y+"px";
     div.style.left=x+"px";
    setTimeout("floatdiv()",10);
    }
    floatdiv();
</script>


悬浮广告/按钮制作实例2:

<!doctype html>
<html>
<he>
    <meta charset="utf-8">
    <title>广告</title>
    <style type="text/css">
        *{
            pding:0px;
            margin:0px;
        }
        #ad{
            position:absolute;
            left:0px;
            top:0px;
            width:200px;
            height:50px;
            line-height:50px;
            text-align:center;
            color:black;
            background-color:orange;
            border-rius: 2%;
        }
    </style>
</he>
<body>
    <p id="ad">广告位招商</p>
</body>
<script type="text/javascript">
    //获取img
    ad=document.getElementById("ad");
    //初始化横坐标
    x=0;
    //设置纵坐标
    y=0;
    //设置加速度
    yv=10;
    xv=10;
    function fun(){
        //范围
        //左右
        if(x<0||x>window.innerWidth-ad.offsetWidth){
            xv=-xv;
        }
        //上下
        if(y<0||y>window.innerHeight-ad.offsetHeight){
            yv=-yv;
        }
        x+=xv;
        y+=yv;
        //获取到的x值赋值给ad的left
        ad.style.left=x+"px";
        //获取到的y值赋值给ad的top
        ad.style.top=y+"px";
    }
    mytime=setInterval(fun,100);
 
    //给ad绑定鼠标移入事件
    ad.onmouSEOver=function(){
        //清除定时器
        clearInterval(mytime);
    }
    //鼠标移出
    ad.onmouseout=function(){
        mytime=setInterval(fun,100);
    }
</script>
</html>


悬浮广告/按钮制作实例3:

<div class="close-ad" style=" position: fixed; right: 0; bottom: 260px;cursor:pointer;">
<a title="关闭" onclick="this.style.display='none';document.getElementById('广告盒子id').style.display='none'" href="javascript:void(0)">
<img src="https://www.365jz.com/images/common/close-ad.gif">
</a>
</div>


如对本文有疑问,请提交到交流论坛,广大热心网友会为你解答!! 点击进入论坛


发表评论 (251人查看0条评论)
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
用户名: 验证码: 点击我更换图片
最新评论
------分隔线----------------------------