您現在的位置: 365建站網 > 365學習 > 懸浮廣告/按鈕制作實例

懸浮廣告/按鈕制作實例

文章來源:365jz.com     點擊數:533    更新時間:2018-11-04 08:12   參與評論

懸浮廣告有三種形式

懸浮側欄(120*270)、懸浮按鈕(100*100)和懸浮視窗(300*250)。

懸浮側欄 可以配置在兩側同時展現,或在僅左側,僅右側進行展現。當兩側同時展現的時候,通常情況下,左右兩側的推廣物料和內容是不同的,關閉一側的側欄不影響另一側側欄的展示?!?/p>

懸浮按鈕 可以配置在兩側同時展現,或在僅左側,僅右側進行展現。在兩側同時展現的時候,通常情況下,左右兩側的推廣物料和內容是不同的,關閉一側的側欄不影響另一側側欄的展示。

懸浮視窗 只能在窗口右下角進行展示。


懸浮廣告/按鈕制作實例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="http://www.hugecrab.com/images/common/close-ad.gif">
</a>
</div>


如對本文有疑問,請提交到交流論壇,廣大熱心網友會為你解答??! 點擊進入論壇


發表評論 (533人查看,0條評論)
請自覺遵守互聯網相關的政策法規,嚴禁發布色情、暴力、反動的言論。
用戶名: 驗證碼: 點擊我更換圖片
最新評論
------分隔線----------------------------
自拍偷拍福力视频,偷拍国际精品,麻豆一区福利电影,国产网红视频午夜福利,se视频大全,久久国产AV影院 久久爱高清免费| 一边吃乳一手摸下面| 11一14萝裸体自慰| 欧美欧洲成本大片免费| zozo女人与牛交| mm131美女图片高清图片| 韩国男男腐啪gv肉视频| 色情视频| 无码伊人久久大杳蕉中文无码| a毛片免费全部播放无码| 苍井空电影在线观看| 米奇影视| 少妇人妻偷人精品免费视频| 亚洲免费中文不卡高清有码| 午夜神器18以下不能进免费| 被窝影院午夜看片爽爽软件| 中国厕所偷窥bbw| 丝袜亚洲精品中文字幕一区| 香港三级强奷在线观看| 人体艺术摄影| 在线观看免费人成视频| a亚洲影视在线观看| 免费人成动漫在线观看播放| 体育生小鲜肉勃起videos| 我和么公的秘密| 无码网站天天爽免费看视频| 色综合另类小说图片区| 暖暖中国在线观看免费直播| 被强奸很舒服好爽好爽| 亚洲av人成网站高清| 日本无卡码高清免费v| http://www.geld-verdienen-im-www.net