jquery 簡單的圖片展示效果

更新時間：2009年12月16日 22:17:59 作者：

今天看到google圖片搜索結果頁面，感覺簡潔實用，于是用jquery粗略的模仿了一下再次感覺到jquery的強大和易用，基本思路初步實現了，再整合ajax和json，應該可以做一個簡單的應用了 :)

<html> <head> <title>jquery練習——簡單的圖片結果展示效果--cnblogs libsource/</title> <style> #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:100px;line-height:100px;float:left;text-align:center;border:1px solid #D5DDF9;margin-right:20px;cursor:pointer; } #cfoot li.cur{ border:1px solid #ffcc33; } #cleft,#cright{ float:left;text-align:center;width:50px;height:500px;display:inline-block;cursor:pointer; } #cright{ float:right; } .clearfloat{ clear: both;height: 0;font-size: 1px;line-height: 0px; } </style> </head> <body> <div   class="ublnpf9mb"   id="cdiv"> <div   class="ublnpf9mb"   id="cright">> </div> <div   class="ublnpf9mb"   id="cleft">< </div> <div   class="ublnpf9mb"   id="cmain"> 圖片1 </div> </div> <br class="clearfloat"/> <div   class="ublnpf9mb"   id="cfoot"> <ul> <li id="ublnpf9mb"    class="cur" pv="圖片1">縮略1</li> <li pv="圖片2">縮略2</li> <li pv="圖片3">縮略3</li> <li pv="圖片4">縮略4</li> <li pv="圖片5">縮略5</li> </ul> </div>   </body> </html>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁面才能執(zhí)行]

您可能感興趣的文章:

jquery和javascript中如何將一元素的內容賦給另一元素
將一元素的內容賦給另一元素，在某些情況下還是比較實用的，下面為大家講解下jquery和javascript中是如何實現的
2014-01-01
jQuery實現的倒計時效果實例小結
這篇文章主要介紹了jQuery實現的倒計時效果,結合實例形式總結分析了jQuery針對日期與時間的運算實現倒計時功能的相關技巧,需要的朋友可以參考下
2016-04-04
使用jquery給input和textarea設定ie中的focus
在瀏覽網站的過程中，我們經?？梢钥匆姰斒髽它c擊后樣式改變的文本框和文本域,那么這種效果是如何實現的呢?
2008-05-05
基于jQuery傾斜打開側邊欄菜單特效代碼
基于jQuery多重圖片無限循環(huán)動畫效果，本文給大家分享基于jQuery傾斜打開側邊欄菜單特效代碼，感興趣的朋友可以參考下
2015-09-09
推薦40款強大的 jQuery 導航插件和教程(上篇)
在下面的集合中，你會發(fā)現很多便利的 jQuery 導航插件和有用的教程，幫助你實現充滿吸引力的網站導航，讓你網站更有組織性和交互性
2012-09-09
把html頁面的部分內容保存成新的html文件的jquery代碼
把html頁面的部分內容保存成新的html文件，用到了jquery的獲取指定id的內容。然后保存代碼。
2009-11-11
jquery中 $.expr使用實例介紹
這篇文章主要以示例介紹了jquery中 $.expr使用,需要的朋友可以參考下
2014-06-06
jquery通過索引值操作html元素的代碼
這篇文章主要介紹了jquery通過索引值操作html元素的代碼,需要的朋友可以參考下
2023-05-05
jQuery getJSON()+.ashx 實現分頁(改進版)
參考了上一篇Asp .net ＋jquery +.ashx 文件實現分頁并作了改進:ashx返回json數據，減少傳輸數據量，html頁面樣式控制也比較靈活，感興趣的朋友可以參考下哈
2013-03-03
利用jQuery實現漂亮的圓形進度條倒計時插件
jQuery Final Countdown是一款時尚的圓形進度條樣式的jQuery倒計時插件。本篇文章給大家分享利用jQuery實現漂亮的圓形進度條倒計時插件，感興趣的朋友一起看看吧
2015-09-09