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