基于jquery的代碼顯示區(qū)域自動拉長效果
更新時間：2011年12月07日 23:49:35 作者：
今天看到一個技術(shù)類網(wǎng)站，在顯示代碼的地方，邊框會拉長，很方便用戶閱讀體驗，特看了下代碼，原理很簡單，使用了jquery，不適用也可以實現(xiàn)
下面是jquery的實現(xiàn)代碼：
$(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'});
}
}
);
復(fù)制代碼 代碼如下:
$(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'});
}
}
);
相關(guān)文章
基于jquery實現(xiàn)的移入頁面上空文本框時，讓它變?yōu)榻裹c，移出清除焦點
基于jquery實現(xiàn)的移入頁面上空文本框時，讓它變?yōu)榻裹c，移出清除焦點的實現(xiàn)代碼。2011-07-07
這篇文章主要介紹了jQuery使用hide方法隱藏元素自身用法,實例分析了jQuery中hide方法的原理與使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-03-03
jquery中g(shù)et,post和ajax方法的使用小結(jié)
本篇文章主要是對jquery中g(shù)et,post和ajax方法的使用進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
jQuery的ajax方法非常好用，這么好的東西，你想擁有一個屬于自己的ajax么？接下來，我們來自己做一個簡單的ajax吧2017-01-01
本篇文章主要是對jquery彈出層居中效果的簡單實例進(jìn)行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
jQuery實現(xiàn)在最后一個元素之前插入新元素的方法
這篇文章主要介紹了jQuery實現(xiàn)在最后一個元素之前插入新元素的方法,涉及jquery針對頁面元素的匹配選擇與屬性操作相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-07-07
jQuery計算文本框字?jǐn)?shù)及限制文本框字?jǐn)?shù)的方法
一個中文算兩個，一個符號或數(shù)字，英文，算一個。（如果是規(guī)定140個字，乘以2，那么就是280個）。需要用到Math.ceil方法，因為最后還是要除以2來還原顯示給用戶的字?jǐn)?shù);2016-03-03
jQuery 使用手冊，大家可以耐心的看完，就基本上入門了。2009-09-09
使用微信內(nèi)置瀏覽器點擊下拉框出現(xiàn)頁面亂跳轉(zhuǎn)現(xiàn)象（iphone），該怎么辦
這篇文章主要介紹了使用微信內(nèi)置瀏覽器點擊下拉框出現(xiàn)頁面亂跳轉(zhuǎn)現(xiàn)象（iphone），該怎么辦的相關(guān)資料,需要的朋友可以參考下2016-01-01
用jquery.load的方法載入新的頁面，以實現(xiàn)局部刷新，可結(jié)果發(fā)現(xiàn)載入進(jìn)來的頁面與原來單獨的頁面不一樣，樣式?jīng)]了，關(guān)于這個問題，下面有個不錯的解決方法2014-01-01