<div style="width:100pxheight:100pxposition:fixedz-index:99left:0top:50%margin-top:-50px">内容</div>
1、使用css中的flaot属性就可以了,首先打开Dreamweaver,创建html文件:
2、然后先给页面设置背景颜色,创建段落两个段落,段落上面设置2张图片的float属性,分别让它们左右浮动,值为left和right,最后打开浏览器:
3、打开浏览器后即可看到效果,两张图片分别浮动在文本的左右两边,文字则是围绕在图片周围.。以上就是在html中让图片浮动的方法:
修改了!你应该是希望滚动条不管在什么位置 这个层都是可见的对吧? 最原始的那个可以滚动不可见区域。 晚上我又改了一下 对xxx_div做了一下修改。 看看能否满足你的要求
在body的可见区域漂浮!
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>经典的js物理弹性漂浮图片广告代码丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<p class="intro_p"><body style="margin:0padding:0">
<div id="xxx_div" style=" left: expression(0)border:0px #ccc solidWIDTH: 100%POSITION: absoluteTOP: expression(body.scrollTop)HEIGHT: 100%left: 0pxtop: 0px"></div>
<div>
<DIV id=img1 style="Z-INDEX: 100LEFT: 2pxWIDTH: 59pxPOSITION: absoluteTOP: 43pxHEIGHT: 61px
visibility: visible"><a href="" target="_blank"><img src="" width="250" height="60" border="0"></a></DIV>
<div align="center">
<p>
<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()
{
var objd = document.getElementById("xxx_div")
//width = document.body.clientWidth
//height = document.body.clientHeight
width = objd.clientWidth
height = objd.clientHeight
Hoffset = img1.offsetHeight
Woffset = img1.offsetWidth
img1.style.left = xPos + objd.offsetLeft
img1.style.top = yPos + objd.offsetTop
if (yon)
else
if (yPos <0)
if (yPos >= (height - Hoffset))
if (xon)
else
if (xPos <0)
if (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>
</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>js物理弹性漂浮广告</p>
<p></p>
<p></p>
</div>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>asdsad
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>asdasd
</body>
</html>
下面这个是在指定定的小窗口内飘动,我改了一下测试可以运行:
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />
<title>经典的js物理弹性漂浮图片广告代码丨芯晴网页特效丨CsrCode.Cn</title>
</head>
<p class="intro_p"><body>
<div id="xxx_div" style="top:20pxleft:50pxwidth:600pxheight:500pxborder:2px #ccc solid"></div>
<div>
<DIV id=img1 style="Z-INDEX: 100LEFT: 2pxWIDTH: 59pxPOSITION: absoluteTOP: 43pxHEIGHT: 61px
visibility: visible"><a href="" target="_blank"><img src="" width="250" height="60" border="0"></a></DIV>
<div align="center">
<p>
<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()
{
var objd = document.getElementById("xxx_div")
//width = document.body.clientWidth
//height = document.body.clientHeight
width = objd.clientWidth
height = objd.clientHeight
Hoffset = img1.offsetHeight
Woffset = img1.offsetWidth
img1.style.left = xPos + objd.offsetLeft
img1.style.top = yPos + objd.offsetTop
if (yon)
else
if (yPos <0)
if (yPos >= (height - Hoffset))
if (xon)
else
if (xPos <0)
if (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>
</p>
<p></p>
<p></p>
<p></p>
<p></p>
<p></p>
<p>js物理弹性漂浮广告</p>
<p></p>
<p></p>
</div>
</body>
</html>