基于jquery的代码显示区域自动拉长效果
更新时间：2011年12月07日 23:49:35 作者：
今天看到一个技术类网站，在显示代码的地方，边框会拉长，很方便用户阅读体验，特看了下代码，原理很简单，使用了jquery，不适用也可以实现
下面是jquery的实现代码：
$(document).ready(function(){
$('pre').hover(
function(){
if($(this).width()==520){
$(this).animate({width:'800'},400);
$(this).css({border:'1px solid #2B99E6'});
}
},
function(){
if($(this).width()==800){
$(this).animate({width:'520'},400);
$(this).css({border:'1px solid #555555'});
}
}
);
复制代码 代码如下:
$(document).ready(function(){
$('pre').hover(
function(){
if($(this).width()==520){
$(this).animate({width:'800'},400);
$(this).css({border:'1px solid #2B99E6'});
}
},
function(){
if($(this).width()==800){
$(this).animate({width:'520'},400);
$(this).css({border:'1px solid #555555'});
}
}
);
相关文章
基于jquery实现的移入页面上空文本框时，让它变为焦点，移出清除焦点
基于jquery实现的移入页面上空文本框时，让它变为焦点，移出清除焦点的实现代码。2011-07-07
这篇文章主要介绍了jQuery使用hide方法隐藏元素自身用法,实例分析了jQuery中hide方法的原理与使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
本篇文章主要是对jquery中get,post和ajax方法的使用进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-02-02
jQuery的ajax方法非常好用，这么好的东西，你想拥有一个属于自己的ajax么？接下来，我们来自己做一个简单的ajax吧2017-01-01
本篇文章主要是对jquery弹出层居中效果的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
这篇文章主要介绍了jQuery实现在最后一个元素之前插入新元素的方法,涉及jquery针对页面元素的匹配选择与属性操作相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-07-07
一个中文算两个，一个符号或数字，英文，算一个。（如果是规定140个字，乘以2，那么就是280个）。需要用到Math.ceil方法，因为最后还是要除以2来还原显示给用户的字数;2016-03-03
jQuery 使用手册，大家可以耐心的看完，就基本上入门了。2009-09-09
使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办
这篇文章主要介绍了使用微信内置浏览器点击下拉框出现页面乱跳转现象（iphone），该怎么办的相关资料,需要的朋友可以参考下2016-01-01
用jquery.load的方法载入新的页面，以实现局部刷新，可结果发现载入进来的页面与原来单独的页面不一样，样式没了，关于这个问题，下面有个不错的解决方法2014-01-01
最新评论