Javascript浮動廣告圖片代碼,已封裝!相容性強!使用簡單!

來源:互聯網
上載者:User

使用方法:

<mce:script type="text/javascript"><!--<br />FloatAd.newFloatAd("圖片路徑", "圖片連結URL","圖片開始時Top值", "圖片開始時Left值"); // 後兩個參數不寫為0預設從左上方滑出,可修改這兩個參數調整浮動圖片出現的位置<br />// --></mce:script>

完整源碼:

/**<br /> * AD Float Object<br /> *<br /> * @desc:Create a float ad with image: ad.jpg<br /> * @example:FloatAd.newFloatAd("image_path/ad.jpg");<br /> * @desc:Create a float ad with image and url: ad.jpg<br /> * @example:FloatAd.newFloatAd("image_path/ad.jpg", "http://blog.csdn.net/xxd851116/");<br /> *<br /> * @author: Xing,XiuDong :Last Editer<br /> * @date: 2009-09-17<br /> * @refers:http://www.ahbofcom.gov.cn/js/FloatAd.js<br /> */<br />FloatAd = {<br /> "ads" : new Object,<br /> /**<br /> * @param imgUrl : image path<br /> * @param strLink : image link address<br /> * @param top : image top at starting..<br /> * @param left : image left at starting..<br /> */<br /> "newFloatAd" : function(imgUrl, strLink, top, left) {<br /> var ad = document.createElement("a");<br /> ad.DirV = true;<br /> ad.DirH = true;<br /> ad.AutoMove = true;<br /> ad.Image = new Image;<br /> ad.Seed = Math.random();<br /> ad.Timer = setInterval("FloatAd.float(" + ad.Seed + ")", 20);<br /> this.ads[ad.Seed] = ad;<br /> ad.Image.Parent = ad;<br /> ad.style.position = "absolute";<br /> ad.style.left = left || 0;<br /> ad.style.top = top || 0;<br /> ad.Image.src = imgUrl;<br /> ad.Image.onmouseover = function(){this.Parent.AutoMove = false;};<br /> ad.Image.onmouseout = function(){this.Parent.AutoMove = true;};<br /> if(strLink) {<br /> ad.href = strLink;<br /> ad.Image.border = 0;<br /> ad.target = "_blank";<br /> }<br /> ad.appendChild(ad.Image);<br /> document.body.appendChild(ad);<br /> return ad;<br /> },<br /> "float" : function(floatId){<br /> var ad = this.ads[floatId];<br /> if(ad.AutoMove){<br /> var curLeft = parseInt(ad.style.left);<br /> var curTop = parseInt(ad.style.top);<br /> if(ad.offsetWidth + curLeft > document.documentElement.clientWidth + document.documentElement.scrollLeft - 1){<br /> curLeft = document.documentElement.scrollLeft + document.documentElement.clientWidth - ad.offsetWidth;<br /> ad.DirH = false;<br /> }<br /> if(ad.offsetHeight + curTop > document.documentElement.clientHeight + document.documentElement.scrollTop - 1){<br /> curTop = document.documentElement.scrollTop + document.documentElement.clientHeight - ad.offsetHeight;<br /> ad.DirV = false;<br /> }<br /> if(curLeft < document.documentElement.scrollLeft) {<br /> curLeft = document.documentElement.scrollLeft;<br /> ad.DirH = true;<br /> }<br /> if(curTop < document.documentElement.scrollTop) {<br /> curTop = document.documentElement.scrollTop;<br /> ad.DirV = true;<br /> }<br /> ad.style.left = curLeft + (ad.DirH ? 1 : -1) + "px";<br /> ad.style.top = curTop + (ad.DirV ? 1 : -1) + "px";<br /> }<br /> }<br />};

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.