JavaScript - 浮动广告窗口实例

原创 2015年04月26日 08:27:21

浮动广告窗口

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>浮动广告窗口</title>
<style type="text/css">
    #mydiv{
        width:100px;
        height:100px;
        background:#f00;
    }
    #content{
        text-align:center;
    }
    #adv{
        position:absolute;
        top:80px;
        left:60px;
    }
    #close{
        position:absolute;
        top:80px;
        left:164px;
    }
</style>
<script type="text/javascript">
        var advObj;
        var advTop;
        var advLeft;
        var closeObj;
        var closeTop;
        var closeLeft;

        //获取广告的初始位置
        function place(){
            advObj=$("adv");
            closeObj=$("close");
            if(advObj.currentStyle){
                advTop=advObj.currentStyle.top;
                advLeft=advObj.currentStyle.left;
                closeTop=closeObj.currentStyle.top;
                closeLeft=closeObj.currentStyle.left;               
            }else{
                advTop=parseInt(document.defaultView.getComputedStyle(advObj,null).top);
                advLeft=parseInt(document.defaultView.getComputedStyle(advObj,null).left);
                closeTop=parseInt(document.defaultView.getComputedStyle(closeObj,null).top);
                closeLeft=parseInt(document.defaultView.getComputedStyle(closeObj,null).left);              
            }
        }


    window.onload=function(){
        //var width=$("mydiv").style.width;

            //获取使用内嵌样式修饰的属性
/*          if($("mydiv").currentStyle){//判断客户端使得的浏览器
                var width=$("mydiv").currentStyle.width;
            }else{
                var width=document.defaultView.getComputedStyle($("mydiv"),null).width; //第二个参数表示伪元素,一般都设置为Null
            }
            alert(width);*/
            place();
            $("close").onclick=function(){
                $("close").style.display="none";
                $("adv").style.display="none";
            };

        };
        function scroll(){
            advObj.style.top=parseInt(advTop)+parseInt(document.documentElement.scrollTop)+"px";
            advObj.style.left=parseInt(advLeft)+parseInt(document.documentElement.scrollLeft)+"px";
            closeObj.style.top=parseInt(closeTop)+parseInt(document.documentElement.scrollTop)+"px";
            closeObj.style.left=parseInt(closeLeft)+parseInt(document.documentElement.scrollLeft)+"px";
        }       

        window.onscroll=function(){
            scroll();
        };
        function $(id){
            return document.getElementById(id);
        }
</script>
</head>
<body>
<!--<div id="mydiv">呵呵</div>-->
    <div id="content"><img src="images/contentpic.jpg" /></div>  
    <div id="adv"><img src="images/advpic.jpg" /></div>
    <div id="close"><img src="images/close.jpg" /></div>
</body>
</html>
版权声明:本文为博主原创文章,未经博主允许不得转载。

html+javascript实现广告窗自由浮动

首先介绍一种设置div初始位置的定位方法: .html代码如下: 层的移动 #ad{width:120px;height:120px;background:url(images/def...
  • yayun0516
  • yayun0516
  • 2014年11月27日 14:44
  • 3896

基于JQuery网页漂浮广告窗口Js详解

网页类似广告漂浮窗口的制作思路以及详细代码
  • u011427035
  • u011427035
  • 2016年04月06日 09:38
  • 6436

JavaScript浮动广告

js的浮动广告代码,复制就能用 图片浮动
  • qq_33899928
  • qq_33899928
  • 2017年12月05日 23:56
  • 22

网页浮动广告窗口

  • 2013年06月15日 16:25
  • 54KB
  • 下载

JavaScript对联式浮动广告

摘自:http://www.111cn.net/js_a/73/3504e367c04f83f9626cf9811a52c33b.htm var delta = 0.8; var col...
  • wbloveilove
  • wbloveilove
  • 2013年05月22日 21:11
  • 482

JavaScript-浮动广告-兼容

var hbcms_img_src = 'http://img.baidu.com/img/logo-zhidao.gif';// 图片地址 var hbcms_img_url = 'http://i...
  • yuyang2013
  • yuyang2013
  • 2013年03月13日 14:53
  • 357

浮动广告代码实例

很多网站的页面都有漂浮的广告效果,虽然烦人,但也确实起到了良好的宣传效果。 各大代码网站也有关于漂浮代码的实例,很多存在着兼容性问题,不符合W3C标准,本站修复了兼容性问题,下面就简单介绍一下如...
  • Return_KB
  • Return_KB
  • 2018年01月17日 15:17
  • 0

Javascript浮动广告图片代码,已封装!兼容性强!使用简单!

  • 2009年09月23日 15:50
  • 1KB
  • 下载

javascript浮动广告代码

  • 2007年07月05日 13:16
  • 4KB
  • 下载

浮动广告javascript

  • 2010年04月08日 02:52
  • 158KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:JavaScript - 浮动广告窗口实例
举报原因:
原因补充:

(最多只允许输入30个字)