WordPress实现边栏悬浮滑动版块

时间:12-05-30 栏目:wordpress 作者:炫酷网站设计建设评论:0 点击: 1,222 次

本文标签： WordPress

Hcms主题面世以来，有好几个朋友问倡萌，如何实现边栏的悬浮滑动版块，其实，这个是倡萌借鉴自浩子的D4主题，如果可以看懂代码的基本构架，自己折腾起来应该也比较容易，倡萌在这里就简单说说。

其实代码还是比较精简，倡萌也看不懂，只是大概知道其中的自定义罢了，呵呵。

核心的就是下面这段jQuery代码：

//sidebar scroll
jQuery(document).ready(function($) {
    if (!isie6()) {
        var rollStart = $('#rollstart'),
        rollSet = $('.feed-mail,#tuijian');
        rollStart.before('<div></div>');
        var offset = rollStart.offset(),
        objWindow = $(window),
        rollBox = rollStart.prev();
        if (objWindow.width() > 960) {
            objWindow.scroll(function() {
                if (objWindow.scrollTop() > offset.top) {
                    if (rollBox.html(null)) {
                        rollSet.clone().prependTo('.hcms_rollbox')
                    }
                    rollBox.show().stop().animate({
                        top: 0,
                        paddingTop: 15
                    },
                    400)
                } else {
                    rollBox.hide().stop().animate({
                        top: 0
                    },
                    400)
                }
            })
        }
    }
    function isie6() {
        if ($.browser.msie) {
            if ($.browser.version == "6.0") return true;
        }
        return false;
    }
});

代码的第5行“.feed-mail,#tuijian”是指滑动的版块是class为feed-mail和ID为tuijian的容器内容，也就是如下

1 2	<div class="feed-mail">内容1</div> <div id="tuijian">内容2</div>

代码的第4行的“#rollstart”是指从这个ID为rollstart的容器开始滑动，比如倡萌将下面的代码放在边栏的尾部，滑动版块就会从尾部开始滑动

1	<div id="rollstart"></div>

代码中的第6行 '<div></div>' 是自动将滑动内容置于class为hcms_rollbox的容器中，然后通过css控制这个容器的位置和大小等属性，在第14行中的 “.hcms_rollbox”就是样式的class值，css样式如下

1	.hcms_rollbox {position:fixed;background:none;width:275px;}

值得注意的是，代码依靠jQuery库，也就是必须在你的主题中先置入jQuery库，具体可以参考《WordPress提速：选择好的jQuery库(Google/Microsoft/SAE) 》，jQuery库必须放在上面的js代码的前面，切记。

此外，这个效果不支持IE6，在代码中已经排除了。

好了，基本的都已经说了，倡萌也只能说到这了，具体的就靠大家折腾了

这篇日志的二维码，扫描一下进行收藏：

WordPress实现边栏悬浮滑动版块

推荐文章

WordPress实现边栏悬浮滑动版块：等您坐沙发呢！

发表评论

热门标签

读者排行

最新评论