Discuz教程网

仿19楼回顶部 到底部美化 两种样式 X2.5 X3 X3.1

[复制链接]
authicon dly 发表于 2013-11-23 12:07:24 | 显示全部楼层 |阅读模式
095819ttfbhat98bbbh0bt.png.thumb.jpg 095819a5bmbh7xzny5xph1.png.thumb.jpg

样式一修改方式:
打开/风格目录/common/common.css或者/extend_common
添加以下代码:
.index-act .go-top a,.index-act .go-top a:visited,.index-act .go-top a.vcode{display:block;padding:50px 0 0;width:50px;height:0;background:url({IMGDIR}/go_top.png) 0 0 no-repeat;overflow:hidden;border:0;border-radius:0;}.index-act .go-top a.go-feed{background-position:0 0;}.index-act .go-top a.go-feed:hover{background-position:-51px 0;}.index-act .go-top a.go-top-btn,.index-act .go-top a.go-top-btn:visited{display:none;background-position:0 -51px;}.index-act .go-top a.go-top-btn:hover{background-position:-51px -51px;}.index-act .go-top a.go-down-btn,.index-act .go-top a.go-down-btn:visited{background-position:0 -102px;}.index-act .go-top a.go-down-btn:hover{background-position:-51px -102px;}.index-act .go-top a.vcode,.index-act .go-top a.vcode:visited{background-position:0 -152px;}.index-act .go-top a.vcode:hover{background-position:-51px -152px;}.index-act .go-top a.vcode:hover{background-position:-51px -152px;}.vcode-main{display:none;position:absolute;padding:10px 20px 20px;width:146px;background:#fff;border:1px solid #BBB;box-shadow:0 0 3px rgba(100,100,100,0.5);z-index:999;}.vcode-main p{height:36px;line-height:36px;text-align:center;}#J_goTop{display:none;}.footer-link div a:hover em{color:#fff;}.head-ad{width:1190px;}.ad-190x60{width:1200px;}.ad-190x60 li{margin-right:10px;}.ad-1190x60,.ad-1190x90{position:relative;margin-bottom:10px;width:1190px;height:60px;overflow:hidden;}.ad-1190x90{height:90px;}.projection-ad{width:1190px;}.projection-ad .projection-ad-content .ad-embed-mask{width:1190px;}


打开风格目录/common/footer.htm
X2.5查找

<!--{eval userappprompt();}-->

<!--{if $_G['basescript'] != 'userapp'}-->

<span id="scrolltop">{lang scrolltop}</span>

<script type="text/javascript">_attachEvent(window, 'scroll', function(){showTopLink();});checkBlind();</script>

<!--{/if}-->

<!--{eval output();}-->

X3 X3.1查找

<!--{eval userappprompt();}-->
<!--{if $_G['basescript'] != 'userapp'}-->
<div id="scrolltop">
        <!--{if $_G[fid] && $_G['mod'] == 'viewthread'}-->
        <span><a href="forum.php?mod=post&action=reply&fid=$_G[fid]&tid=$_G[tid]&extra=$_GET[extra]&page=$page{if $_GET[from]}&from=$_GET[from]{/if}" class="replyfast" title="{lang fastreply}"><b>{lang fastreply}</b></a></span>
        <!--{/if}-->
        <span hidefocus="true"><a title="{lang scrolltop}" class="scrolltopa" ><b>{lang scrolltop}</b></a></span>
        <!--{if $_G[fid]}-->
        <span>
                <!--{if $_G['mod'] == 'viewthread'}-->
                <a href="forum.php?mod=forumdisplay&fid=$_G[fid]" hidefocus="true" class="returnlist" title="{lang return_list}"><b>{lang return_list}</b></a>
                <!--{else}-->
                <a href="forum.php" hidefocus="true" class="returnboard" title="{lang return_forum}"><b>{lang return_forum}</b></a>
                <!--{/if}-->
        </span>
        <!--{/if}-->
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
<!--{/if}-->
<!--{if isset($_G['makehtml'])}-->
        <script type="text/javascript" src="{$_G[setting][jspath]}html2dynamic.js?{VERHASH}"></script>
        <script type="text/javascript">
                var html_lostmodify = {TIMESTAMP};
                htmlGetUserStatus();
                <!--{if isset($_G['htmlcheckupdate'])}-->
                htmlCheckUpdate();
                <!--{/if}-->
        </script>
<!--{/if}-->
<!--{eval output();}-->

替换成

<!--{eval userappprompt();}-->
<!--{if $_G['basescript'] != 'userapp'}-->
<div><div class="float-ad-wrap" style="color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; line-height: 18px;"></div><div class="float-ad-wrap" style="color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; line-height: 18px;"></div><div class="index-act" style="color: rgb(51, 51, 51); font-family: 'Microsoft Yahei', 微软雅黑, Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; line-height: 18px;"><div class="go-top" style="position: fixed; right: 10px; bottom: 10px; z-index: 80; text-align: center; border-top-left-radius: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border-bottom-left-radius: 5px; box-shadow: none;"><a href="" style="text-decoration: none; color: rgb(140, 162, 38); cursor: pointer; display: block; padding-top: 50px; width: 50px; line-height: 14px; border: 0px; overflow: hidden; height: 0px; background-image: url({IMGDIR}/go_pic.png); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px;"></a><a href="javascript:scroll(0,0)" class="go-top-btn" style="text-decoration: none; color: rgb(140, 162, 38); cursor: pointer; display: block; padding-top: 50px; width: 50px; line-height: 14px; border: 0px; background-color: rgb(242, 244, 237); overflow: hidden; height: 0px; background-image: url({IMGDIR}/go_top.png); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; font-family: 'Microsoft Yahei', 微软雅黑, Tahoma, Arial, Helvetica, STHeiti; font-size: 12px; text-align: center; background-position: 0px -51px; background-repeat: no-repeat no-repeat;">回顶部</a><a href="javascript:scroll(0,80000)" class="go-down-btn" style="text-decoration: none; color: rgb(140, 162, 38); cursor: pointer; display: block; padding-top: 50px; width: 50px; line-height: 14px; border: 0px; overflow: hidden; height: 0px; background-image: url({IMGDIR}/go_top.png); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-position: 0px -102px; background-repeat: no-repeat no-repeat;">到下面</a><a target="_blank"  class="go-feed" style="text-decoration: none; color: rgb(140, 162, 38); cursor: pointer; display: block; padding-top: 50px; width: 50px; line-height: 14px; border: 0px; overflow: hidden; height: 0px; background-image: url({IMGDIR}/go_top.png); border-top-left-radius: 0px; border-top-right-radius: 0px; border-bottom-right-radius: 0px; border-bottom-left-radius: 0px; background-position: 0px 0px; background-repeat: no-repeat no-repeat;">找客服</a></div></div></div>
<script type="text/javascript">_attachEvent(window, 'scroll', function(){showTopLink();});</script>
<!--{/if}-->
<!--{eval output();}-->

上传图片至风格目录 后台更新缓存即可!
游客,如果您要查看本帖隐藏内容请回复

样式二修改方式:
打开/风格目录/common/common.css或者/extend_common
添加以下代码:

.go-top{position:fixed;_position:absolute;right:15px;bottom:300px;z-index:80;text-align:center;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.1);}
.go-top a,.go-top a:visited{display:block;padding:5px;width:18px;line-height:14px;color:#8CA226;border:1px solid #D9E6BB;background-color:#F7FBEC;overflow:hidden;}
.go-top a:hover{text-decoration:none;color:#FFF;border-color:#8CA226;background-color:#8CA226;}
.go-top .icon{display:block;width:16px;height:0;padding-top:16px;background:url(/eopn_net/common1.png) no-repeat;overflow:hidden;}
.go-top .close-go-top,.go-top .close-go-top:visited{display:none;border-radius:5px 5px 0 0;}
.close-go-top .icon{background-position:-37px -56px;}
.close-go-top:hover .icon{background-position:-57px -56px;}
.go-top .customer-service,.go-top .customer-service:visited{border-bottom:none;border-radius:5px 5px 0 0;}
.customer-service .icon{margin:0 0 2px 2px;background-position:0 -59px;}
.customer-service:hover .icon{background-position:-20px -59px;}
.go-top .back-to-top,.go-top .back-to-top:visited{border-radius:0 0 5px 5px;}
.back-to-top .arrow{display:block;margin:2px;width:0;height:0;border-right:6px #F7FBEC solid;border-left:6px #F7FBEC solid;border-bottom:6px #8CA226 solid;overflow:hidden;}
.back-to-top:hover .arrow{border-right:6px #8CA226 solid;border-left:6px #8CA226 solid;border-bottom:6px #F7FBEC solid;}
.go-top-hover .close-go-top,.go-top-hover .close-go-top:visited{display:block;}
.go-top-hover .customer-service,.go-top-hover .customer-service:visited{border-top:none;border-radius:0;}
.at,.at:hover{display:inline-block;*display:inline;zoom:1;vertical-align:middle;padding-left:15px;font-size:12px;line-height:18px;color:#83A013;text-decoration:none;background:url({IMGDIR}/common1.png) -380px 3px no-repeat;}


打开风格目录/common/footer.htm
X2.5查找

<!--{eval userappprompt();}-->

<!--{if $_G['basescript'] != 'userapp'}-->

<span id="scrolltop">{lang scrolltop}</span>

<script type="text/javascript">_attachEvent(window, 'scroll', function(){showTopLink();});checkBlind();</script>

<!--{/if}-->

<!--{eval output();}-->

X3 X3.1查找

<!--{eval userappprompt();}-->
<!--{if $_G['basescript'] != 'userapp'}-->
<div id="scrolltop">
        <!--{if $_G[fid] && $_G['mod'] == 'viewthread'}-->
        <span><a href="forum.php?mod=post&action=reply&fid=$_G[fid]&tid=$_G[tid]&extra=$_GET[extra]&page=$page{if $_GET[from]}&from=$_GET[from]{/if}" class="replyfast" title="{lang fastreply}"><b>{lang fastreply}</b></a></span>
        <!--{/if}-->
        <span hidefocus="true"><a title="{lang scrolltop}" class="scrolltopa" ><b>{lang scrolltop}</b></a></span>
        <!--{if $_G[fid]}-->
        <span>
                <!--{if $_G['mod'] == 'viewthread'}-->
                <a href="forum.php?mod=forumdisplay&fid=$_G[fid]" hidefocus="true" class="returnlist" title="{lang return_list}"><b>{lang return_list}</b></a>
                <!--{else}-->
                <a href="forum.php" hidefocus="true" class="returnboard" title="{lang return_forum}"><b>{lang return_forum}</b></a>
                <!--{/if}-->
        </span>
        <!--{/if}-->
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function () { showTopLink(); });checkBlind();</script>
<!--{/if}-->
<!--{if isset($_G['makehtml'])}-->
        <script type="text/javascript" src="{$_G[setting][jspath]}html2dynamic.js?{VERHASH}"></script>
        <script type="text/javascript">
                var html_lostmodify = {TIMESTAMP};
                htmlGetUserStatus();
                <!--{if isset($_G['htmlcheckupdate'])}-->
                htmlCheckUpdate();
                <!--{/if}-->
        </script>
<!--{/if}-->
<!--{eval output();}-->

替换成

<!--{eval userappprompt();}-->
<!--{if $_G['basescript'] != 'userapp'}-->
<div class="go-top">
        <a target="_blank" class="customer-service" ><span class="icon"></span><p>找客服</p></a>
        <a class="back-to-top"  onclick="window.scrollTo('0','0')"><span class="arrow"></span><p>回顶部</p></a>
</div>
<script type="text/javascript">_attachEvent(window, 'scroll', function(){showTopLink();});</script>
<!--{/if}-->
<script type="text/javascript">
</script>
<!--{eval output();}-->

上传图片至风格目录 后台更新缓存即可!
游客,如果您要查看本帖隐藏内容请回复

附懒人包:
游客,如果您要查看本帖隐藏内容请回复



上一篇:站点登录QQ互联提示:当前服务器繁忙获得网络问题的解决方案
下一篇:Discuz!整合多说社会化评论
authicon 小朋 发表于 2014-1-11 11:53:06 | 显示全部楼层
好强大的返回顶部插件啊,具体演示地址请看端连网--21psd.com
authicon 5ucn 发表于 2014-7-8 16:36:00 | 显示全部楼层
看看都有啥效果
authicon ohaty 发表于 2014-7-27 00:42:48 | 显示全部楼层
看看阿奎那看看反思开发
authicon shuiling0411 发表于 2014-8-15 14:37:37 | 显示全部楼层
现在还在改不合适吧。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

1314学习网 ( 浙ICP备10214163号 )

GMT+8, 2025-5-2 08:49

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表