图片浏览器_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>

源码https://files.cnblogs.com/hongten/source.zip

posted @ 2012-05-16 11:35  Hongten  阅读(1875)  评论(0编辑  收藏  举报
Fork me on GitHub