您当前位置：首页 > web前端 > jquery > jQuery练习：简单的图片结果展示效果

jQuery练习：简单的图片结果展示效果

来源：程序员人生发布时间：2014-03-09 23:04:50 阅读次数：2829次

　　今天看到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.wfuyu.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.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

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

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生

------分隔线----------------------------

上一篇 网络推广中的三个最重要的细节

下一篇 像看财务报表一样去阅读和分析网站统计表

分享到:

------分隔线----------------------------

为码而活

积分：4237

15粉丝

7关注

栏目热点