Time of Update: 2017-01-18
Gecko引擎的CSS漸層設計直線漸層基本文法-moz-linear-gradient([<point> || <angle>,]?<stop>,<stop>[,<stop>]*)參數說明:<point>:定義漸層起始點,取值包含數值,百分比,也可以使用關鍵字,其中left,center 和 right 關鍵字定義 x 軸座標,top,center 和 bottom 關鍵字定義 y
Time of Update: 2017-01-18
先來看一下效果,這在CSS3之前,完全是不可想象的,只有圖片才能做的到,但在HTML5和CSS3大行其道的今天,實現這種效果,那都不是事啊。看一下實現的代碼:<!DOCTYPE html><html><head><style type='text/css'>/* 上三角 */.arrow-up { width: 0; height: 0; border-left: 20px solid transparent; border-right:
Time of Update: 2017-01-18
經常會遇到這樣的頁面配置:在一排顯示幾個不同的地區內容,但它們相對於頁面是置中對齊的。注意這些地區內容不只是文字,也許還有圖片或者其它元素混合而成。一般這樣的布局我們很容易想到要用浮動float,但是怎麼樣置中對齊而又相容低端瀏覽器哪?請接著往下看。首先看html代碼:<div class="webFooter"> <div class="wrap"> <div class="tabs"> <ul>
Time of Update: 2017-01-18
Readonly和Disabled是用在表單中的兩個屬性,它們都能夠做到使使用者不能夠更改表單域中的內容。但是它們之間有著微小的差別,總結如下:Readonly只針對input(text / password)和textarea有效,而disabled對於所有的表單元素都有效,包括select, radio, checkbox,
Time of Update: 2017-01-18
CSS3的誕生為我們解決了這一問題,在CSS3裡,通過background-image或者background可以為一個容器設定多張背景映像,也就是說可以把不同背景圖象只放到一個塊元素裡。首先我們來看一下文法吧:background : [background-image] | [background-origin] | [background-clip] | [background-repeat] | [background-size] | [background-attachment] |
Time of Update: 2017-01-18
今天製作了一個響應式導航條,能夠自動隨著不同的螢幕解析度或瀏覽器視窗大小的不同而改變導航條的樣式,這裡主要用到的就是CSS3的Media Query。具體可以查看淺談響應式布局這篇文章,這裡就不花費大量的篇幅介紹了,主要看一下這個導航條該怎麼做。另外需要提到的是,ie6-ie8是不支援CSS3的Media Query的,因此對於ie6-ie8我們需要特殊處理,就讓他們保持預設樣式,這對於布局及樣式上都要考慮到這一點。首先看一下布局這一塊,html代碼如下:複製代碼 代碼如下:<div
Time of Update: 2017-01-18
直接加樣式img{vertical-align:bottom; display:block}當然在某些情況下無效,比如我要加三個圖片,上中下,中間的圖片是設為背景,發現用此方法無效,只是上和中的圖片空隙沒了,而下與中之間還存在,方法很簡單,把vertical-align:bottom改成top,可根據自己遇到的不同情況來設vertical-align的參數方法一:複製代碼 代碼如下:img{vertical-align:top; display:block}複製代碼
Time of Update: 2017-01-18
前幾天遇到一個問題,代碼是這樣一個層次:複製代碼 代碼如下:<div class="province"> <ul> <li>1</li>
Time of Update: 2017-01-18
ie6對position:fixed不支援,網上有很多解決方案,有的在ie6,ie7上調試成功後,在ie8上又不好使,div層還是跟隨捲軸浮 動;以下總結方法,在ie6,ie7,ie8上都調試成功,且頁面捲軸滾動時,效果還挺好,div層並不會閃爍。 複製代碼 代碼如下:<div id="goTop_div" class="fixed ie"> </div>css: 複製代碼 代碼如下:.fixed{
Time of Update: 2017-01-18
如果開發時按最低標準,比如IE6不支援的特性,我們統統不用,那就沒有必要寫這篇文章了;但我想這種情況極少,更多的開發,是在現代瀏覽器上使用它們支援的特性,而在早期瀏覽器上做一定的降級處理,這就是所謂 “漸進增強”,也是本文要說的重點。通過下面的方法,希望可以讓網站也能夠在低版本IE瀏覽器上奇蹟般地運行得更好!htmlshiv.jsRemy的 HTML5shiv通過JavaScript 來建立HTML5元素(如 main, header, footer等)。在某種程度上通過JavaScript
Time of Update: 2017-01-18
Regex是一個很牛逼的東東,今天在這裡只是簡單的給剛剛接觸JS的人普及一下,裡面若有爭議的地方歡迎大家留言!1.1 什麼是Regex Regex(regular expression)是一個描述字元模式的對象,ECMAScript的RegExp 類表示Regex,而String和RegExp都定義了使用Regex進行強大的模式比對和文本檢索與替換的函數。 Regex用於對字串模式比對及檢索替換,是對字串執行模式比對的強大工具。1.2 Regex的作用
Time of Update: 2017-01-18
相關閱讀:EditPlus中的Regex 實戰(1)EditPlus中的Regex 實戰(2)EditPlus Regex 實戰(3)EditPlus中的Regex 實戰(4)EditPlus中的Regex實戰(5)EditPlus中的Regex實戰(6)entity.JIANCHARQ=null; entity.YUYUERQ=null; entity.NIAODANB=null; entity.XUETANGPJ=null; entity.JIANCHADWBM=null;
Time of Update: 2017-01-18
本文執行個體講述了jQuery順延強制的實現方法。分享給大家供大家參考,具體如下:做一個控制項時碰到的一些無法同步處理的事件,可以用這樣的延遲方法。<html><script src="js/jquery.js"></script><script>$(function(){$('#test').bind("click",function(){setTimeout(function(){alert($('#test').val());},800);}
Time of Update: 2017-01-18
本文執行個體講述了JS實現仿PS的調色盤效果。分享給大家供大家參考,具體如下:運行效果圖如下:完整執行個體代碼:<html><head><style>#colorpad table{ border-collapse:collapse; cellpadding:0; cellspacing:0; width:255px; height:255px; border:0;}#colorpadright table{
Time of Update: 2017-01-18
三分屏,這裡的三分屏只是在一個播放器裡同時播放三個視頻,但是要求只有一個控制台同時控制它們,要求它們共用一個時間軌道。這次只是簡單的類比了一下功能,並沒有深入的研究。首先,需要下載jPlayer,jPlayer是一個JavaScript寫的完全免費和開源的jQuery多媒體庫外掛程式,我覺得他最大的好處就是相容性,並且頁面也簡潔大方,個人比較喜歡。jPlayer可到其官網下載最新版本(http://www.jplayer.cn)。並且官網有開發文檔和Demo,所以還是比較容易上手的。關於簡單的視
Time of Update: 2017-01-18
首先來看看實現的效果圖:HTML中無需添加額外的一列來表示複選框,而是由JS完成,所以正常的表格版面配置就行了:<table class="table table-bordered table-hover"> <thead> <tr class="success"> <th>類別編號</th> <th>類別名稱</th> <th>類別組</th>
Time of Update: 2017-01-18
本文執行個體講述了JS實現擷取來自百度,Google,soso,sogou關鍵詞的方法。分享給大家供大家參考,具體如下:/*可擷取使用者,通過哪個關鍵詞訪問該頁,可自行添加SOGOU,SOSO,有道等搜尋引擎*/var refer=document.referrer;var sosuo=refer.split(".")[1];var grep=null;var str=null;var keyword=null;switch(sosuo){ case "baidu": grep=/wd\=.*
Time of Update: 2017-01-18
本文執行個體分析了JS定時器用法。分享給大家供大家參考,具體如下:開啟定時器:setInterval 間隔型 //一旦啟動就不會停,重複執行setTimeout 延遲型 //只執行一次停止定時器:clearIntervalclearTimeout關閉定時器如果只是clearInterval()那會關掉所有的定時器,有時我們只需要關掉一個而已,所以要定義一個變數來存放定時器var
Time of Update: 2017-01-18
大致介紹jQuery Validate 外掛程式為表單提供了強大的驗證功能,讓用戶端表單驗證變得更簡單,同時提供了大量的定製選項,滿足應用程式各種需求。該外掛程式捆綁了一套有用的驗證方法,包括 URL 和電子郵件驗證,同時提供了一個用來編寫使用者自訂方法的 API。所有的捆綁方法預設使用英語作為錯誤資訊,且已翻譯成其他 37 種語言。該外掛程式是由 Jörn Zaefferer 編寫和維護的,他是 jQuery 團隊的一名成員,是 jQuery UI 團隊的主要開發人員,是
Time of Update: 2017-01-18
本文執行個體講述了JS無縫滾動效果實現方法。分享給大家供大家參考,具體如下:效果:1.預設緩慢往左滾動2.放到左箭頭上還是向左滾動,放到右箭頭上向右滾動3.放到圖片上停止滾動,移出繼續滾動思路:1.計算圖片列表ul的寬度2.開啟定時器,使其向左邊距不斷增大,造成向左運動的效果3.圖片列表複製一份,向左移動時,當左邊距大於一份的寬度時,把它的左邊距拉回到0。向右移動時,當左邊距大於0時,把它的左邊距拉到整個兩份圖片列表一半的寬度(即一份的寬度)。(拉的瞬間很快,使用者察覺不到,造成一種無縫滾動的假