最新消息:

第61款插件:jquery.floatDiv.js让你的DIV固定在页面上

图片幻灯插件 杨红伟 5524浏览 0评论

一、插件介绍

在我们平常浏览网站的时候,我们会发现一些大型网站的导航不管页面多长,滚动条怎么移动它都会保持在原来的位置上。高端的设计师都会使用这种效果,因为它可以增加网站的用户体验。一些网站利用这种特效做了固定分享功能和联系方式功能等等。

二、插件图片示例

11


兼容浏览器:IE6+/Firefox/Google Chrome
官方链接:
暂无
JS下载:
http://www.ijquery.cn/js/jquery.floatDiv.js

三、使用方法及使用参数

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"});
以上参数,设置浮动层在left 10个像素,top 10个像素的位置 $("#id").floatdiv({right:"10px",top:"10px"});

四、使用教程

HTML代码:

<div id="test">
<img src="float.jpg" alt="" title="" />
</div>
<div style="width:980px;height:800px;margin:0 auto;background:#CCCCCC;"> </div>

 JS代码:

<script type="text/javascript" src="http://www.ijquery.cn/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="http://www.ijquery.cn/js/jquery.floatDiv.js"></script>
<script type="text/javascript"> $(function(){ $("#test").floatdiv({top:"80px",right:"100px"}); }); </script>

本例用到的图片:

1  
 
 

发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址