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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏繁花云

11.14学习总结

解决方案:mysqli_set_charset($conn,utf8)

840
来自专栏自动化测试实战

Appium+python (3) 元素定位(1)

4457
来自专栏大前端开发

使用mpvue开发小程序教程(四)

在上一章节中,我们将vue-cli命令行工具生成的代码骨架中的src目录清理了一遍,然后从头开始配置和编写了一个可以运行的小程序页面,算是正真走上了使用mpvu...

1062
来自专栏Python中文社区

100行Python代码实现自动抢火车票

又到一年一度春运大会,2017年春运抢火车票还是那么难,各大互联网公司都推出抢票服务,只要加钱给服务费就可以增加抢到票的几率,有些代售火车票点,说给100元服...

5798
来自专栏恰童鞋骚年

微信小程序开发初探

  (1)一切以用户价值为依归→用户是微信的核心,所以微信中没有很多与客户无关的功能,比如QQ中的乱七八糟一系列东西。

4693
来自专栏企鹅号快讯

史上最全的web前端学习教程汇总!

第一阶段:HTML+CSS HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScript基础:js基础教程、js内置对象常用方...

4505
来自专栏Coding迪斯尼

Reactjs+BootStrap开发自制编程语言Monkey的编译器:创建简易的页面IDE

1822
来自专栏司想君

React编程思想

能够按照构建的方式来思考web app的实现,是React众多优点之一。在这篇文章中,我们将引导你进行使用React构建可搜索产品数据表的思考过程。

5255
来自专栏云飞学编程

Python学习,还在用正则或者bs4做爬虫吗?来试试css选择器吧

之前写的一些爬虫都是用的正则、bs4、xpath做为解析库来实现,如果你对web有所涉及,并且比较喜欢css选择器,那么就有一个更适合的解析库—— PyQuer...

1042
来自专栏华仔的技术笔记

React Native 初探

3746

扫码关注云+社区

领取腾讯云代金券