最终效果如上，手机端（左）、电脑端（右）

使用的jQuery，所以只要你的页面引用了一次jQuery，那么代码量真的是相当少，两三段就实现了js控制，那么，粗暴一点，直接贴代码吧。

HTML框架：

<header id="header">
    <nav class="navs">
        <a href="#" class="logo">iDevs</a>
        <div id="switch">Menu</div>
        <ul class="menu case_menu">
            <li class="current"><a href="#header">Home</a></li>
            <li><a href="#title">Service</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#maps">Contact</a></li>
        </ul>
    </nav>
</header>
<script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-beta1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#switch").click(function(){
  $(".case_menu").toggle(300);
  });
});
</script>

CSS：

#header{width:100%;height:2000px;}
#header .navs{background:#5c7;height: 80px;width: 100%;line-height:80px;}
#header .navs .logo{float:left;display: block;margin: 0 10px;color: #fff;font-size: 30px;}
#header #switch{display:none;}
#header .navs .menu{float: right;}
#header .navs .menu li{display: inline;}
#header .navs .menu li a{color: #fff;padding: 0 10px;font-size:20px;text-decoration:none;transition:.2s;}
#header .navs .menu li a:hover{text-shadow:1px 1px 1px #295}
#header .navs .menu li.current a{text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff}
@media(max-width:700px){
#header #switch{display:block;float:right;color:#fff;padding:0 10px;margin: 0 10px 0 0; font-size:20px;background:#3a5;cursor: pointer;}
#header .navs .menu{position:absolute;right:10px;top:80px;display:none;background:#3a5;height:200px;width:180px;text-align:center;}
#header .navs .menu li{line-height:50px;}
#header .navs .menu li a{display:block;font-size:16px;width:100%;padding:0}
#header .navs .menu li a:hover,#header .navs .menu li.current a{background: #295}
}

Demo效果

嗯，大概就是这样，上面代码的Demo效果如下：

自行修改代码美化吧，就不继续贴代码了。

本方法依托jQuery

<script type="text/javascript">
    jQuery(document).ready(function(){jQuery("a[rel='external'],a[rel='external nofollow']").click(function(){window.open(this.href);return false})});
</script>

将上方代码丢进主题的任意部分（丢在页脚吧），然后刷新页面，就能很完美的体验了。

由于TE默认使用的是MD编辑器，添加链接的时候无法像WP用户一样选择让文章内的链接在新窗口打开，那么我们其实也可以用JS让文章内的链接在新窗口打开的。

<script type="text/javascript">
    jQuery(document).ready(function($){$('.post-content a').attr({ target:"_blank"})});
</script>

把上面代码一起丢进主题里就行了，Class一般不用修改，如果主题修改程度过大，那么就修改一下.post-content为你主题文章部分的Class吧 OK，愉快的使用吧。

这个东西最初是在@Xider的博客上看到的，于是我很无节操的扒之，虽然成功了，但是他的背景滚动有别的效果，是我不喜欢的，看了看他的js，晕，完全看不懂，最后无奈还是放弃了，但是天无绝人之路啊，不经意在逛国外网站的时候，也发现了背景滚动，当时甚是激动，于是节操不再，将其完整扒了下来，效果甚是吗满意。

加载jQuery是必须的，一般主题都有加载。

投放js

1. <script type="text/javascript" charset="utf-8">
2. var scrollSpeed = 100;  // 速度（毫秒）
3. var step = 1;  // 每次移动1个像素
4. var current = 0;  // The current pixel row
5. var imageWidth = 2247; // 滚动图宽度
6. var headerWidth = 1280; // 容器宽度
7. //循环起始
8. var restartPosition = -(imageWidth - headerWidth);
9. function scrollBg(){
10. //Go to next pixel row.
11. current -= step;
12. //If at the end of the image, then go to the top.
13. if (current == restartPosition){current = 0;}
14. //容器IDClass
15. $('#header').css("background-position",current+"px 0");}
16. //重复滚动
17. var init = setInterval("scrollBg()", scrollSpeed);
18. </script>

黄颜色的是容器ID，也可以是class，把上面的js放到背景滚动容器附近就差不多了，注释有几句被我翻译的，还有几句超出我的英语范围，我就没动。。

css详解

1. #header{height:180px;background:#8EC1DA url(bg-clouds.png) repeat-y scroll left top;text-align:center;}

好了，就这样吧，看不懂就跳过吧。。。当我记录。。。

背景层图片 【下载】

下面透露一下福利

GskyPro出售链接已经挂出去半个多月了，一直无人问津，之前我以为可能是价格高了，直到一天，@大发 留言告诉俺，“不是价格高，是因为细节处理的不够”好吧，终于了解其原因了，其实我要技术没技术，都是纯个人折腾的，发叔的一句话算是点透我了，所以我经过一番心力斗争，毅然决定，GskyPro免费放出，至于什么时候放出，大家可以等等吧，明天补课，如果不出意外，周六下午，或者本周日就能放出来啦。、。、

在这里感谢大家的不懈支持，原本挂在顶部的主题出售链接已经去掉了，静候佳音吧~~~

（这里所说的GskyPro非GskyPro2，GskyPro演示地址：http://www.gsky.org/?themedemo=Gsky）