您當(dāng)前位置：首頁(yè) > web前端 > jquery > jQuery練習(xí)：簡(jiǎn)單的圖片結(jié)果展示效果

jQuery練習(xí)：簡(jiǎn)單的圖片結(jié)果展示效果

來(lái)源：程序員人生發(fā)布時(shí)間：2014-03-09 23:04:50 閱讀次數(shù)：3014次

　　今天看到google圖片搜索結(jié)果頁(yè)面，感覺(jué)簡(jiǎn)潔實(shí)用，于是用jquery粗略的模仿了一下，再次感覺(jué)到j(luò)query的強(qiáng)大和易用，基本思路初步實(shí)現(xiàn)了，再整合ajax和json，應(yīng)該可以做一個(gè)簡(jiǎn)單的應(yīng)用了 :)

<html><head><title>jquery練習(xí)——簡(jiǎn)單的圖片結(jié)果展示效果-liehuo.net</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 id="cdiv"><div id="cright">></div><div id="cleft"><</div><div id="cmain">圖片1</div></div><br class="clearfloat"/><div id="cfoot"><ul><li 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><script type="text/javascript" src="http://www.vxbq.cn/uploads/common/jquery-1.3.2.min.js"></script><script type="text/javascript">function setContent(){var curobj=$("#cfoot li[pv]:first");if(curobj.length>0)$("#cmain").html(curobj.addClass("cur").attr('pv'));};function move(position){position=position||"prev";eval('var curobj=$("#cfoot li.cur[pv]");if(curobj.'+position+'("#cfoot li").length>0){$("#cmain").html(curobj.removeClass("cur").'+position+'("#cfoot li").addClass("cur").attr("pv"));}');}$(function(){$(document).keydown(function (e) {switch(e.which){case 37:move('prev');break;case 39:move('next');break;default:break;}});$("#cleft").click(function(){move('prev');});$("#cright").click(function(){move('next');});$("#cfoot li").click(function(){$("#cfoot li.cur").removeClass("cur");$("#cmain").html($(this).addClass("cur").attr('pv'));});});</script></body></html><br /><center>如不能顯示效果，請(qǐng)按Ctrl+F5刷新本頁(yè)，更多網(wǎng)頁(yè)代碼：<a href='http://www.vxbq.cn/' target='_blank'>http://www.vxbq.cn/</a></center>
提示：可修改后代碼再運(yùn)行!

　　作者：http://www.cnblogs.com/libsource/

生活不易，碼農(nóng)辛苦
如果您覺(jué)得本網(wǎng)站對(duì)您的學(xué)習(xí)有所幫助,可以手機(jī)掃描二維碼進(jìn)行捐贈(zèng)
程序員人生

------分隔線----------------------------

上一篇 網(wǎng)絡(luò)推廣中的三個(gè)最重要的細(xì)節(jié)

下一篇 像看財(cái)務(wù)報(bào)表一樣去閱讀和分析網(wǎng)站統(tǒng)計(jì)表

分享到:

------分隔線----------------------------

為碼而活

積分：4237

15粉絲

7關(guān)注

欄目熱點(diǎn)

多多色-多人伦交性欧美在线观看-多人伦精品一区二区三区视频-多色视频-免费黄色视屏网站-免费黄色在线

jQuery練習(xí)：簡(jiǎn)單的圖片結(jié)果展示效果