Ajax/JavaScript http://www.xyyouth.net.cn/changyongdaima/ajax_javascript/ 網頁特效 / 常用代碼 / Ajax/JavaScript zh-cn CSS鼠標經過放大圖片+Lightbox圖片展示 http://www.xyyouth.net.cn/changyongdaima/48338/ CSS實現鼠標經過放大圖片,點擊圖片在當前頁當前位置顯示大圖,應用的是Lightbox特效,其實不是純CSS完成,配合了Lightbox插件,示例原型是一個小型的相冊,一個橫向排列的和一個豎向排列的,點擊圖片在當前頁顯示大圖片,現在有不少朋友都想在自己的博客中加入Lightbo 2017-06-26 01:23:45 Ajax/JavaScript 支持二級分類的網站水平導航菜單 http://www.xyyouth.net.cn/changyongdaima/48334/ 超級經典的支持二級分類的網站橫向導航菜單,CSS+JavaScript聯手打造,很多網站都在用。 因為用到了不少的圖片資源,因此這里將其一并打包供下載。功能演示可以看上邊的截圖,這種菜單的操作體驗很不錯,大部分人都喜歡。二級菜單同樣也精彩,鼠標移向菜單時候的背景類 2017-06-26 01:22:16 Ajax/JavaScript 純圖片實現的CSS導航菜單 http://www.xyyouth.net.cn/changyongdaima/48330/ 完全圖片搭配實現的CSS菜單,雖然外觀挺好看,不過看過之后發覺設計不是太合理,可能本人不喜歡這種方法吧,它是用圖片堆砌出來的,如果要修改菜單的某一項的話會有點麻煩,菜單上的響應鼠標變化的效果也是基于圖片平鋪背景實現的。 2017-06-26 01:15:48 Ajax/JavaScript CSS+JS 多風格切換的導航菜單 http://www.xyyouth.net.cn/changyongdaima/48326/ CSS配合JS打造多風格切換的菜單,有多種風格可以無刷新切換,綠色、藍色、棕色、灰色等,每一種風格都包含各自的風格圖片包以及CSS定義文件,非常實用哦。 2017-06-26 01:17:40 Ajax/JavaScript Js圖片裁切框專用插件,可任意拖動和改變大小 http://www.xyyouth.net.cn/changyongdaima/48077/ 一個裁切圖片專用的拖動選擇框插件,自帶了三種方式的裁切框使用演示: Demo1:隨意拖動位置和大小 Demo2:隨意拖動位置,鎖定尺寸大小. Demo3:隨意拖動位置,保持尺寸寬高比 2012-05-08 21:14:23 Ajax/JavaScript 微博可常用的圖片旋轉特效代碼 http://www.xyyouth.net.cn/changyongdaima/48076/ 呵呵,在網上看到大網站的微博中有一圖片旋轉的特效,搞的很火,于是乎,自己動手寫,雖然不完善,但至少自己以后用著方便了,IE應用的是私有濾鏡,而Firefox應用的是即將流行和未來流行的canvas,請參考一下。 代碼里部分: o旋轉圖片ID; p選擇旋轉方向,固定值為‘lef 2012-05-08 21:14:23 Ajax/JavaScript JavaScript手風琴圖片展示效果代碼 http://www.xyyouth.net.cn/changyongdaima/48075/ JavaScript手風琴圖片展示效果代碼,確實效果不錯的東西,鼠標放到風琴的每一個鍵位上,會滑出清淅大圖,整體效果動感十足,這種排列方式稱之為橫向手風琴,還有豎向的,特效用了幾個比較大的圖片,因此壓縮包比較大。 2010-05-24 18:26:13 Ajax/JavaScript JavaScript 垂直形手風琴樣式的折疊菜單 http://www.xyyouth.net.cn/changyongdaima/48074/ JavaScript手風琴樣式的折疊菜單,從往的手風琴菜單大多是橫向排列的,其實有時候說看手風琴還不如說是折疊菜單,這樣更好理解一些,我們在編寫后臺程序的時候,這種菜單是我們所需要的。而且本款菜單加入了動畫效果,讓菜單的實用的同時同樣具備生動的元素。 2012-10-03 11:06:35 Ajax/JavaScript js模仿google265導航模塊上移、下移功能 http://www.xyyouth.net.cn/changyongdaima/48073/ js模仿google265導航模塊上移、下移功能,163CSS作品,獲取更多請直接進入該站。 本演示示例實現網頁上的各個模塊點擊鼠標后上移或者下移,其它模塊自動填補,中國人同學錄首頁有這種功能,讓用戶自己選擇適合自己瀏覽習慣的模塊,有效提升用戶體驗。 2010-05-24 18:26:21 Ajax/JavaScript 有道的一種鏈接提示效果,顯示圖片 http://www.xyyouth.net.cn/changyongdaima/48072/ 有道的一種鏈接提示效果,顯示圖片,鼠標放上去,大圖顯示出來,使用方便簡單。 2012-10-21 20:32:38 Ajax/JavaScript JS網頁版ColorPicker顏色選擇器(拾色器) http://www.xyyouth.net.cn/changyongdaima/48071/ JS網頁版顏色選擇器,也就是大家所說的拾色器,在PhotoShop、DW、Flash軟件里面,都有這個東西,作用于拾取屏幕上任意一點的顏色值。本插件是用在網頁上的,完成的功能一樣,運行的環境不同。這個顏色拾取器用起來挺方便,鼠標在顏色樣板上移動,會適時顯示顏色基色值 2012-10-21 20:32:38 Ajax/JavaScript EasyWindow網頁版窗口模擬顯示插件 http://www.xyyouth.net.cn/changyongdaima/48070/ EasyWindow一個網頁版窗口顯示插件,這顯示是一個在網頁上模擬Windows窗口的插件,可新建、關閉、拖動基于層的網頁窗口,每一個可定義不同的顯示樣式、顏色、大孝顯示的內容等,更重要的是它的兼容性非常好,調用方便快捷。 2012-05-24 13:19:22 Ajax/JavaScript 高仿126郵箱風格的Tab標簽式后臺界面菜單 http://www.xyyouth.net.cn/changyongdaima/48069/ 這是一個綜合的TAB標簽應用,高仿126郵箱風格的Tab,專用于網站的后臺管理界面菜單,與EXT風格非常相似,大家都知道,EXT固然漂亮,但是太紊腫,太龐大,一個小應用也用到很多EXT自身所帶的修飾文件,本風格簡化了EXT,而且也很漂亮。 2012-05-08 21:14:23 Ajax/JavaScript 超多樹形結構的JavaScript菜單實例 http://www.xyyouth.net.cn/changyongdaima/48068/ 超多樹形結構的JavaScript菜單實例,樹控菜單,有大家常用的展開折疊型,也就是節點樹;還有的是多級的菜單,類似樹型,右鍵菜單樹,還有的是懸浮層樹,都比較不錯,希望大家喜歡。 2012-09-21 21:57:31 Ajax/JavaScript fixed絕對定位的Ajax彈出層實例 http://www.xyyouth.net.cn/changyongdaima/48067/ 一個Ajax彈出層實例,使元素fixed定位 2012-05-24 13:20:14 Ajax/JavaScript Dojo Zoomer 強大的拖動放大帶圖片切換特效 http://www.xyyouth.net.cn/changyongdaima/48066/ DojoZoomer不但帶有圖片切換的效果,而且還具備強大的拖動放大功能,鼠標在大縮略圖上拖動,右側會顯示出拖動區域的大圖片,下側的縮略圖可供用戶更換不同的圖片,可以說本效果比較綜合,用到了兩個官方的JS封裝庫,有空好好研究一下。 2012-10-16 12:25:29 Ajax/JavaScript dBank 又一款開源的Javascript框架集 http://www.xyyouth.net.cn/changyongdaima/48065/ dBank又一款開源的Javascript框架集,bBank是一個輕量級的js框架,提供了css選擇器來獲取dom對象,ajax等一些功能。 使用bBank的css選擇器來獲取一個dom對象或dom對象數組 *注意:bBank是使用css操作符來選擇dom對象的,用#id來表示id;.class來表示樣式;[attr=val]來 2012-10-03 11:06:35 Ajax/JavaScript 網頁版俄羅斯方塊游戲,基于CSS+JavaScript http://www.xyyouth.net.cn/changyongdaima/48064/ 基于CSS+JavaScript的網頁版俄羅斯方塊游戲,不管是功能或是界面設計得都比較炫,很經典的網頁游戲,小時候經常玩俄羅斯方塊,就一種享受。本游戲可設置界面顏色、設置廣場數量、游戲速度、游戲難度等,前端編程的高手朋友有興趣要參考一下。 2012-05-08 21:14:23 Ajax/JavaScript Filtering Blocks JS+CSS美化的購物產品列表 http://www.xyyouth.net.cn/changyongdaima/48063/ FilteringBlocksJS+CSS美化的購物產品列表,響應鼠標變色,一眼能看出,這種寫法是來自一款國外的風格,具體樣式請看截圖,大家如有興趣,可下載參考。 2012-10-12 09:57:11 Ajax/JavaScript CoolTab 果然很酷的選項卡標簽插件 http://www.xyyouth.net.cn/changyongdaima/48062/ CoolTab果然很酷的選項卡標簽插件,這個插件用在統計報表或需要多步處理用戶信息的時候比較適合,比如用戶注冊,第一步、第二步、第三步可分別嵌套在每個不同的Tab里,或是將不同的統計基表放置在不同的Tab里,用戶可一清二楚瀏覽到每一步驟的詳細情況,當然,至于用途 2012-10-19 21:33:50 Ajax/JavaScript 在網頁上顯示、選擇、并排序列表的DataGrid插件 http://www.xyyouth.net.cn/changyongdaima/48061/ 在網頁上顯示列表數據的一個DataGrid插件,支持全選反癬表頭排序等,可按字符大孝修改時間排列顯示的數據,就像Windows資源管理器中的數據類似,這個插件是一個已封裝好的類,并包括兩種風格:經典風格和WindowsXP風格,根據內帶的演示代碼,你可以很方便的使用它。 2012-10-22 20:02:20 Ajax/JavaScript 又一個實用的Javascript網頁圖片放大鏡 http://www.xyyouth.net.cn/changyongdaima/48060/ 又一個實用的Javascript網頁圖片放大鏡,看上去挺不錯的,用JavaScript代碼實現的,沒有用jQuery,不過效果也很平滑,代碼量少,調用方便,你可以直接將代碼拷貝到網頁里,然后設置一下圖片的路徑就行了。 2012-10-16 12:25:29 Ajax/JavaScript JavaScript帶圖下拉導航菜單實例 http://www.xyyouth.net.cn/changyongdaima/48059/ JavaScript帶圖片的下拉導航菜單實例,當鼠標移過圖片的時候,展現出對應的二級菜單,移開則消失,圖片是隨便找的,請根據自己的需要重新制作。 2012-05-24 13:20:22 Ajax/JavaScript ymPrompt消息提示組件4.0版DEMO演示 http://www.xyyouth.net.cn/changyongdaima/48058/ ymPrompt消息提示組件4.0版DEMO演示 調用方法及參數說明 在頁面中引入ymPrompt.js。如: 在頁面中引入對應的皮膚文件的CSS,如: 自定義組件的默認配置信息(此步驟可選,該方法可以在任意時間調用) 頁面的js中通過ymPrompt.setDefaultCfg(cfg)方法修改組件部分或全部 2012-10-22 20:02:20 Ajax/JavaScript Js封裝的橫向多圖導航循環播放代碼 http://www.xyyouth.net.cn/changyongdaima/48057/ Js封裝的多圖橫向導航循環播放特效代碼,源碼中需要注意的:標簽切換效果[標題框子元素(id/li),內容框子元素(id/li),事件(mouseover/click),默認顯示第幾條(-1表示在鼠標移出全部隱藏,僅在事件mouseover有效),輪播時間(1秒=1000)],//滾動/切屏效果,[id,子容器/孫 2012-10-22 20:02:20 Ajax/JavaScript JS+CSS滾動圖片展示,速度緩沖 http://www.xyyouth.net.cn/changyongdaima/48056/ 速度緩沖型滾動圖片展示,JavaScript+CSS共同打造,Js代碼不太多。本滾動為鼠標控制型,如果不點擊則圖片是靜止的,如果點擊后,圖片開始滾動,最開始滾動很快,速度會慢慢減下來直到停止,好像帶有速度緩沖,這樣更容易讓人接受。 2012-09-04 16:01:31 Ajax/JavaScript 包括幾乎所有形式的圖片滾動JS封裝類 http://www.xyyouth.net.cn/changyongdaima/48055/ MSClass,一款通用不間斷滾動JS封裝類,幾乎支持目前所有流行風格的圖片滾動,橫向/豎向/連續/間斷/等多種形式. 更新說明:+加入功能*修正、完善 1.65.071228 *橫向、縱向滾動格式調整(解決橫向滾動換行的問題,無需特殊設置) *徹底解決由于IE問題導致上下滾動頁面留白的問 2012-09-21 21:57:31 Ajax/JavaScript lhgdialog 彈窗插件修正完善版 http://www.xyyouth.net.cn/changyongdaima/48054/ lhgdialog彈窗插件,以前就有的插件,已經作者的修正完善,并優化了代碼,重新打包奉上。 使用時注意:lhgdialog目錄是一個整體,不可破壞里面的目錄結構,也不可對里面的文件改名,可以改目錄名; lhgdialog支持的瀏覽器版本及類型:IE6.0+,Firefox2.0+,Chrome,Opera9 2012-09-04 16:01:31 Ajax/JavaScript picChange 自動圖片切換導航特效(JavaScript) http://www.xyyouth.net.cn/changyongdaima/48053/ 一個純JS版的圖片切換導航以及圖片輪轉特效,切換效果有三種:淡出、移出、直接切換等,還可設置切換時間、切換方向等,封裝的Js中部分代碼釋義如下: varlastImgOut=null;//記錄圖片消失的延時事件 varchangingPic=null;//增加一個對象用于保存消失過程中的圖片對象, 2012-10-12 09:57:11 Ajax/JavaScript 整理一組經典的Js新聞圖片導航切換效果 http://www.xyyouth.net.cn/changyongdaima/48052/ 收集整理一組很經典的圖片新聞切換效果,圖片過渡時,可以選擇滾動切換,也可以選擇透明的淡入淡出過渡,這一組效果都很實用,兼容性好,調用超方便,并結合鼠標響應效果,相信會讓不少朋友喜歡的。 2012-10-21 20:32:38 Ajax/JavaScript Dynamic Order Form購物車自動合計插件 http://www.xyyouth.net.cn/changyongdaima/48051/ DynamicOrderForm購物車自動合計插件,在購物網站都有用到。 2012-09-04 16:01:31 Ajax/JavaScript ScrollNews 新聞無縫循環滾動切換特效 http://www.xyyouth.net.cn/changyongdaima/48050/ ScrollNews新聞無縫循環滾動切換特效,不錯的滾動效果,壓縮包內的示例包括橫向和豎向兩種形式的滾動,本滾動結合圖片和文字,運用CSS和Javascript技術,將滾動的內容擴展至DIV標簽,也就是控制某個區域的滾動,而并非是一行或幾個簡單圖片構成的滾動。 2012-09-04 16:01:31 Ajax/JavaScript YTabs!多標簽新聞圖片橫向滾動導航 http://www.xyyouth.net.cn/changyongdaima/48049/ YTabs!多標簽的新聞圖片橫向滾動導航,鼠標點擊索引標號,可自動響應滾動,本滾動帶有緩沖特效,速度由快變慢,更具動感色彩,插件核心由YTabs提供,作者有很多JS作品,歡迎到官方網站下載瀏覽。 2012-09-21 21:57:31 Ajax/JavaScript Js滑動門,英文字母切換,仿淘寶購物索引效果 http://www.xyyouth.net.cn/changyongdaima/48048/ Js滑動門,英文字母切換,仿淘寶購物索引效果,實際上是一個特別的修改菜單,淘寶購物有一個分類導航和這個效果是類似的,效果不錯,希望大家喜歡。 2012-10-19 21:33:50 Ajax/JavaScript 不容錯過的YAlbum帶縮圖相冊,由JavaScript封裝 http://www.xyyouth.net.cn/changyongdaima/48047/ 不容錯過的YAlbum相冊,由JavaScript封裝,帶縮略圖索引,動感過渡效果,確實挺不錯哦。 2012-09-04 16:01:31 Ajax/JavaScript Javascript+CSS鼠標滑過顯示圖片的新聞列表 http://www.xyyouth.net.cn/changyongdaima/48046/ YTabs!基于Javascript+CSS的鼠標特效,當鼠標滑過新聞列表時會顯示對應的圖片,本代碼已經過多次修正,兼容性好,調用超方便。而且設計美觀,功能實用,有很多朋友都挺喜歡的哦。 2012-10-03 11:06:35 Ajax/JavaScript 騰訊qq客服圖片焦點輪換純Js+css,無jquery http://www.xyyouth.net.cn/changyongdaima/48045/ 來自騰訊官網客服專區網頁上的焦點圖切換效果,帶縮略圖平滑圖片切換,完全Javascript+CSS代碼實現,并非使用了jQuery插件。而且JS代碼還非常少,不虧是大網站的程序員所寫,運行效果如上圖所示,鼠標移動到小圖上,會變換出大圖片來,很經典很實用的一種導航特效。 2012-09-04 16:01:31 Ajax/JavaScript JavaScript圖片盒子,仿騰訊網帶縮略圖圖片瀏覽特效 http://www.xyyouth.net.cn/changyongdaima/48044/ 一款JavaScript圖片盒子,仿騰訊網的圖片瀏覽特效,帶縮圖,由胡尊杰編寫封裝,暫時沒有添加圖片過渡效果,關于滾動條的控制,簡要說明一下: pyzy.MinImgsScroll={ intAllScrollSeep:0,//步長,單次滾動的幅度 intScrollCount:0,//滾動長度記錄記錄按象素滾動的長度與 2012-09-21 21:57:31 Ajax/JavaScript YMessageBox 確認提示、警告、錯誤提示窗等等 http://www.xyyouth.net.cn/changyongdaima/48043/ YMessageBox確認提示、警告、錯誤提示窗等,用YaoUI重新寫了下,但是沒有做任何的優化,看上去還不錯,在使用Ajax程序時,用這個模擬提示窗口應該比瀏覽器自帶的提示框看上去更親切。 2012-10-12 09:57:11 Ajax/JavaScript JS仿Flash平滑圖片切換正方形版 http://www.xyyouth.net.cn/changyongdaima/48042/ JavaScript摸仿Flash平滑的圖片切換特效,正方形版,支持自動播放功能,用鼠標直接點擊也可實現切換。 2012-10-22 20:02:20 Ajax/JavaScript Ajax 多標簽滾動導航,基于YTabs! http://www.xyyouth.net.cn/changyongdaima/48041/ 標簽選項卡大家見過不少了吧,不過支持標簽滾動的選項卡切換導航倒是不太多,本選項卡就是這種支持標簽滾動的選項卡,可以支持加載HTML和JSON格式的數據。ytabs.js中的Carousel類來處理滾動效果,ytabs.js中還包含了YAO和tabView兩個類,YAO是根據其他資源整理的一個常 2012-10-03 11:06:35 Ajax/JavaScript ArtDialog Vista風格高兼容度的javascript對話框組件 http://www.xyyouth.net.cn/changyongdaima/48040/ ArtDialog仿Vista風格的javascript對話框組件,具有超高的兼容性,對IE、火狐、Google瀏覽器兼容都不錯,而且設計精美,彈出框的功能也很多:比如彈出圖片、彈出動畫、右下角消息、詢問框、警告、彈出菜單、調用外部頁面等,代碼書寫規范,也可作為學習JavaScript的參 2012-09-21 21:57:31 Ajax/JavaScript sheyMsg 很漂亮的仿qq右下角滑出廣告插件 http://www.xyyouth.net.cn/changyongdaima/48039/ sheyMsg很漂亮的仿qq右下角滑出廣告插件,仿騰訊右下角消息提示,showDalay:設置頁面加載后顯示時間延遲;autoHide:顯示后自動隱藏的時間,默認30秒,設置為0表示不自動隱藏;隱藏時間如果設置的話,到下一次show時才會生效。 2012-10-16 12:25:29 Ajax/JavaScript YTabs!MSN皮膚風格的圖片自動切換新聞導航 http://www.xyyouth.net.cn/changyongdaima/48038/ YTabs!MSN皮膚圖片自切換標題新聞,一個很經典的圖片新聞效果,皮膚是采用的是MSN的,兼容性好,調用方便。ytabs.js中包含了YAO和tabView兩個類,YAO是我根據YUI還有一些其他資源整理的一個常用方法類,采用單體模式。而tabView則是完全由我自己,也是這個圖片新聞效 2012-10-03 11:06:35 Ajax/JavaScript YLogger v1.1 右下角廣告插件下載版 http://www.xyyouth.net.cn/changyongdaima/48037/ YLoggerv1.1右下角廣告插件,為了方便開發AJAX程序的調試用的,在頁面中直接加載Logger跟蹤框,免去了使用alert()方法在循環時不停點擊的煩惱。雖然沒有firebug或者firebuglite那么牛,但是也算是自己開發工具的一個初步的嘗試吧。 2012-10-12 09:57:11 Ajax/JavaScript JS+FLASH+XML帶縮略圖的8屏圖片導航 http://www.xyyouth.net.cn/changyongdaima/48036/ JS+FLASH+XML,有縮略圖,適合影視推薦展示專用,8幅圖片輪番切換,響應鼠標動作,和滑動門效果相仿,不過這個是使用SWF為主文件,XML配置圖片路徑以及標題和鏈接等信息,JS作某些SWF硬性參數設置以及優化等工作。 2012-09-21 21:57:31 Ajax/JavaScript jquery1.4打造個性化日歷選擇器模塊 http://www.xyyouth.net.cn/changyongdaima/48035/ 模塊化的日歷控件,基于jquery1.4模塊使用時需要在使用日歷的文本框需要指定一個類_calendar或_calendar_noearly(代表不能選擇今天以前的日期),即可綁定。代碼經過精心修正,避免與jQuery的this沖突。日歷可返回形如:yyyy-MM-dd,wd格式的日期,wd為星期幾,0代 2012-10-22 20:02:20 Ajax/JavaScript YCalendar - 風格漂亮的JS日歷控件 http://www.xyyouth.net.cn/changyongdaima/48034/ YCalendar-風格漂亮的JS日歷控件,本控件是在《Javascript設計模式》一書中第十三章《享元模式》的Web日歷代碼的基礎上修改擴展出來的。基本實現了一個簡單的日歷控件的功能,setYear()方法顯示年歷,setMonth()方法顯示月歷。程序還不很完善,僅供大家學設計模式參考 2012-10-03 11:06:35 Ajax/JavaScript 仿QQ相冊帶左右箭頭控制的圖片瀏覽效果 http://www.xyyouth.net.cn/changyongdaima/48033/ 帶左右箭頭控制的圖片瀏覽效果,QQ網站常見到的圖片預覽特效,本特效尚未100%開發完成,發上來僅供學習參考,實際使用過程中沒有長時間測試。這里感謝作者共享出來。 2012-09-21 21:57:31 Ajax/JavaScript Ja仿京東購物商城分類導航模塊 http://www.xyyouth.net.cn/changyongdaima/48032/ Ja仿京東購物商城分類導航模塊,以前有不少的朋友在網上發貼求助這款菜單,這次發上來的是一位JS高手自已寫的,作者官方網站還有許多類似的JS小插件,歡迎前去瀏覽。 2012-10-12 09:57:11 Ajax/JavaScript 夫妻性生生活视频 - 视频 - 在线观看 - 影视资讯 - 品爱网