| Js浮动广告效果实现 | 您所在的位置：网站首页 › javascript漂浮广告 › Js浮动广告效果实现 |
Js浮动广告效果实现
|
第一种 漂浮广告 不符合W3CJavaScript漂浮广告代码，很不错，代码精简，不过一次只有漂一个，复制就能用了。希望站长朋友喜欢。  
漂浮广告
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("codefans_net")
function float() {
var L=T=0
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y B) { yin = false; y = B }
}
var itl= setInterval("float()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("float()", delay)}
View Code
第二种 漂浮广告 不符合标准Js漂浮广告代码，比较经典的浮动广告，到现还很实用，如果你是一位站长的话，这种代码是必备的，希望对你有用处。 1 2 3 4 5 漂浮广告 6 7 8 10 11 var xPos = 300; 12 var yPos = 200; 13 var step = 1; 14 var delay = 30; 15 var height = 0; 16 var Hoffset = 0; 17 var Woffset = 0; 18 var yon = 0; 19 var xon = 0; 20 var pause = true; 21 var interval; 22 img1.style.top = yPos; 23 function changePos() 24 { 25 width = document.body.clientWidth; 26 height = document.body.clientHeight; 27 Hoffset = img1.offsetHeight; 28 Woffset = img1.offsetWidth; 29 img1.style.left = xPos + document.body.scrollLeft; 30 img1.style.top = yPos + document.body.scrollTop; 31 if (yon) 32 {yPos = yPos + step;} 33 else 34 {yPos = yPos - step;} 35 if (yPos = (height - Hoffset)) 38 {yon = 0;yPos = (height - Hoffset);} 39 if (xon) 40 {xPos = xPos + step;} 41 else 42 {xPos = xPos - step;} 43 if (xPos = (width - Woffset)) 46 {xon = 0;xPos = (width - Woffset); } 47 } 48 49 function start() 50 { 51 img1.visibility = "visible"; 52 interval = setInterval('changePos()', delay); 53 } 54 function pause_resume() 55 { 56 if(pause) 57 { 58 clearInterval(interval); 59 pause = false;} 60 else 61 { 62 interval = setInterval('changePos()',delay); 63 pause = true; 64 } 65 } 66 start(); 67 68 69第三种 符合W3C的漂浮广告代码
DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
符合W3C的漂浮广告代码-脚本之家
document.write (" ")
document.write (" ")
document.write ("  ")
document.write (" ")
var xPos = 300;
var yPos = 200;
var step = 1;
var delay = 8;
var height = 0;
var Hoffset = 0;
var Woffset = 0;
var yon = 0;
var xon = 0;
var pause = true;
var interval;
img1.style.top = yPos;
function changePos()
{
width = document.documentElement.clientWidth;
height = document.documentElement.clientHeight;
Hoffset = img1.offsetHeight;
Woffset = img1.offsetWidth;
img1.style.left = xPos + document.documentElement.scrollLeft;
img1.style.top = yPos + document.documentElement.scrollTop;
if (yon)
{yPos = yPos + step;}
else
{yPos = yPos - step;}
if (yPos = (height - Hoffset))
{yon = 0;yPos = (height - Hoffset);}
if (xon)
{xPos = xPos + step;}
else
{xPos = xPos - step;}
if (xPos = (width - Woffset))
{xon = 0;xPos = (width - Woffset); }
}
function start()
{
img1.visibility = "visible";
interval = setInterval('changePos()', delay);
}
function pause_resume()
{
if(pause)
{
clearInterval(interval);
pause = false;}
else
{
interval = setInterval('changePos()',delay);
pause = true;
}
}
start();
View Code
第四种 常用网页漂浮广告代码
var x = 50,y = 60
var xin = true, yin = true
var step = 1
var delay = 10
var obj=document.getElementById("www_qpsh_com")
function floatwww_qpsh_com() {
var L=T=0
//by www.qpsh.com
var R= document.body.clientWidth-obj.offsetWidth
var B = document.body.clientHeight-obj.offsetHeight
obj.style.left = x + document.body.scrollLeft
obj.style.top = y + document.body.scrollTop
x = x + step*(xin?1:-1)
if (x R){ xin = false; x = R}
y = y + step*(yin?1:-1)
if (y B) { yin = false; y = B }
}
var itl= setInterval("floatwww_qpsh_com()", delay)
obj.onmouseover=function(){clearInterval(itl)}
obj.onmouseout=function(){itl=setInterval("floatwww_qpsh_com()", delay)}
View Code
第五种 亲自实践过，可以实现从左上角自动移动到右下角 说明：jquery在1.9开始不支持.live()方法的写法而改用.on()，见http://jquery.com/upgrade-guide/1.9/#live-removed.该插件中关闭图片链接使用了.live().请根据自己情况自行修改.
(function ($) {
$.fn.floatAd = function (options) {
var defaults = {
imgSrc: "/web/Images/logo.gif", //漂浮图片路径
url: "http://www.baidu.com", //图片点击跳转页
openStyle: 1, //跳转页打开方式 1为新页面打开 0为当前页打开
speed: 10 //漂浮速度 单位毫秒
};
var options = $.extend(defaults, options);
var _target = options.openStyle == 1 ? "target='_blank'" : '';
var html = "";
html += " |
【本文地址】
公司简介
联系我们