图片浏览器_js打造_源码开放
这是在一个项目中用到的一个功能:上传后的图片是比较小的图片,那么要提高用户体验
就要对UI设计的要求要高,这里做了一个js的图片浏览器。
运行效果:
点击图片左上角:
具体是怎么实现的,我想现在看了运行效果了以后,这是大家都很关心的事儿吧。
代码如下:
index.html
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>Fresh Creative, CSS Template Design, Free Download</title> 6 7 <link href="fullsize/fullsize.css" media="screen" rel="stylesheet" type="text/css" /> 8 <script type="text/javascript" src="fullsize/jquery.js"></script> 9 <script type="text/javascript" src="fullsize/jquery.fullsize.minified.js"></script> 10 <script language="javascript" type="text/javascript"> 11 function clearText(field) 12 { 13 if (field.defaultValue == field.value) field.value = ''; 14 else if (field.value == '') field.value = field.defaultValue; 15 } 16 $(function(){ 17 $("div.templatemo_gallery img").fullsize(); 18 }); 19 </script> 20 </head> 21 <body> 22 <div class="templatemo_gallery"> <img src="store/scale_2012_4_16_11_17_33a13a5903jw1dry2h78mr0j.jpg" class="left" longdesc="store/2012_4_16_11_17_33a13a5903jw1dry2h78mr0j.jpg" title="Employee" alt="Employee" /> 23 24 </body> 25 </html>