頁面輸出時一些常用的小技巧 一

2021-08-23 13:50:31 字數 2491 閱讀 1826

頁面輸出時一些常用的小技巧(二)

1.選單一 | 選單二 | 選單三(demo1.zip )

**結構:

通常我們會li加css

border-right:1px solid #000
這樣最後乙個li也有右邊框,是多餘的,只能為最後乙個li新增乙個class來區分(左邊框的情況類似)

而demo1中我們為li加css

ul

ul li

ul的overflow:hidden和li的margin-left:-1px是為了讓最左邊li的左邊框隱藏起來,這樣每個li都可以用一樣的樣式,便於給li迴圈

2 .壓縮(

demo2.zip )

通常web頁面中從後台傳的和設計師設計的大小不一樣,這個時候需要按照原圖長寬的比例進行壓縮,不能超過設計師設定的大小。

initial是原始大小;goal是壓縮後的大小;max是最大值

當原始長寬有任意乙個大於對應的最大值或者兩個都小於最大值時對大小進行壓縮

其它情況不壓縮

function imgsize(element,maxwidth,maxheight)

else

}else if (initialwidth < maxwidth && initialheight < maxheight)

else

}$(this).attr("width", goalwidth);

$(this).attr("height", goalheight);

});}

附件demo2.zip

是乙個類似原理的外掛程式:jquery.loadimage.demo 

3 .布局

要實現如圖的這種布局,可以用三個並列關係的div加上樣式就可以實現

**結構:

這種**結構非常靈活,可以僅僅通過樣式達到多種布局效果

圖一(demo3.1.zip)的css:

/*_margin-left:107px;為了ie6多出的3畫素而寫的hack*/
圖二(demo3.2.zip)的css

/*_margin:0 107px; 為了ie6多出的3畫素而寫的hack*/
圖三(demo3.3.zip)的css和js,滑鼠hover時當前模組放大比例

4.獲取瀏覽器可見區域的寬高,通用方法:

//以下的方法對於很多瀏覽器都適用

function windowheight()

else if (document.documentelement && document.documentelement.clientheight)

else if (document.body)

return windowheight;

}function windowwidth()

else if (document.documentelement && document.documentelement.clientwidth)

else if (document.body)

return windowwidth;

}

5 .**的簡易框架(demo5.zip)

偶然的機會看到了**的這個框架,寫得很不錯,玉伯的css也非常工整

圓角的切圖也挺有意思的,值得我去學習效仿。

6 .滾動訊息(demo6.zip)

上下往返滾動的訊息一般常出現在公告欄或者新聞欄,以前比較喜歡用marquee標籤來實現,不過marquee實現的滾動會有頭尾不能連線起來而導致訊息欄出現短暫的空白的缺陷,而且w3c也不支援marquee標籤。所以用js來實現更完美一些。

function scroll(element, delay, speed, lineheight) {

var numpergroup = 5;

var slidebox = (typeof element == 'string')?document.getelementbyid(element):element;

var delay = delay||1000;

var speed=speed||20;

var lineheight = lineheight||20;

var tid = null, pause = false;

var lilength = slidebox.getelementsbytagname('li').length;

var lack = numpergroup-lilength%numpergroup;

for(i=0;i7. 閃動的訊息

您有新的短訊息

一些 ssh 小技巧

ssh 經常需要使用的,每次使用都 ssh abc def.com p 12138 i ssh id rsa來一遍顯然太麻煩了,下面分享一點使用ssh的小技巧 linux 下,ssh會去讀 ssh config 裡的配置的,只需要配置檔案裡寫入如下配 host 1 配置的名稱,選方便自己識別的就行h...

一些stl 小技巧

大部分都是網上總結的 滑稽 1.一些非常實用的函式,比如說找到下乙個排列的 2.在3.vector代替queue和stack還能稍微快一些。所以不建議使用queue和stack,內建的棧和佇列出奇的慢。4.優先佇列,維護數列的極大值,效率很慢,比手寫二叉堆還慢不少,好像set都比它快些使用的話,主要...

一些 ssh 小技巧

ssh 經常需要使用的,每次使用都 ssh abc def.com p 12138 i ssh id rsa複製 來一遍顯然太麻煩了,下面分享一點使用ssh的小技巧 linux 下,ssh會去讀 ssh config 裡的配置的,只需要配置檔案裡寫入如下配 host 1 配置的名稱,選方便自己識別的...