越来越觉得在网站开发中，前端的效果最不能忽视，包括用户体验与交互效果，当然还有CSS等等，刚看完了一本叫《Don't make me think》的书，说的是关于WEB用户体验等方面的东西，我们如何选择首页的说明文字，如何让浏览者不会在你的网站中迷失，如何让浏览者迅速了解你的网站，原来都是很有学问的~~总之也不简单，慢慢领会吧。

paperen也很久没发东西了，趁着有空，做了个图片展览的东西，还勉强过得去吧。

Demo地址：http://paperen.com/demo/image-thumb/

这个效果其实很多见了，一般在一些购物网上都会有这种效果，难度也不大，使用jquery真的很方便就能实现很多cool的效果。例如这个就是

其实对于paperen弄的那个，实现起来很简单，不过还是给大家说说吧。

1.引入jquery引擎是必须的

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>

2.打造html结构

<div class="img_show">
	<h5>图片展览<small>[Paperen]</small></h5>
	<div id="img_big" class="bigone">
    	<a href="11559c21572.jpg" target="_blank" class="magnifier" alt="view big image" title="查看大图"></a>
    	<img src="images/11559c21572.jpg" alt="Image Thumb" title="Image Thumb" />
    </div>
    
    <ul class="img_thumb">
    	<li><a href="javascript:void(0);"><img src="images/11559c21572.jpg" data="images/11559c21572.jpg" alt="image_1" title="image_1" /></a></li>
    </ul>
    
    <div class="c"></div>
</div>

3.Css登场

ul,li{list-style:none;}
.c{clear:both;}
.img_show{margin:25px auto;width:265px;height:auto;padding:10px;background:#F7F7F7;position:relative;overflow:hidden;outline: 1px solid #ddd;border-top:1px #FFF solid;}
.img_show h5{border-bottom:1px #DDD solid;padding:0px 0px 5px 0px;margin:0px 0px 10px 0px;}
.img_show h5 small{font-size:11px;color:#CCC;font-weight:normal;padding:0px 0px 0px 5px;}
.img_show .bigone{margin:0px auto 15px auto;width:130px;position:relative;}
.img_show .bigone img{padding:5px;border:1px #DDD solid;background:#FFF;}
.img_show .bigone .magnifier{display:block;width:16px;height:16px;background:url(images/magnifier.png) no-repeat;position:absolute;top:5px;left:5px;}
.img_thumb li{float:left;margin:0px 3px 3px 3px;}
.img_thumb li a{display:block;border:1px #CCC solid;padding:2px;}
.img_thumb li a:hover{background:#FFF;border:1px #999 solid;}
.img_thumb li img{width:54px;height:54px;}

4.使用js衔接一切

$(document).ready(function(){
	$(".img_thumb img").fadeTo('fast', 0.5);//初始化所有小图片的透明度
	fadeToEffect(".img_thumb img");//为所有小图添加上交互事件
	$(".img_thumb img").click(function(){//定义点击小图触发的动作
		var next_img = $(this).attr('data');
		go_next_img(next_img);
	});
});
//定义小图鼠标交互效果,使用fadeTo来调节透明度
function fadeToEffect(obj){
	$(obj).mouseover(function(){
		$(this).fadeTo('normal', 1);
	});
	$(obj).mouseout(function(){
		$(this).fadeTo('fast', 0.5);
	});
}
//大图片的切换
function go_next_img(imgurl){
	$(".magnifier").hide("fast", function(){
		$(this).attr("href", imgurl);
	});
	$("#img_big img").fadeTo('normal', 0, function(){
		$("#img_big img").attr('src', imgurl).fadeTo('normal', 1, function(){
			$(".magnifier").show();
		});
	});
}

jquery确实很好，paperen其实根本没有踏实地学过JavaScript的~~而是直接转入到jquery来~~所以现在再回头看JavaScript的书。因为感觉这样有点虚……

而对于jquery可以到这个网站下载手册或者在线查阅相关资料：http://jquery-api-zh-cn.googlecode.com/svn/trunk/index.html。

而最后想谈谈关于网站商品图片的东西，正如上面那个相机截图那样，底部有五张小图，每点击其小图，大图也会跟着产生切换，在实现上当然完全可以使用一张图片实现，使用css对大图的大小进行压缩的办法来实现小图，或许有些少web开发经验的人都会使用这种办法，但是paperen觉得这种办法确实不治本，因为大图的清晰度确定要高固然文件大小也会大，一张至少几百KB，而如果使用Css对图片进行长高的压缩，其实是没有改变图片的大小，而这样的话就会影响页面加载速度，特别是对于首页而言（因为需要显示很多商品）。

paperen那个例子中自己可以看看，右击大图看属性与右击该小图看属性，其大小是一样的，paperen这里也没有使用到真正意义上的缩略图。

当然在图片不多数据量不大的页面上或许还看不出速度上的影响，但是在数据量综合的页面就能明显感觉出来了，比如网上商场首页商品列表。这种问题在开发的时候还是值得注意的。