jQuery跟随浏览器滚动条浮动层效果

　　今天在处理客户提交的WordPress企业定制需求时，有一个”跟随浏览器滚动条浮动层，点击后返回顶部” 的功能需要实现，当然，首先想到的就是无所不能的强大Jquery。在GG的帮助下，通过Jquery插件可以轻松实现。使用 jQuery Scroll Follow。

　　必须调用的js有：

　　1.jQuery Easing Plugin

　　2.jQuery Cookie Plugin

　　3.jQuery Scroll Follow

　　操作说明：

　　1. 包含以上三个必须得js脚本文件到你的项目：

　　

　　以下为引用的内容：

JavaScript" style="font-family: monospace"><script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript" src="ui.core.js"></script>
<script type="text/JavaScript" src="jquery.scrollFollow.js"></script>

　　操作说明：

　　1. 包含以上三个必须得js脚本文件到你的项目：

　　

　　以下为引用的内容：

<script type="text/JavaScript" src="jquery.js"></script>
<script type="text/JavaScript" src="ui.core.js"></script>
<script type="text/JavaScript" src="jquery.scrollFollow.js"></script>

　　2. 绑定Scroll Following方法到希望实现该效果的DOM对象：

　　

　　以下为引用的内容：

<script type="text/JavaScript">
	$( '#example' ).scrollFollow();
 </script>

　　查看实例

　　3. 还可以为绑定DOM对象的Scroll Following设置参数：

　　

　　以下为引用的内容：

<script type="text/JavaScript">
  $( document ).ready( function () {
    $( '#example' ).scrollFollow( {
     speed: 1000,
     offset: 60,
     killSwitch: 'exampleLink',
     onText: 'Disable Follow',
     offText: 'Enable Follow'
    } );
  } );
</script>

　　查看实例

　　4. 或者为绑定的DOM对象指定一个上级(父)元素(通过调用父元素ID)，为该绑定对象设置一个外部容器，使得效果只能在该限定容器范围内有效：

　　

　　以下为引用的内容：

<script type="text/JavaScript">
  $( document ).ready( function () {
   $( '#example' ).scrollFollow( {
    container: 'outer'
   } );
  } );
</script>

　　查看实例

　　更多参数设置及效果实现，可参看插件官方文档：jQuery Scroll Follow

类别：JavaScript技术  来源：本站原创  作者：hpping  日期：2009-07-06 09:16

上一条：jQuery+Bing API实现简易搜索引擎
下一条：对现代开发来说，JavaScript是一种垃圾语言

软件产品

  • HTCMS 4.0.5
    专业的旅游营销及内容管理系统
  • HDCMS 2.0.8
    HDUT内容管理系统,为您提供专业建站CMS,原来专业站也不过如此

资讯信息

技术信息