jquery 任意位置浮动层(网页右下浮动层)

最终效果

floatshow.rar(85.2 KB)

/*任意位置浮动固定层*/
/*没剑(http://regedit.cnblogs.com) 08-03-11*/
/*说明：可以让指定的层浮动到网页上的任何位置，当滚动条滚动时它会保持在当前位置不变，不会产生闪动*/
/*调用：
1 无参数调用：默认浮动在右下角
$("#id").floatdiv();

2 内置固定位置浮动
//右下角
$("#id").floatdiv("rightbottom");
//左下角
$("#id").floatdiv("leftbottom");
//右下角
$("#id").floatdiv("rightbottom");
//左上角
$("#id").floatdiv("lefttop");
//右上角
$("#id").floatdiv("righttop");
//居中
$("#id").floatdiv("middle");

3 自定义位置浮动
$("#id").floatdiv({left:"10px",top:"10px"});

$("#id").floatdiv({bottom:"0px",right:"0px"});右下浮动可以调整
以上参数，设置浮动层在left 10个像素,top 10个像素的位置
*/

这个浮动层最牛B的地方是在拖动滚动条的时候没有虚影，相当强悍

使用方法

头部载入jquery 和 插件JS

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.floatDiv.js"></script>

2:在body中使用jquery

<script>
$(function(){
 $("#eMeng").floatdiv({bottom:"0px",right:"20px"});
});

另外可以把浮动的内容用ajax载入。可以使页面非常清晰。

同时把css也用js载入可以实现一个JS能用在很多页面。

我把我写的浮动内容放到一个myuse.js中了，附件中有下载，大家自已看。在ie firefox里都可以用的

------------------------------------------------------

最后用改用如下方式

先加载div 和css 显示载入中图片 在网页加载完成后再执行载入div的innerHTML

document.write('<link href=\"dl.css\" rel=\"stylesheet\" type=\"text/css\" />');
document.write('<div id=\"eMeng\" style=\"width: 300px; height: 100px;\"><img src=images/loading.gif></div>');
$(document).ready(function(){
 $("#eMeng").floatdiv({bottom:"0px",right:"20px"});
});
$(document.body).ready(function(){
 $('#eMeng').load("http://www.cdx76.net/floatshow/show.html",function(){
  alert('ok');
 });
});
可以看到jquery的函数可以连着调用,一个操作执行成功后执行另一个操作,相当猛,刚刚同事教我的.就是alert('ok')这里也可以放成其它操作。

demo