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

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:inline–block;}   
  6. #newAppBox a:hover{text-decoration:none;}  

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

声明：本站分享的WordPress主题/插件均遵循 GPLv2 许可协议（免费开源），相关介绍资料仅供学习参考，实际版本可能会因版本迭代或开发者调整而产生变化，如程序中涉及有第三方原创图像、设计模板、远程服务等内容，应获得作者授权后方可使用。本站不提供该程序/软件的产品授权与技术服务，亦不收取相关费用。