使用jQuery来改善源代码浏览体验

作者：Terry li - GBin1.com

作为一个技术人员，经常需要在开发中查阅一些资料，其中自然包括了代码片段，而代码片段的浏览方式，决定了用户的体验，今天我这里使用jQuery简单实现一个源代码浏览器，希望对大家有帮助！

首先我们这里使用<pre>来定义需要显示的代码，如下：

<pre>
<script type="text/javascript">
  $(document).ready(function(){ 
    alert("欢迎来到 www.gbin1.com .................................................................................................................................");
  });
</script>
</pre> 

大家看到这个代码的宽度比较大，所以一般的显示方式是在pre里生成一个滚动条，用户使用滚动条来拖动查看代码。

这里我们使用一个小技巧，让用户鼠标移动到代码上后，自动改变pre的宽度。代码如下：

CSS定义：

<style type="text/css">
pre {
    background: url("images/source.jpg") no-repeat scroll 0 0 #333333;
    border: 2px solid #555555;
    color: green;
    font-family: arial;
    margin: 0;
    overflow:scroll !important;
    padding: 30px 0 20px;
    position: relative;
    width: 520px;
    display: block;
}
</style>

注意：overflow: scroll后面要加上!important, 否则IE上效果是动态改变大小过程中滚动条消失，改变完成后才再次出现。

jQuery代码：

<script type="text/javascript">
$(document).ready(function(){    
        $('pre').hover(
                function(){
                    if($(this).width()==520){
                        $(this).animate({width:'800'},400);
                        $(this).css({border:'2px solid #2B99E6'});
                    }
                },
                function(){
                    if($(this).width()==800){
                        $(this).animate({width:'520'},400);
                        $(this).css({border:'2px solid #555555'});
                    }
                }
        );        
});
</script>

在线演示：

演示DEMO

 

原文地址：使用jQuery来改善源代码浏览体验