基于jquery的代碼顯示區(qū)域自動(dòng)拉長(zhǎng)效果
更新時(shí)間：2011年12月07日 23:49:35 作者：
今天看到一個(gè)技術(shù)類網(wǎng)站，在顯示代碼的地方，邊框會(huì)拉長(zhǎng)，很方便用戶閱讀體驗(yàn)，特看了下代碼，原理很簡(jiǎn)單，使用了jquery，不適用也可以實(shí)現(xiàn)
下面是jquery的實(shí)現(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獲取第二個(gè)子元素集合,如果你正在尋找一種簡(jiǎn)單的方法來(lái)快速獲取一個(gè)元素的第二個(gè)子元素,那么你來(lái)對(duì)地方了！跟著我們的步驟,你將很快成為一個(gè)jQuery專家,需要的朋友可以參考下2023-12-12
傳參的時(shí)候遇到Get中文亂碼，IE瀏覽器Get中文亂碼問(wèn)題，該怎么解決呢？下面為大家詳細(xì)介紹下具體的解決方案2013-12-12
Jquery下判斷Id是否存在的代碼，需要的朋友可以參考下。2011-01-01
jquery綁定事件 bind和on的用法與區(qū)別分析
這篇文章主要介紹了jquery綁定事件 bind和on的用法與區(qū)別,結(jié)合實(shí)例形式分析了jquery綁定事件 bind和on的基本功能、用法、區(qū)別與操作注意事項(xiàng),需要的朋友可以參考下2020-05-05
這篇文章主要介紹了JQ實(shí)現(xiàn)新浪游戲首頁(yè)幻燈片,需要的朋友可以參考下2015-07-07
測(cè)類、方法、變量或?qū)傩允欠褚汛嬖?，這是Javascript編程基礎(chǔ)知識(shí)。在這里我們就是要檢測(cè)jQuery()或$()函數(shù)是否存在2011-05-05
基于jQuery實(shí)現(xiàn)仿淘寶套餐選擇插件
本文給大家介紹的是一款基于jQuery實(shí)現(xiàn)放淘寶套餐選擇的插件，主要是基于本地json數(shù)據(jù)的選擇列創(chuàng)建，有需要的小伙伴參考下。2015-03-03
jQuery文本框得到與失去焦點(diǎn)動(dòng)態(tài)改變樣式效果
這篇文章主要介紹了jQuery文本框得到與失去焦點(diǎn)動(dòng)態(tài)改變樣式效果,涉及jQuery針對(duì)頁(yè)面表單元素樣式的動(dòng)態(tài)操作技巧,需要的朋友可以參考下2016-09-09
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)的菜單切換效果，需要的朋友可以參考下2015-10-10
jQuery中綁定事件bind() on() live() one()的異同
本文主要介紹了jQuery中綁定事件bind() on() live() one()的異同，具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧2017-02-02