jQuery插件zoom实现图片全屏放大弹出层特效,jQuery完毕为图片增多镜头放大效应的方式

永利皇宫402

正文实例汇报了jQuery实现为图片增添镜头放大功能的秘籍。分享给大家供我们仿照效法。具体如下:

1.介绍

运营效果如下图所示:

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

永利皇宫402 1

永利皇宫402 ,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>
$(function () {
$("#img_01").imageLens();
$("#img_02").imageLens({ lensSize: 200 });
$("#img_03").imageLens({ imageSrc: "images/sample01.jpg" });
$("#img_04").imageLens({ borderSize: 8, borderColor: "#06f" });
});

  2.在head标签中步向以下js代码

总体实例代码点击这里本站下载.rar)。

 <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>

盼望本文所述对大家的jQuery程序设计具备援助。

3.演示图

您只怕感兴趣的稿子:

  • 依附Jquery插件开拓之图片放大镜效果(仿Tmall)
  • 用JQuery模仿天猫商城的图形放大镜突显效果
  • jQuery插件zoom达成图片全屏放大弹出层特效
  • Jquery完结鼠标移动加大图片功效实例
  • jQuery简易图片放大特效示例代码
  • jquery达成页面图片等比例放大降低成效
  • jQuery完毕仿天猫带有提醒条的图样转动切换效果总体实例
  • jquery插件达成鼠标经过图片侧面展现大图的意义(类似天猫商城)
  • jQuery完结类似Tmall网图片放大效应的格局

永利皇宫402 2

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实现等比例缩放大图片让大图片自适应页面布局
  • 用JQuery模仿天猫商城的图样放大镜显示效果
  • 据他们说jquery达成一张图片点击鼠标放大再点降低
  • 据书上说Jquery插件开荒之图片放大镜效果(仿Tmall)
  • jQuery当鼠标悬停时放大图片的成效实例
  • jquery图片放大镜作用的实例代码
  • 至于Jqzoom的利用体验
    jquery放大镜效果插件
  • jQuery完成图片放大预览实现原理及代码
  • jquery达成页面图片等比例放大缩短功用
  • jquery实现图片放大点击切换

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图