基于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专家,需要的朋友可以参考下2023-12-12
传参的时候遇到Get中文乱码，IE浏览器Get中文乱码问题，该怎么解决呢？下面为大家详细介绍下具体的解决方案2013-12-12
Jquery下判断Id是否存在的代码，需要的朋友可以参考下。2011-01-01
这篇文章主要介绍了jquery绑定事件 bind和on的用法与区别,结合实例形式分析了jquery绑定事件 bind和on的基本功能、用法、区别与操作注意事项,需要的朋友可以参考下2020-05-05
这篇文章主要介绍了JQ实现新浪游戏首页幻灯片,需要的朋友可以参考下2015-07-07
测类、方法、变量或属性是否已存在，这是Javascript编程基础知识。在这里我们就是要检测jQuery()或$()函数是否存在2011-05-05
本文给大家介绍的是一款基于jQuery实现放淘宝套餐选择的插件，主要是基于本地json数据的选择列创建，有需要的小伙伴参考下。2015-03-03
这篇文章主要介绍了jQuery文本框得到与失去焦点动态改变样式效果,涉及jQuery针对页面表单元素样式的动态操作技巧,需要的朋友可以参考下2016-09-09
这篇文章主要介绍了基于jQuery实现的菜单切换效果，需要的朋友可以参考下2015-10-10
jQuery中绑定事件bind() on() live() one()的异同
本文主要介绍了jQuery中绑定事件bind() on() live() one()的异同，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最新评论