JavaScript

在Flash中我們用蒙板加上一些簡單的指令碼便可實現一個動態圖片放大鏡。現在我們只用JavaScript結合CSS語言也可以輕易做出這個效果。 　　製作思路：“放大鏡”後有一幅背景圖，它是“放大了”的圖的原本。我們通過移動“放大鏡”時適當調整背景圖的位置，使它顯示的剛好是需要要放大的部分。 　　效果示範： (點這裡在新視窗中查看)　　製作步驟：

頁面樣式代碼： 複製代碼 代碼如下: <style type="text/css"> .header { background-color: #CCCCCC; color: White; font-size: x-large; } .content { background-color: White; font-weight: lighter; font-size: small; } .content td { text-align: left; } .mandatory {

以其文法簡單靈活而大受Web

相信大家都知道jQuery是最優秀的Javascript架構之一。以其文法簡單靈活而大受Web designer歡迎。所以很多網頁設計師結合jQuery的強大功能製作出了許多成熟的圖片滑動外掛程式，我們可以很簡單地直接將這些圖片滑動外掛程式嵌入到網頁中，很容易就得到了即酷又實用的jQuery圖片滑動效果。在這是jQuery滑動切換外掛程式系列的第三部分，我們將向大家分享40多種非常有用，又有創意的jQuery圖片滑動外掛程式，及其示範和。你可以按你網頁風格找到合適的jQuery圖片滑動外掛程式，

這次主要是來分享幾個個人覺得十分震憾的圖片特效，有jQuery的，有CSS3的，有很萌的烏鴉動畫，也有簡單樸實的圖片播放動畫，當然有些你可能已經看到過了，不過也沒關係，你能路過就算是對我的支援了。jQuery Rounded Corners 各種圓角，太犀利了。有了這個，你還在為你的圓角實現準備N張圖片來拼湊嗎？青松雪舞-必應的美麗世界

:實現代碼:複製代碼 代碼如下: <html> <head> <title>Jquery 自動輪播效果</title> <script src="js/jquery-1.6.2.min.js" type="text/javascript"></script> <style> .spanhide{display: none;} #top a:hover{color: red;} </style>

複製代碼 代碼如下: function refresh() { var s = $(".box1"); if (!s.is(":animated")) $(".box1").animate({ marginLeft: "0px" }, "slow", function () { $('.box1 img:first').before($('.box1 img:last')); $(".box1").css("margin-left", "-206px"); }); } <div

複製代碼 代碼如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>圖片減速度滾動(by rentj1@163.com;)</title> <style> ul{ margin:0; padding:0} ul{ list-style:none;} body{font:12px/1.2 "宋體"; } .scroll_box{

1.如果密碼少於5位，那麼就認為這是一個弱密碼。 2.如果密碼只由數字、小寫字母、大寫字母或其它特殊符號當中的一種組成，則認為這是一個弱密碼。 3.如果密碼由數字、小寫字母、大寫字母或其它特殊符號當中的兩種組成，則認為這是一個中度安全的密碼。 4.如果密碼由數字、小寫字母、大寫字母或其它特殊符號當中的三種以上組成，則認為這是一個比較安全的密碼。 複製代碼 代碼如下: <script language="javascript"> //CharMode函數 function

總的來說，原理很簡單，大致流程是：在瀏覽器上載入原圖 --> 用矩形框在原圖上選取地區並將選取的頂點座標和矩形尺寸發送至伺服器 --> 伺服器端用圖片切割演算法切割原圖並輸出切割後的圖片。下面我們就分別對這幾個步驟詳細展開討論分析，並在最後附上小demo供大家參考。 1、在頁面上載入原圖 這個就不用多說了，就是在頁面上顯示一張圖片，一個img標籤搞定，不過為了下一步示範，還是貼一下代碼 <img src="girl.jpg" alt="" id="TestImage"

1. 排序： 預設的sort()按字元編碼排序的： 複製代碼 代碼如下: <script type="text/javascript"> <!-- var testArray=[3,324,5345,6546,134,5654,665]; testArray.sort(); alert(testArray); //--> </script> 現在要讓它按照數值大小排序： 複製代碼 代碼如下: <script type="text/javascript"

很顯然，這樣做能提升更好的使用者體驗。 html代碼： 複製代碼 代碼如下: <form method="post" action=""> <div class="int"> <label for="username">使用者名稱:</label> <input type="text" id="username" class="required"/> </div></form> jquery代碼： 複製代碼

我們來看看如果使用Knockout更簡單的來實現密碼強度的驗證。 原有代碼請查看： 複製代碼 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

為了防止圖片撐破布局，最常見的仍然是通過onload後擷取圖片尺寸再進行調整，所以載入過程中仍然會撐破。而Qzone日誌的圖片在此進行了改進，onload完畢後才顯示原圖。我以前用onload寫過一個小例子：http://www.planeart.cn/?p=1022 通過imgReady可以跨瀏覽器在dom ready就可以實現圖片自適應，無需等待img載入，代碼如下： （3-17修複網友crossyou 指出的一處錯誤，並且新版本去掉了替換圖片） 複製代碼 代碼如下: //

首先看下效果，沒什麼特別，呵呵！調用的代碼呢，則是相當簡單，不需要建立其他的Label或者span標籤，指令碼將自動產生： 複製代碼 代碼如下: <input type="text" id="txt1" onkeyup="checkResult(this.value == '', 'txt1', ' *這裡不可為空喔！')" />

預載入和JavaScript Image()對象 很多high-res映像真的可以使 Web 網站更加整潔。但是它們也會使網站的訪問速度變慢——映像是檔案，檔案使用頻寬，頻寬直接與等待時間相關。是該瞭解如何通過一個叫做映像預載入（preloading）的技巧來提高 Web 網站的訪問速度的時候了。 映像預載入 對於瀏覽器載入映像來說，只有在對映像發送一個 HTTP請求之後，它們才會被瀏覽器載入，對映像的 HTTP 要求要麼使用 ＜img＞ 標記，要麼通過方法調用實現。如果使用

一個夥伴的頁面效果，滑鼠放到 圖片上要變成彩色，本來就是一個簡單的換色效果，但問題是，圖片的高度和寬度不是一樣大的。這就比較麻煩了。如果把圖片放到背景裡就要一個一個的去定義圖片外面的容器<a></a>，要多寫很多層疊樣式，太麻煩，最後我決定，把圖片的高度的一一半，和圖片的寬度賦值給它外面的容器<a></a>然後把圖片做了如下處理：當滑鼠移動到圖片上讓他向上移動30個像素，移開則回到原位。html代碼如下： 複製代碼 代碼如下:

:實現代碼:複製代碼 代碼如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;

1. Chrome Style jQuery Image Gallery一款用於實現漂亮的Chrome風格圖片畫廊的 jQuery 外掛程式，線上示範2. Awkward Showcase使用這款外掛程式可以實現各種內容的投影片展示效果，例如文本、圖片、視頻等等，線上示範3. Waypoints這款外掛程式可以讓你實現當滾動到某個目標元素的時候執行特定的動作，例如回到頂部，線上示範4. bxSlider這是一個內容滑塊和圖片投影片展示外掛程式，可自訂很多參數，線上示範5. A simple

效果預覽如下: 實現原理: 容器採用相對定位,圖片採用絕對位置,當滑鼠移動到相應的圖片上,改變去left屬性,用tween實現動畫效果. 程式碼分析:寫一個picSlider類實現代碼封裝 複製代碼 代碼如下: <div id="container"> <img src="http://files.jb51.net/file_images/article/201104/r_song1.jpg" alt="" /> <img