编程 Javascript

jQuery插件zoom实现图片全屏放大弹出层特效

Posted in Javascript onApril 15, 2015

1.介绍

jQuery制作zoom图片全屏放大弹出层插件。

2.使用方法

1.引入以下的js和css文件

<link rel="stylesheet" href="css/zoom.css" media="all" />
 <script src="js/jquery-1.9.1.min.js"></script>
 <script src="js/zoom.min.js"></script>

2.在head标签中加入以下js代码

<ul class="gallery">
   <li><a href="path/to/large1.jpg"><img src="path/to/thumbnail1.jpg" /></a></li>
   <li><a href="path/to/large2.jpg"><img src="path/to/thumbnail2.jpg" /></a></li>
   <li><a href="path/to/large3.jpg"><img src="path/to/thumbnail3.jpg" /></a></li>
   <li><a href="path/to/large4.jpg"><img src="path/to/thumbnail4.jpg" /></a></li>
 </ul>

3.演示图

jQuery插件zoom实现图片全屏放大弹出层特效

4.全部代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery制作zoom图片全屏放大弹出层插件</title>
<style type="text/css">
body{overflow-y:scroll;font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, sans-serif;background:#f4f4f4;padding:0;margin:0;}
h1{font-size:31px;line-height:32px;font-weight:normal;margin-bottom:25px;}
a,a:hover{border:none;text-decoration:none;}
img,a img{border:none;}
pre{overflow-x:scroll;background:#ffffff;border:1px solid #cecece;padding:10px;}
.clear{clear:both;}
.zoomed > .container{-webkit-filter:blur(3px);filter:blur(3px);}
.container{width:505px;margin:0 auto;}
.gallery{list-style-type:none;float:left;background:#ffffff;padding:20px 20px 10px 20px;margin:0;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.25);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.25);box-shadow:0 1px 3px rgba(0,0,0,0.25);-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;}
.gallery li{float:left;padding:0 10px 10px 0;}
.gallery li:nth-child(6n){padding-right:0;}
.gallery li a,.gallery li img{float:left;}
</style>
<!--图片弹出层样式 必要样式-->
<link rel="stylesheet" href="css/zoom.css" media="all" />
</head>
<body>

<div class="container">

 <h1>ZOOM - jQuery photo gallery plugin</h1>
 <ul class="gallery">
 <li><a href="img/gallery/DSC_0008-660x441.jpg"><img src="img/gallery/DSC_0008-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0014-660x441.jpg"><img src="img/gallery/DSC_0014-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0019-660x441.jpg"><img src="img/gallery/DSC_0019-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0061-660x441.jpg"><img src="img/gallery/DSC_0061-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0063-441x660.jpg"><img src="img/gallery/DSC_0063-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0090-660x441.jpg"><img src="img/gallery/DSC_0090-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0091-660x441.jpg"><img src="img/gallery/DSC_0091-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0161-660x441.jpg"><img src="img/gallery/DSC_0161-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0163-660x441.jpg"><img src="img/gallery/DSC_0163-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0187-660x441.jpg"><img src="img/gallery/DSC_0187-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0220-660x441.jpg"><img src="img/gallery/DSC_0220-69x69.jpg" /></a></li>
 <li><a href="img/gallery/DSC_0222-660x441.jpg"><img src="img/gallery/DSC_0222-69x69.jpg" /></a></li>
 </ul>
 <div class="clear"></div>
</div>

<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/zoom.min.js"></script>

</body>
</html>

以上所述就是本文的全部内容了，希望大家能够喜欢。

jQuery插件zoom实现图片全屏放大弹出层特效

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

自写的一个jQuery圆角插件

Oct 26 Javascript

dtree 网页树状菜单及传递对象集合到js内，动态生成节点

Apr 14 Javascript

Asp.Net alert弹出提示信息的几种方法总结

Jan 29 Javascript

用jquery仿做发微博功能示例

Apr 18 Javascript

解决自定义$(id)的方法与jquery选择器$冲突的问题

Jun 14 Javascript

javascript实现rgb颜色转换成16进制格式

Jul 10 Javascript

纯js代码实现未知宽高的元素在指定元素中垂直水平居中显示

Sep 12 Javascript

Angularjs中如何使用filterFilter函数过滤

Feb 06 Javascript

jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

Feb 25 Javascript

详解vue.js的事件处理器v-on:click

Jun 27 Javascript

微信小程序转发功能的实现

Aug 04 Javascript

js实现多张图片每隔一秒切换一张图片

Jul 29 Javascript

javascript中Math.random()使用详解

Apr 15 #Javascript

js数组依据下标删除元素

Apr 14 #Javascript

js获取数组的最后一个元素

Apr 14 #Javascript

jQuery实现鼠标划过修改样式的方法

Apr 14 #Javascript

jquery仿百度经验滑动切换浏览效果

Apr 14 #Javascript

jQuery获得子元素个数的方法

Apr 14 #Javascript

jQuery简单实现遍历数组的方法

Apr 14 #Javascript

You might like

PHP 和 COM

2006/10/09 PHP

php中随机函数mt_rand()与rand()性能对比分析

2014/12/01 PHP

thinkPHP多表查询及分页功能实现方法示例

2017/07/03 PHP

弹出模态框modal的实现方法及实例

2017/09/19 PHP

js中将多个语句写成一个语句的两种方法小结

2007/12/08 Javascript

FireFox JavaScript全局Event对象

2009/06/14 Javascript

原生javascript实现图片轮播效果代码

2010/09/03 Javascript

JavaScript版DateAdd和DateDiff函数代码

2012/03/01 Javascript

jQuery源码中的chunker 正则过滤符分析

2012/07/31 Javascript

js动态修改整个页面样式达到换肤效果

2014/05/23 Javascript

jquery实现多行文字图片滚动效果示例代码

2014/10/10 Javascript

js拆分字符串并将分割的数据放到数组中的方法

2015/05/06 Javascript

浏览器中url存储的JavaScript实现

2015/07/07 Javascript

js简单实现图片延迟加载的方法

2016/07/19 Javascript

正则验证小数点后面只能有两位数的方法

2017/02/28 Javascript

node.js实现登录注册页面

2017/04/08 Javascript

JS Array.from()将伪数组转换成数组的方法示例

2020/03/23 Javascript

JavaScript中reduce()的5个基本用法示例

2020/07/19 Javascript

如何利用node转发请求详解

2020/09/17 Javascript

一起来了解一下JavaScript的预编译(小结)

2021/03/01 Javascript

python中去空格函数的用法

2014/08/21 Python

Python中的日期时间处理详解

2016/11/17 Python

Python骚操作之动态定义函数

2019/03/26 Python

Python和Java的语法对比分析语法简洁上python的确完美胜出

2019/05/10 Python

Django组件content-type使用方法详解

2019/07/19 Python

xadmin使用formfield_for_dbfield函数过滤下拉表单实例

2020/04/07 Python

Python pytesseract验证码识别库用法解析

2020/06/29 Python

一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系

2020/07/03 Python

乌克兰时尚鞋子和衣服购物网站：Born2be

2018/05/24 全球购物

美国木工工具和用品商店：Woodcraft

2019/10/30 全球购物

中科软测试工程师面试题

2012/06/16 面试题

优良学风班申请材料

2014/02/13 职场文书

期末评语大全

2014/05/04 职场文书

学生自我评语

2015/01/04 职场文书

业务员岗位职责

2015/02/03 职场文书

小学语文继续教育研修日志

2015/11/13 职场文书