jQuery实现浮动层跟随页面高度自动滚动效果-查看演示:http://www.souab.com/Demo/scroll-f...

海南网站建设,网页设计
记忆工作中的点滴
首页>> 广告代码 >>jQuery实现浮动层跟随页面高度自动滚动效果

查看演示:http://www.souab.com/Demo/scroll-follow/

在本例中,我用到了一个重要的插件:,该插件在当前主流浏览器IE6+, FF2+, Safari 3,and Opera 9均测试通过,具有可配置参数,使用简单的特点。

点击查看原图

<div id="scroll" class="demo"> 
    ...任意你想展示的内容 
</div>

只需要一个div层,内容任意。值得注意的是,如果你想把DIV展示在页面左右两边,则应该把这个DIV放在紧跟<body>后。

CSS

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; 
 padding:10px; position:relative; margin-top:-290px;} 

设置DIV的宽度和高度,并设置绝对位置position:relative以及距离顶部的值margin-top:-290px,这个290是怎么算出来的呢?一看就明白:290=250+10x2+10x2即DIV高度+两个margin值+两个padding值。

jQuery

首先引入jquery库和scroll-follow.js

<script type="text/javascript" src="jquery.js"></script> 
<script type="text/javascript" src="jquery.scroll-follow.js"></script>

调用插件非常简单,代码如下:

$(function(){ 
    $("#scroll").scrollFollow(); 
}); 
你可以通过设置以下参数获得更多的效果:

参数 描述 默认值
speed 滚动的间隔毫秒数,数值越小,滚动越快。 500
offset 距离滚动顶部的点数(pixels)。 0
relativeTo 设置滚动的DIV靠上还是靠下,可以设置为"top"或"bottom"。 top
killSwitch 开启和取消跟随滚动开关的元素ID,需要支持。 "killSwitch"
onText 如果启用了跟随滚动,开关显示的文字。 "Turn Slide Off"
offText 如果取消了跟随滚动,开关显示的文字。 "Turn Slide On"

官方网站还提供了delay和container两个参数,用来控制滚动延时和滚动范围,我觉得没有多大实用意义,就不作描述了。

需要提醒的是,如果我想让浮动的DIV层展示在页面的右侧,该怎么办?其实该插件不具备此功能,我们需要做的就是通过CSS来定位浮动DIV的位置。

.demo{width:180px; height:250px; margin:10px; border:2px solid #ccc; background:#eee; 
 padding:10px; position:absolute; margin-top:156px; right:10px;} 

通过相对定位来确定浮动DIV层的位置,相当灵活,具体效果可以查看DEMO演示。


×

感谢您的支持,我们会一直保持!

扫码支持
请土豪扫码随意打赏

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

打赏作者
版权所有,转载注意明处:不懂戀愛魚兒 » jQuery实现浮动层跟随页面高度自动滚动效果
标签: jquery 自动滚动

发表评论

路人甲 表情
看不清楚?点图切换 Ctrl+Enter快速提交

网友评论(0)