首页 » 建站技术 » WordPress » 浏览内容

JQuery侧边栏滚动(附具体流程)


2010-08-26 14:03:05 3,799 0 发表评论 字体: 作者:C.K.
标签: JqueryWordPress备忘

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

第一步:给“博友推荐”那个栏目的ID 命名为

<li id="tuijian">

第二步(非必须):在header.php加载 jquery库….

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

此为Google的jq库….你也可以下载到自己的主机进行调用….

如果你已经调用过……你可以跳过此步

第三步:加入代码:

此代码有两种加入方式…
方法一:直接在header.php里面添加如下代码

    <script type="text/javascript" >
  •     jQuery(document).ready(function($) {
  •     $(function() {
  •     var $sidebar = $("#tuijian"),
  •     $window = $(window),
  •     offset = $sidebar.offset(),
  •     topPadding = 15;
  •     $window.scroll(function() {
  •     if ($window.scrollTop() > offset.top) {
  •     $sidebar.stop().animate({
  •     marginTop: $window.scrollTop() - offset.top + topPadding});
  •     } else {
  •     $sidebar.stop().animate({
  •     marginTop: 0
  •     });}});});
  •     });
  •     </script>
  • 方法二:把下面的代码存为.js文件:

    /* JQuery侧边栏滚动 */
  •     jQuery(document).ready(function($) {
  •     $(function() {
  •     var $sidebar = $("#tuijian"),
  •     $window = $(window),
  •     offset = $sidebar.offset(),
  •     topPadding = 15;
  •     $window.scroll(function() {
  •     if ($window.scrollTop() > offset.top) {
  •     $sidebar.stop().animate({
  •     marginTop: $window.scrollTop() - offset.top + topPadding});
  •     } else {
  •     $sidebar.stop().animate({
  •     marginTop: 0
  •     });}});});
  •     });
  • 然后再在header.php的head标签中添加:

    <script src="http://你的域名/文件名.js" type="text/javascript"></script>

    本文来自:http://www.yangluodi.com/index.php/admin/522.html

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5062 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14144330 位访客

    广告区 Guǎng Gào