作者: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来改善源代码浏览体验
分享到:
相关推荐
jQuery实战 源代码 JQuery实战 源代码 JQuery
几个自己 整合了一下的 jquery 简单效果源代码,嗯,很简单的,请大家多多指教
jQuery基础教程 (Learning jQuery) 完整源代码
Jquery学习 Jquery源代码 Jquery数据库操作 Jquery学习 Jquery源代码 Jquery数据库操作 绝对有用,技术含量
Jquery学习 Jquery源代码 Jquery数据库操作 绝对有帮助,请下载,有技术含量的,没有你骂我
JQuery权威指南源代码
《jQuery Mobile快速入门》源代码,内含各个章节源代码
jquery实例源代码
jQueryMobile源代码
jQuery系列教程源代码jQuery系列教程源代码
jQuery权威指南配套源代码,里面包涵了jQuery权威指南所有配套源代码!
jquery源代码 包括示例 包括示例jquery源代码 包括示例 包括示例
jquery UI 1.7源代码jquery UI 1.7源代码jquery UI 1.7源代码
jquery-图片滚动源代码:能实现图片的无限滚动。
Jquery图文循环滚动源代码,供大家一起共同分享学习。
深入PHP与jQuery开发源代码下载.docx深入PHP与jQuery开发源代码下载.docx深入PHP与jQuery开发源代码下载.docx深入PHP与jQuery开发源代码下载.docx深入PHP与jQuery开发源代码下载.docx
李炎恢的全部jquery的教学视频和PDF文档,对着讲义看视屏,看讲义回顾很有帮助!!!
《jQuery基础教程》 一书 源代码。