如何在HTML代码中插入一个漂浮图片

html-css040

如何在HTML代码中插入一个漂浮图片,第1张

这是JS代码实现的,需要编写JS脚本,然后在head区域引入JS文件,然后在body区加入相应JS的引用。

当然最快捷方便的方法就是百度去找个类似的源码就可以搞定了。漂浮源码很多的~ 一般是先HEAD引入JS文件,然后BODY或者其他地方加入JS调用代码 就可以实现了。

一般下载源码的地方会提示你怎么用。耐心找找

帮你测过了,IE10和chrome最新版都可以,你的是IE什么版本。50%是对的。

用IETester帮你测试了下,IE6、IE7、IE8都不能自适应排版。应该是.b_bo的样式边框问题,IE中padding和边框都会计算在总宽度之内,比如你2个50%是100%,但加上左右边框,100%就不够用了,就得换行。

解决方法:

去除.b_bo的边框,把边框加在内部的div上;

把50%改为49%,或是绝对宽度,建议你用px表示。因为你的总宽度是固定不变的。

<div id="ad" style="position:absolute">

<a href="http://xu-ni.net" target="_blank">

<img src="http://xu-ni.net/bbs/skins/copyright.gif" border="0">

</a></div>

<script>

var x = 50,y = 60

var xin = true, yin = true

var step = 1

var delay = 10

var obj=document.getElementById("ad")

function floatAD() {

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 <L) { xin = truex = L}

if (x >R){ xin = falsex = R}

y = y + step*(yin?1:-1)

if (y <T) { yin = truey = T }

if (y >B) { yin = falsey = B }

}

var itl= setInterval("floatAD()", delay)

obj.onmouseover=function(){clearInterval(itl)}

obj.onmouseout=function(){itl=setInterval("floatAD()", delay)}

</script>

把上面的代码放在需要放置广告的页面HTML代码的<body></body>之间

-----上面的代码说明-------

http://xu-ni.net //换成是漂浮图片点击后出现的页面,也就是点击后出现的详细的介绍页面

http://xu-ni.net/bbs/skins/copyright.gif //换成是漂浮广告图片的URL地址,最好采用绝对路径

var x = 50,y = 60 //浮动层的初始位置,分别对应层的初始X坐标和Y坐标

var xin = true, yin = true //判断层的X坐标和Y坐标是否在在控制范围之内,xin为真是层向右移动,否则向左;yin为真是层向下移动,否则向上

var step = 1 //层移动的步长,值越大移动速度越快

var delay = 10 //层移动的时间间隔,单位为毫秒,值越小移动速度越快