注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

火力光波的博客

火一般的热情 光一样的速度

 
 
 

日志

 
 

广告代码解析  

2010-03-05 22:23:58|  分类: 网页广告 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
 
漂浮图片广告代码解析  
 

<div id="ad" style="position:absolute"><a href="http://xuhui-8491.blog.163.com/" target="_blank"><img src="http://www.mftp.info/20140203/1392799441x1035949185.gif"border="0"></a></div>
<script>
var x = 50,y = 60 //[color=Maroon]浮动层的初始位置,分别对应层的初始X坐标和Y坐标
var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上
var step = 1 //层移动的步长,值越大移动速度越快
var delay = 5 //层移动的时间间隔,单位为毫秒,值越小移动速度越快
var obj=document.getElementById("ad") //捕获id为ad的层作为漂浮目标
function floatAD() {
var L=T=0 //层移动范围的左边界(L)和上边界(T)坐标
var R= document.body.clientWidth-obj.offsetWidth //层移动的右边界
var B = document.body.clientHeight-obj.offsetHeight //层移动的下边界
obj.style.left = x + document.body.scrollLeft //更新层的X坐标,实现X轴方向上的运动;document.body.scrollLeft为文档区域的滚动条向右拉的距离,以保证在滚动条右拉时层仍在可见范围内
obj.style.top = y + document.body.scrollTop //更新层的Y坐标,实现Y轴方向上的运动;document.body.scrollTop为文档区域的滚动条向下拉的距离,以保证在滚动条下拉时层仍在可见范围内
x = x + step*(xin?1:-1) //通过判断层的范围决定层在X轴上的运动方向
if (x < L) { xin = true; x = L} //层超出左边界时的处理
if (x > R){ xin = false; x = R} //层超出右边界时的处理
y = y + step*(yin?1:-1) //通过判断层的范围决定层在Y轴上的运动方向
if (y < T) { yin = true; y = T } //层超出上边界时的处理
if (y > B) { yin = false; y = B } //层超出下边界时的处理
}
var itl= setInterval("floatAD()", delay) //每delay秒执行一次floatAD函数
obj.onmouseover=function(){clearInterval(itl)} //层在鼠标移上时清除上面的间隔事件,实现层在的鼠标移上时停止运动的效果
obj.onmouseout=function(){itl=setInterval("floatAD()", delay)} //层在鼠标移开时开始间隔事件,实现层在的鼠标移开时继续运动的效果
</script>

 
如要看到显示效果,请将代码复制粘贴到“运行代码框”中测试!
 
 
 
翻滚图片广告代码解析
 

<!--将下面的代码复制到<head>~</head>里-->

<script>
<!--//

//定义图片的宽度和高度,所有的图片要有相同的尺寸;
var imgwidth=150
var imgheight=200

//下面定义了包含2个图片的数组,数组的下标从0开始,你可以增加任意的图片,按照顺序增加即可,注意相应增加数组下标。
var imgname=new Array()
imgname[0]="
http://hostingd.imagecross.com/image-hosting-03/728701.jpg"
imgname[1]="
http://hostingd.imagecross.com/image-hosting-03/304702.jpg"
imgname[2]="
http://hostingd.imagecross.com/image-hosting-03/373203.jpg"
imgname[3]="
http://www.mftp.info/20140203/1392796818x1035949185.jpg"
imgname[4]="
http://www.mftp.info/20140203/1392796966x1035949185.jpg"

//下面定义图片的url,如果不需要url,将连接值设置为"#";
var imgurl=new Array()
imgurl[0]="
http://xuhui-8491.blog.163.com/"
imgurl[1]="
http://xuhui8491.56.com/"
imgurl[2]="
http://xuhui-8491.blog.163.com/blog/static/80745891200951823056968/"
imgurl[3]="
http://xuhui-8491.blog.163.com/blog/static/8074589120095302751134/"
imgurl[4]="
http://xuhui-8491.blog.163.com/blog/static/8074589120095302751134/"

// 先预读图片,不要修改这里;
var imgpreload=new Array()
for (i=0;i<=imgname.length-1;i++) {
 imgpreload[i]=new Image()
 imgpreload[i].src=imgname[i]
}

var pause=2000

//图片的显示速度,数值小速度快;
var speed=20

//下面的参数也会影响图片显示的速度,数值小速度快;代表2个图片的显示间隔。
var step=10

//不要修改下面的代码;
var i_loop=0
var i_image=0

function stretchimage() {
 if (i_loop<=imgwidth) {
  if (document.all) {
   imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
  }
  i_loop=i_loop+step
  var timer=setTimeout("stretchimage()",speed)
   }
 else {
  i_loop=imgwidth
  clearTimeout(timer)
  imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>"
  var timer=setTimeout("shrinkimage()",pause)
 }
}

function shrinkimage() {
 if (i_loop>=0) {
  if (document.all) {
   imgcontainer.innerHTML="<a href='"+imgurl[i_image]+"' target='_blank'><img width='"+i_loop+"' height='"+imgheight+"' src='"+imgname[i_image]+"' border='0'></a>"
  }
  i_loop=i_loop-step
  var timer=setTimeout("shrinkimage()",speed)
   }
 else {
  i_loop=0
  clearTimeout(timer)
  changeimage()
 }
}

function changeimage() {
 i_image++
 if (i_image>=imgname.length) {i_image=0}
 if (document.layers) {
  document.imgcontainer.document.write("<a href='"+imgurl[i_image]+"' target='_blank'><img src='"+imgname[i_image]+"' border='0'></a>") 
  document.imgcontainer.document.close()
 }  
    stretchimage()
}

// -->
</script>
<style>
.containerstyle {
 position:absolute;
}
</style>

<!--将下面的代码复制到<body>里-->

<body onLoad="stretchimage()">

<!--将下面的代码复制到<body>~</body>里-->

<span id="imgcontainer" class="containerstyle"></span>

 
如要看到显示效果,请将代码复制粘贴到“在线编辑器”中测试!
 
相关连接:  图片轮换代码解析 
 
  返回目录
  评论这张
 
阅读(865)| 评论(12)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017