<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=UTF-8" />
<title>jquery浮动层</title>
<style type="text/css">
#Float {background-color: #000height: 200pxwidth: 100pxposition: absolutetop: 80pxright: 20px}
</style>
</head>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script language="javascript">
$(document).ready(function(){
$(window).scroll(function (){
var offsetTop = $(window).scrollTop() + 80 +"px"
$("#Float").animate({top : offsetTop },{ duration:500 , queue:false })
})
})
</script>
<body>
<div style="height:2000px"></div>
<div id="Float"></div>
</body>
</html>
首先根据需求我们需要一个按钮，一个弹出窗口层；OK，废话不多说；
按钮就用一个基本的：
<button class="btn">Click me</button>
<div class="dialog">我是浮动的窗口</div>
我们要给浮动层设置一下样式
.dialog{width:200pxheight:200pxborder:solid 1px #000position:absoluteright:10pxtop:100pxline-height:200pxtext-align:centerdisplay:none}
OK ,下面就是JS部分：
首先需要引入一个JS库，版本自己定义：
然后给按钮添加相应的点击事件，让点击button的时候，显示出浮动层
$(".btn").click(function(){
$(".dialog").show(100)
})
1、使用css中的flaot属性就可以了，首先打开Dreamweaver，创建html文件：
2、然后先给页面设置背景颜色，创建段落两个段落，段落上面设置2张图片的float属性，分别让它们左右浮动，值为left和right，最后打开浏览器：
3、打开浏览器后即可看到效果，两张图片分别浮动在文本的左右两边，文字则是围绕在图片周围.。以上就是在html中让图片浮动的方法：
