首页 仿站课堂 腾讯新闻回顶部效果制作

腾讯新闻回顶部效果制作

作者:

修改日期:

腾讯图片新闻页面有一个回顶部和微信扫描特效,看着效果不错,就试着制作了下效果,这里分享下实现过程。

1、下载所需要的压缩包文件:
下载地址:http://pan.baidu.com/share/link?shareid=437890&uk=403909634 密码:15oi ;
2、下载后可以看到以下几个文件(如图):
压缩包文件
文件解释:
index.htm:调用代码所在文件,可直接使用浏览器打开查看效果;
js.js:特效所需要的js文件;
其他:3张图片(newsapp_1221.jpg图片修改为你自己的微信图片,尺寸为108*108).
3、整合到wordpress网站中:
①、首先复制js.js和3张图片到wordpress网站的相关文件夹中,例如图片文件夹images中;
②、然后打开index.htm文件,把其中的如下代码复制到wordpress主题footer.php中的</body>标签上面:

  1. <div id=“newAppBox” style=“top: 312px; display: block;”>   
  2.     <div class=“hd”>   
  3.         <a id=“goTop” class=“goTop” onclick=“window.scrollTo(0,0);return false;” href=“javscript:void%280%29;”><img src=“topUp.png” alt=“up” title=“up” height=“13” width=“38”></a>   
  4.         <span id=“colseBtn” class=“closeBtn”><img src=“closeBtn.png” alt=“close”></span>   
  5.     </div>   
  6.     <div class=“bd”>   
  7.         <p id=“adMsg” class=“adMsg”>手机浏览网站</p>   
  8.         <img src=“newsapp_1221.jpg” alt=“” title=“” height=“108” width=“108”><br>微信扫一扫   
  9.     </div>   
  10. </div>   
  11. <script async=“” type=“text/javascript” src=“js.js”></script>  

特别提醒#:代码需修改其中的图片路径和js文件调用路径。
③、最后复制以下CSS样式到wordpress主题的style.css文件中:

  1. #newAppBox{width:120px;top:50%;rightright:10px;margin:-90px 0 0;padding:5px 0;position:fixed;_position:absolute;color:#004276;text-align:center;background:#d3e0ea;z-index:9999;font-size:12px;line-height:22px;display:none;}   
  2. #newAppBox .hd{height:16px;background:none;position:relative;}   
  3. #newAppBox .hd .closeBtn{height:16px;background:none;position:absolute;rightright:6px;top:0;cursor:pointer;}   
  4. #newAppBox p{margin:0;color:#004276;}   
  5. #newAppBox a{color:#004276;display:inlineblock;}   
  6. #newAppBox a:hover{text-decoration:none;}  

然后打开你的网站刷新,就会看到下图效果了:
2013-04-26_103730
如果按照以上步骤不能正常显示,检查下图片或是js路径是否正确。