啛喳 2017-09-20 04:00 采纳率: 66.7%
浏览 5590
已采纳

下面js中的图片右上角加个关闭按钮, 关闭功能已实现。

 <script> 
document.getElementById('close').addEventListener('click', function () {
    close();
},true)
function close(){
    Rimifon.close = true;
    ad.remove();
}
var Rimifon = { 
"timer" : null,
"close" : false,
"Ads" : new Object, 
"NewFloatAd" : function(imgUrl, strLink) 
{ 
var ad = document.createElement("div"); 
ad.DirV = true; 
ad.DirH = true; 
ad.AutoMove = true; 
ad.Image = new Image; 
ad.Seed = Math.random(); 
ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 10); 
this.timer = ad.Timer;
this.Ads[ad.Seed] = ad; 
ad.Image.Parent = ad; 
ad.style.position = "absolute"; 
ad.style.left = 0; 
ad.style.top = 0; 
ad.Image.src = imgUrl; 
ad.Image.onmouseover = function(){this.Parent.AutoMove = false;} 
ad.Image.onmouseout = function(){this.Parent.AutoMove = true;} 
if(strLink) 
{ 
ad.href = strLink; 
ad.Image.border = 0; 
ad.target = "_blank"; 
} 
ad.appendChild(ad.Image); 
document.body.appendChild(ad); 
return ad; 
}, 
"Float" : function(floatId) 
{ 
if(this.close){
    clearInterval(this.timer);
}
var ad = this.Ads[floatId]; 
if(ad.AutoMove) 
{ 
var curLeft = parseInt(ad.style.left); 
var curTop = parseInt(ad.style.top); 
if(ad.offsetWidth + curLeft > document.body.clientWidth + document.body.scrollLeft - 1) 
{ 
curLeft = document.body.scrollLeft + document.body.clientWidth - ad.offsetWidth; 
ad.DirH = false; 
} 
if(ad.offsetHeight + curTop > document.body.clientHeight + document.body.scrollTop - 1) 
{ 
curTop = document.body.scrollTop + document.body.clientHeight - ad.offsetHeight; 
ad.DirV = false; 
} 
if(curLeft < document.body.scrollLeft) 
{ 
curLeft = document.body.scrollLeft; 
ad.DirH = true; 
} 
if(curTop < document.body.scrollTop) 
{ 
curTop = document.body.scrollTop; 
ad.DirV = true; 
} 
ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px"; 
ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px"; 
} 
} 
} 
</script>
<script> 
var ad = Rimifon.NewFloatAd("http://www.jb51.net/images/logo.gif"); 
ad.style.left = 500; 
ad.style.top = 456; 
ad.Image.width = 200; 
ad.Image.height = 200; 

</script> 
  • 写回答

3条回答 默认 最新

  • Go 旅城通票 2017-09-20 05:59
    关注
     <script>
        var Rimifon = {
            "Ads": new Object,
            "NewFloatAd": function (imgUrl, strLink,canClose) {
                var ad = document.createElement("a");
                ad.DirV = true;
                ad.DirH = true;
                ad.AutoMove = true;
                ad.Image = new Image;
                ad.Seed = Math.random();
                ad.Timer = setInterval("Rimifon.Float(" + ad.Seed + ")", 50);
                this.Ads[ad.Seed] = ad;
                ad.Image.Parent = ad;
                ad.style.position = "absolute";
                ad.style.left = 0;
                ad.style.top = 0;
                ad.Image.src = imgUrl;
                ad.Image.onmouseover = function () { this.Parent.AutoMove = false; }
                ad.Image.onmouseout = function () { this.Parent.AutoMove = true; }
                if (strLink) {
                    ad.href = strLink;
                    ad.Image.border = 0;
                    ad.target = "_blank";
                }
                            //////////////////////////////////////////
                if (canClose) {
                    var closeA = document.createElement('a');
                    closeA.style.cssText = 'position:absolute;right:0;top:-20px;line-height:20px;cursor:pointer';
                    closeA.innerHTML = '关闭';
                    ad.appendChild(closeA);
                    ad.onclick = function () { clearInterval(ad.Timer);ad.parentNode.removeChild(ad)}
                }
                            //////////////////////////////////////////
                ad.appendChild(ad.Image);
                document.body.appendChild(ad);
                return ad;
            },
            "Float": function (floatId) {
                var ad = this.Ads[floatId];
                if (ad.AutoMove) {
                    var curLeft = parseInt(ad.style.left);
                    var curTop = parseInt(ad.style.top);
                    if (ad.offsetWidth + curLeft > document.body.clientWidth + document.body.scrollLeft - 1) {
                        curLeft = document.body.scrollLeft + document.body.clientWidth - ad.offsetWidth;
                        ad.DirH = false;
                    }
                    if (ad.offsetHeight + curTop > document.body.clientHeight + document.body.scrollTop - 1) {
                        curTop = document.body.scrollTop + document.body.clientHeight - ad.offsetHeight;
                        ad.DirV = false;
                    }
                    if (curLeft < document.body.scrollLeft) {
                        curLeft = document.body.scrollLeft;
                        ad.DirH = true;
                    }
                    if (curTop < document.body.scrollTop) {
                        curTop = document.body.scrollTop;
                        ad.DirV = true;
                    }
                    ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px";
                    ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px";
                }
            }
        }
    </script><body>
        <div style="width:30cm;height:40cm"></div>
    </body>
    <script>
        var ad = Rimifon.NewFloatAd("http://www.jb51.net/images/logo.gif",false,true);
        ad.style.left = 500;
        ad.style.top = 456;
        ad.Image.width = 88;
        ad.Image.height = 31;
    </script>
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)

报告相同问题?

悬赏问题

  • ¥15 MATLAB怎么通过柱坐标变换画开口是圆形的旋转抛物面?
  • ¥15 寻一个支付宝扫码远程授权登录的软件助手app
  • ¥15 解riccati方程组
  • ¥15 display:none;样式在嵌套结构中的已设置了display样式的元素上不起作用?
  • ¥15 使用rabbitMQ 消息队列作为url源进行多线程爬取时,总有几个url没有处理的问题。
  • ¥15 Ubuntu在安装序列比对软件STAR时出现报错如何解决
  • ¥50 树莓派安卓APK系统签名
  • ¥65 汇编语言除法溢出问题
  • ¥15 Visual Studio问题
  • ¥20 求一个html代码,有偿