K9 通用版 博客版 主题版 地方门户版 企业版 |   企业(ASP) 分类 使用 分享 疑问 模板 建议 帮助 错误 其他
+新建主题 [Ajax]
填写帐号密码即可完成注册
+新建话题 最新回复排序 最新主题排序 精华帖子

增加PV的小优化CSS定位,以及右下角回到顶部!

1Next >

花少 发表于:12-05-08 22:06 编辑于:05-09 01:48 [添加收藏] 楼主 [回复] #Top#
花少 人气:245 积分:24 金币:4705
VIP

先看效果:

默认橙色风格:武宁在线http://wuning.my0792.com/ 

德阳123风格:九江信息港http://www.my0792.com/

打开演示网址,鼠标往下滑,即可看到效果~

喜欢的可以自己改改……

修改方法:

1、在./templates/orange/images/style.css中
搜索menu1,替换为:#menu1{height:45px;background:url(menu1_bg.gif) repeat-x bottom;top:0px;left:187px;}

2、在./templates/orange/images/style.css最后增加

#scrolltop {
 POSITION: fixed; TEXT-ALIGN: center; WIDTH: 44px; BOTTOM: 80px; DISPLAY: none; BACKGROUND: url(/images/arrow.png) no-repeat -44px 0px; HEIGHT: 48px; COLOR: #f00; MARGIN-LEFT: 480px; FONT-SIZE: 14px; CURSOR: pointer; LEFT: 51%; _position: absolute
}
#scrolltop:hover {
 BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BACKGROUND: url(/images/arrow.png) no-repeat; BORDER-TOP: 0px; BORDER-RIGHT: 0px; PADDING-TOP: 0px
}

其中的arrow.png图片,自己保存到网站目录下。

3、在./templates/orange/index.php最后
在<?php require ROOT.T.'/include/bottom.php'; ?>和</body>中间插入以下代码:

<SCRIPT type=text/javascript>
var IO=document.getElementById('menu1'),Y=IO,H=0,IE6;
//IE6=window.ActiveXObject&&!window.XMLHttpRequest;
while(Y){H+=Y.offsetTop;Y=Y.offsetParent};
//if(IE6)
//    IO.style.cssText="position:absolute;top:expression(this.fix?(document"+
//        ".documentElement.scrollTop-(this.javascript||"+H+")):0)";
window.onscroll=function (){
    var d=document,s=Math.max(d.documentElement.scrollTop,document.body.scrollTop);
    if(s>H&&IO.fix||s<=H&&!IO.fix)return;
    if(!IE6)IO.style.position=IO.fix?"":"fixed";
    IO.fix=!IO.fix;
};
try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};
</SCRIPT>

<SCRIPT type=text/javascript>
$(function(){
      $(window).scroll(function(){
        var top=$(window).scrollTop();
        if(top>100){
          $("#scrolltop").fadeIn();
          $("#diaocha").fadeIn();
        }else{
          $("#scrolltop").fadeOut();
         // $("#diaocha").fadeOut();
        }
      });
      $("#scrolltop").click(function(){
      $("html,body").animate({scrollTop:0});
      });
    });
</SCRIPT>
<DIV id=scrolltop></DIV>

以上三步即可完成。

楼主是在默认橙色模板下操作的,自己修改过风格的朋友适当修改即可完成。

希望对大家有所帮助~

topcc 发表于:12-05-08 22:31 沙发 [回复] #Top#
topcc 人气:294 积分:4426 金币:37428
VIP KC元老
有意思的功能。。。
azoon 发表于:12-05-08 23:06 板凳 [回复] #Top#
azoon 人气:1 积分:2 金币:11095
VIP
用上了
花少 发表于:12-05-09 01:50 4楼 [回复] #Top#
花少 人气:245 积分:24 金币:4705
VIP
大笑我也觉得蛮有意思 观察几天 希望有助增长PV
yuesheyu 发表于:12-05-09 11:28 5楼 [回复] #Top#
yuesheyu 人气:0 积分:242 金币:40
- -!!用来看看!
江湖笑 发表于:12-05-09 21:58 6楼 [回复] #Top#
江湖笑 人气:9 积分:37 金币:38
都是代码看不懂的啊呵呵
banjia 发表于:12-05-20 16:56 7楼 [回复] #Top#
banjia 人气:29 积分:78 金币:208
那个没有做过的啊

1Next >

发表回复

帐号 匿名发布 审核后可见 [加载完整在线编辑器]
内容
验证码
KingCMS 内容管理系统

关于我们 联系我们 广告报价 付款方式 站点导航

Copyright © 2004-2015 Focuznet All rights reserved.

广州唯众网络科技有限公司 粤ICP备08008106号

中奖了!