您當前位置：首頁 > web前端 > jquery > jQuery練習：簡單的圖片結果展示效果

jQuery練習：簡單的圖片結果展示效果

來源：程序員人生發布時間：2014-03-09 23:04:50 閱讀次數：3024次

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

<html><head><title>jquery練習——簡單的圖片結果展示效果-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.jyygyx.com/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>如不能顯示效果，請按Ctrl+F5刷新本頁，更多網頁代碼：<a href='http://www.jyygyx.com/' target='_blank'>http://www.jyygyx.com/</a></center>
提示：可修改后代碼再運行!

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

生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
程序員人生

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

上一篇 網絡推廣中的三個最重要的細節

下一篇 像看財務報表一樣去閱讀和分析網站統計表

分享到:

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

為碼而活

積分：4237

15粉絲

7關注

欄目熱點

日本搞逼视频_黄色一级片免费在线观看_色99久久_性明星video另类hd_欧美77_综合在线视频

jQuery練習：簡單的圖片結果展示效果