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 相关文章推荐
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
推荐4个原生javascript常用的函数
Jan 12 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
基于jQuery实现的扇形定时器附源码下载
Oct 20 Javascript
jquery实现文本框的禁用和启用
Dec 07 Javascript
JavaScript 栈的详解及实例代码
Jan 22 Javascript
jQuery插件HighCharts实现的2D堆条状图效果示例【附demo源码下载】
Mar 14 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JS实现页面打印(整体、局部)
Aug 18 Javascript
vue element 生成无线级左侧菜单的实现代码
Aug 21 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数组函数序列之array_slice() - 在数组中根据条件取出一段值,并返回
2011/11/07 PHP
smarty中改进truncate使其支持中文的方法
2016/05/30 PHP
php获取linux命令结果的实例
2017/03/13 PHP
js玩一玩WSH吧
2007/02/23 Javascript
基于jquery实现图片广告轮换效果代码
2011/07/07 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
jQuery实现的AJAX简单弹出层效果代码
2015/11/26 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
Vue.js 父子组件通讯开发实例
2016/09/06 Javascript
jQuery实现邮箱下拉列表自动补全功能
2016/09/08 Javascript
JavaScript 栈的详解及实例代码
2017/01/22 Javascript
js获取json中key所对应的value值的简单方法
2020/06/17 Javascript
javascript简单写的判断电话号码实例
2017/05/24 Javascript
Vue 组件(component)教程之实现精美的日历方法示例
2018/01/08 Javascript
vue项目部署上线遇到的问题及解决方法
2018/06/10 Javascript
vue使用v-for实现hover点击效果
2018/09/29 Javascript
layui 点击重置按钮, select 并没有被重置的解决方法
2019/09/03 Javascript
详解Vue之事件处理
2020/07/10 Javascript
Pandas中把dataframe转成array的方法
2018/04/13 Python
selenium+python实现自动登录脚本
2018/04/22 Python
解决python matplotlib imshow无法显示的问题
2018/05/24 Python
python里运用私有属性和方法总结
2019/07/08 Python
利用Python实现kNN算法的代码
2019/08/16 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
固特异美国在线轮胎店:Goodyear Tire
2019/02/23 全球购物
JD Sports丹麦:英国领先的运动时尚零售商
2020/11/24 全球购物
光声世纪笔试题目
2012/08/25 面试题
总经理秘书工作职责
2013/12/26 职场文书
党校学习思想汇报
2014/01/06 职场文书
建房协议书
2014/04/11 职场文书
小学生校园广播稿
2014/09/28 职场文书
小学生差生评语
2014/12/29 职场文书
2015年五四青年节演讲稿
2015/03/18 职场文书
canvas多重阴影发光效果实现
2021/04/20 Javascript