我的top_bottom功能–折腾ing

我看有人要我也公布吧。不是插件。。

我提供三个样式(自行修改)

我的top_bottom功能--折腾ing      我的top_bottom功能--折腾ing    我的top_bottom功能--折腾ing

效果如本站右侧那个

具体步骤:

1、在footer.php的</body>标签之前加入下面代码:

<?php if ($curpage== CURPAGE_HOME) { ?>
<div id="goto">
<div class="top" title="顶部"></div>
<div class="bot" title="底部"></div>
</div>
<div id="top_bottom"></div>
<?php }
else { ?>
<div id="goto">
<div class="top" title="顶部"></div>
<div class="comt" title="评论"></div>
<div class="bot" title="底部"></div>
</div>
<div id="top_bottom"></div>
<?php } ?>

其中“$curpage== CURPAGE_HOME”是用来判断是否在首页,如果在首页,则这显示上、下两个箭头。如果不在首页,则除了显示上、下两个箭头外,还显示一个评论框的按钮。

2、在你的模板的CSS文件中加入:

#goto {position:fixed;left:50%;top:50%;bottom:auto;margin-left:580px;z-index: 999}
#goto .top, #goto .bot,#goto .comt{background:url(images/huadong.png) no-repeat;position:relative;cursor:pointer;height:25px;width:29px;margin:10px 0 0}
#goto .comt{background-position:left -30px;height:32px}
#goto .bot{background-position:left -68px}
#goto .comt:hover{background-position:right -30px}
#goto .top:hover{background-position:right 0}
#goto .bot:hover{background-position:right -68px}

Css具体的我就不说了

3、最后是加载JS去控制,代码如下:该JS代码你可以直接在header.php的<head></head>之间。 

<script type="text/javascript">
jQuery(function($){
    $(’.top’).click(function(){$(’html,body’).animate({scrollTop: ’0px’}, 800);return false;});
    $(’.bot’).click(function(){$(’html,body’).animate({scrollTop:$(’#top_bottom’).offset().top}, 800);return false;});
	$(’.comt’).click(function(){$(’html,body’).animate({scrollTop:$(’#comment-post’).offset().top}, 800);return false;});
});
</script>

或是(直接建立一个top.js文件)

<script src="<?php echo TEMPLATE_URL; ?>js/top.js" type="text/javascript"></script>

注意,其中#comment-post对应你的发表评论表单的Id,OK,整个过程完毕,喜欢折腾就去折腾吧。


您可以选择一种方式赞助本站

    A+
发布日期:2011年06月13日
标签:

目前评论:16   其中:访客  9   博主  7

  1. 2010年10月01日 11:42  15楼
  2. 2010年10月01日 18:39  16楼
评论加载中...

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: