网站首页 手机版
 注册 登录
您现在的位置: 畅无忧设计 >> 网页特效 >> 广告特效 >> 正文
最新文章
· 一个Banner广告收缩效果
· 经典的Js漂浮广告代码
· 可关闭或最小化的右下角浮动广告
· 像163网站顶部展出的大幅广告
· 淘宝首页广告轮换效果插件Oslide
· 符合标准的随滚动条滚动的广告代码
· 6列的随滚动条上下滑动的广告效果
热门文章
 经典的Js漂浮广告代码
 6列的随滚动条上下滑动的广告效果
 一个Banner广告收缩效果
 淘宝首页广告轮换效果插件Oslide
 可关闭或最小化的右下角浮动广告
 像163网站顶部展出的大幅广告
 符合标准的随滚动条滚动的广告代码
相关文章
没有相关文章
经典的Js漂浮广告代码
来源:源码爱好者 更新时间:2010/11/10 9:11:57 阅读次数: 我要投稿
△运行 ☉预览 #复制 +收藏
特效代码:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>经典的Js漂浮广告代码</title>
</head>

<body>
<DIV id=img1 style="Z-INDEX: 100; LEFT: 2px; WIDTH: 59px; POSITION: absolute; TOP: 43px; HEIGHT: 61px;
 visibility: visible;"><a href="/" target="_blank"><img src="/effects/UploadFiles_7074/201011/2010111009221957.gif" width="80" height="80" border="0"></a>
</DIV>
<SCRIPT>
var xPos = 300;
var yPos = 200; 
var step = 1;
var delay = 30; 
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.body.clientWidth;
 height = document.body.clientHeight;
 Hoffset = img1.offsetHeight;
 Woffset = img1.offsetWidth;
 img1.style.left = xPos + document.body.scrollLeft;
 img1.style.top = yPos + document.body.scrollTop;
 if (yon) 
  {yPos = yPos + step;}
 else 
  {yPos = yPos - step;}
 if (yPos < 0) 
  {yon = 1;yPos = 0;}
 if (yPos >= (height - Hoffset)) 
  {yon = 0;yPos = (height - Hoffset);}
 if (xon) 
  {xPos = xPos + step;}
 else 
  {xPos = xPos - step;}
 if (xPos < 0) 
  {xon = 1;xPos = 0;}
 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();
</SCRIPT>
</body>
</html>

△运行 ☉预览 #复制 +收藏
特效说明:

  比较经典通用的Js物理弹性漂浮广告代码,漂浮速度适中、大小适中,是最经典最标准的漂浮广告代码了,推荐给大家使用。不过漂浮广告在一个页面上最好不要放太多,否则很影响网站浏览体验,得不偿失。

  • 上一篇文章:
  • 下一篇文章:
  • 关于我们 - 联系我们 - 广告服务 - 在线投稿 - 友情链接 - 网站地图 - 版权声明
    CopyRight 2008-2010, CWYDESIGN.COM - 畅无忧设计, Inc. All Rights Reserved
    滇ICP备09005765号