JS实现漂浮广告

<script language="javascript" type="text/javascript">
            // JavaScript Document
            //设置广告块
            var divLeft = 0;
            //设置广告块初始左边位置
            var divTop = 0;
            //设置广告块初始顶部位置
            var divWidth = 120;
            //设置广告块宽度
            var divHeight = 80;
            //设置广告块高度
            var divImg = "http://portal.nmc.ln.cmcc/PublishingImages/yunweiguanli.JPG";
            //设置广告图片的URL地址
            var divUrl = "http://net.chinamobile.com/";
            //设置广告链接
            var divTitle = "http://net.chinamobile.com/";
            //设置div标题
            document.write("<DIV id=\"adDiv\" style=\"position:absolute; left:"+divLeft);
            document.write("px; top:"+divTop+"px; width:"+divWidth+"px; height:"+divHeight);
            document.write("px; z-index:1;\" onMouseOver=\"javascript:window.clearInterval(varId)\"");
            document.write(" onMouseOut=\"javascript:beginMoveAd();\"><a style=\"font-size:12px;\" href=\"" + divUrl + "\" target=\"_blank\">");
            document.write("<img src=\"" + divImg + "\" border=\"0\" alt=\"" + divTitle + "\"></a><br>");
            //document.write("<a href=\"javascript:\" οnclick=\"document.getElementByIdx('adDiv').style.display='none';\">");
            //document.write("<font>关闭广告</font></a>");
            document.write("</DIV>");
            //飘浮广告
            var _stepx=2;_stepy=2;
            //初始化每次偏离的象素
            var moveSpeed=40;
            //速度
            var varId;
            //获取setInterval的ID
            function moveAd()
            {
             //飘浮广告主函数
             var adLeft=parseInt(adDiv.style.left);
             var adTop=parseInt(adDiv.style.top);
             var adWidth=parseInt(adDiv.style.width);
             var adHeight=parseInt(adDiv.style.height);
             var _bodyLeft=document.body.scrollLeft;
             var _bodyTop=document.body.scrollTop;
             var _bodyHeight=document.body.clientHeight+_bodyTop;
             var _bodyWidth=document.body.clientWidth+_bodyLeft;
             if(adLeft<=_bodyLeft)
             {
              _stepx=2;
             }
             if(adTop<=_bodyTop)
             {
              _stepy=2;
             }
             if((adLeft+adWidth)>=_bodyWidth)
             {
              _stepx=-2;
             }
             if((adTop+adHeight)>=_bodyHeight)
             {
              _stepy=-2;
             }
             adDiv.style.left=adLeft+_stepx;
             adDiv.style.top=adTop+_stepy;
            }

            function beginMoveAd()
            {
             //启动飘浮
             varId = window.setInterval("moveAd()",moveSpeed);
            }
             //给窗体的load事件附加飘浮函数
            window.οnlοad=beginMoveAd();
    </script>

<script language="javascript" type="text/javascript">
            // JavaScript Document
            //设置广告块
            var divImgLeft = 300;
            //设置广告块初始左边位置
            var divImgTop = 0;
            //设置广告块初始顶部位置
            var divImgWidth = 280;
            //设置广告块宽度
            var divImgHeight = 110;
            //设置广告块高度
            var divImg = "http://portal.nmc.ln.cmcc/Image%20Library/fz60.jpg";
            //设置广告图片的URL地址
            var divImgUrl = "";
            //设置广告链接
            var divImgTitle = "";
            //设置div标题
            document.write("<DIV id=\"imgDiv\" style=\"position:absolute; left:" + divImgLeft);
            document.write("px; top:" + divImgTop + "px; width:" + divImgWidth + "px; height:" + divImgHeight);
            document.write("px; z-index:1;\" onMouseOver=\"javascript:window.clearInterval(varImgId)\"");
            document.write(" onMouseOut=\"javascript:beginImgMoveAd();\"><a href=\"" + divImgUrl + "\" target=\"_blank\">");
            document.write("<img src=\"" + divImg + "\" border=\"0\" alt=\"" + divImgTitle + "\"></a><br>");
            //document.write("<a href=\"javascript:\" οnclick=\"document.getElementByIdx('adDiv').style.display='none';\">");
            //document.write("<font>关闭广告</font></a>");
            document.write("</DIV>");
            //飘浮广告
            var _stepImgx=3;_stepImgy=3;
            //初始化每次偏离的象素
            var moveImgSpeed=30;
            //速度
            var varImgId;
            //获取setInterval的ID
            function moveImg()
            {
             //飘浮广告主函数
                var imgLeft = parseInt(imgDiv.style.left);
                var imgTop = parseInt(imgDiv.style.top);
                var imgWidth = parseInt(imgDiv.style.width);
                var imgHeight = parseInt(imgDiv.style.height);
             var _bodyImgLeft=document.body.scrollLeft;
             var _bodyImgTop=document.body.scrollTop;
             var _bodyImgHeight=document.body.clientHeight+_bodyImgTop;
             var _bodyImgWidth=document.body.clientWidth+_bodyImgLeft;
             if (imgLeft <= _bodyImgLeft)
             {
                 _stepImgx = 3;
             }
             if (imgTop <= _bodyImgTop)
             {
                 _stepImgy = 3;
             }
             if ((imgLeft + imgWidth) >= _bodyImgWidth)
             {
                 _stepImgx = -3;
             }
             if ((imgTop + imgHeight) >= _bodyImgHeight)
             {
                 _stepImgy = -3;
             }
             imgDiv.style.left = imgLeft + _stepImgx;
             imgDiv.style.top = imgTop + _stepImgy;
            }

            function beginImgMoveAd()
            {
             //启动飘浮
                varImgId = window.setInterval("moveImg()", moveImgSpeed);
            }
             //给窗体的load事件附加飘浮函数
            window.onload = beginImgMoveAd();
    </script>

转载于:https://www.cnblogs.com/yinchengliang/archive/2012/07/10/2584604.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值