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>

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

Javascript 相关文章推荐
javascript arguments 传递给函数的隐含参数
Aug 21 Javascript
JavaScript实现动态创建CSS样式规则方案
Sep 06 Javascript
jQuery异步上传文件插件ajaxFileUpload详细介绍
May 19 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
移动端js图片查看器
Nov 17 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
May 13 Javascript
javascript实现的字符串转换成数组操作示例
Jun 13 Javascript
Node如何后台数据库使用增删改查功能
Nov 21 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
多页vue应用的单页面打包方法(内含打包模式的应用)
Jun 11 Javascript
Vue 使用typescript如何优雅的调用swagger API
Sep 01 Javascript
vue-cli4.5.x快速搭建项目
May 30 Vue.js
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 版获取重定向后的地址(代码)
2013/06/26 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
使用phpQuery采集网页的方法
2013/11/13 PHP
初识laravel5
2015/03/02 PHP
PHP设计模式之建造者模式(Builder)原理与用法案例详解
2019/12/12 PHP
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
ext前台接收action传过来的json数据示例
2014/06/17 Javascript
JavaScript中利用各种循环进行遍历的方式总结
2015/11/10 Javascript
AngularJS中过滤器的使用与自定义实例代码
2016/09/17 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
angular中实现控制器之间传递参数的方式
2017/04/24 Javascript
在百度搜索结果中去除掉一些网站的资料(通过js控制不让显示)
2017/05/02 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
JS面试题中深拷贝的实现讲解
2020/05/07 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
2020/06/10 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
python sys模块sys.path使用方法示例
2013/12/04 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
python os.listdir按文件存取时间顺序列出目录的实例
2018/10/21 Python
Python 确定多项式拟合/回归的阶数实例
2018/12/29 Python
10招!看骨灰级Pythoner玩转Python的方法
2019/04/15 Python
使用Fabric自动化部署Django项目的实现
2019/09/27 Python
css3 中translate和transition的使用方法
2020/03/26 HTML / CSS
html5 视频播放解决方案
2016/11/06 HTML / CSS
信息技术专业大学生个人的自我评价
2013/10/05 职场文书
大学生社会实践活动总结
2014/07/03 职场文书
教师群众路线学习心得体会
2014/11/04 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
三八节活动简报
2015/07/20 职场文书
《兰兰过桥》教学反思
2016/02/20 职场文书
《曾国藩家书》读后感——读家书,立家风
2019/08/21 职场文书
python 用递归实现通用爬虫解析器
2021/04/16 Python
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis
实操Python爬取觅知网素材图片示例
2021/11/27 Python
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers