几行代码jquery实现图片放大预览

效果如下

 


具体方法我已经整理成文件,可以预览查看效果,也可以直接下载浏览源码:

 代码如下 复制代码

<!DOCTYPE html>
<html>
<head>
 <title>图片放大浏览</title>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   
 <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen" />
 
 <style type="text/css">
  .fancybox-custom .fancybox-skin {
   box-shadow: 0 0 50px #222;
  }
 </style>
</head>
<body>

 <p>
  <a class="fancybox-buttons" data-fancybox-group="button" href="1_b.jpg"><img src="1_s.jpg" alt="" /></a>

  <a class="fancybox-buttons" data-fancybox-group="button" href="2_b.jpg"><img src="2_s.jpg" alt="" /></a>

  <a class="fancybox-buttons" data-fancybox-group="button" href="3_b.jpg"><img src="3_s.jpg" alt="" /></a>

  <a class="fancybox-buttons" data-fancybox-group="button" href="4_b.jpg"><img src="4_s.jpg" alt="" /></a>
 </p>

 
</body>
 <script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script>
 <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.3"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   $('.fancybox-buttons').fancybox({
    openEffect  : 'none',
    closeEffect : 'none',
    prevEffect : 'none',
    nextEffect : 'none',
    closeBtn  : false,
    helpers : {
     title : {
      type : 'inside'
     }
    },
    afterLoad : function() {
     this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
    }
   });
   
  });
 </script>
</html>

时间: 2024-09-18 03:13:40

几行代码jquery实现图片放大预览的相关文章

jQuery实现图片放大预览实现原理及代码_jquery

对于一些比较小的图片,通过鼠标移动到图片上进行放大显示,原理很简单,就是将图片显示的尺寸变大后放在浏览器的一个指定位置,从而实现图片的放大预览.以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=&q

js图片放大预览鼠标滑过的任意位置

jquery实现的缩略图预览滑块实例

  本文实例讲述了jquery实现的缩略图预览滑块.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

jquery实现的缩略图预览滑块实例_jquery

本文实例讲述了jquery实现的缩略图预览滑块.分享给大家供大家参考.具体如下: 运行效果如下图所示: 主要代码如下: (function($) { $.fn.thumbnailSlider = function(options) { var opts = $.extend({}, $.fn.thumbnailSlider.defaults, options); return this.each(function() { var $this = $(this), o = $.meta ? $.e

drag-and-drop实现图片浏览器预览_javascript技巧

今天刚试过chrome的drag and drop API,它能非常简单的将本地的图片放到浏览器中进行预览.试想一下当我们把一个文图片拖拽到浏览器里会发生什么事情,你的浏览器试图打开一个新的页面并加载这个图片.现在我不想浏览器这样帮我处理图片,我希望我拖拽的图片能立即放到我预先规定的位置并迅速回显,这就需要javascript中event对象的两个函数stopPropergation()和preventDefault().前者将会阻止事件的冒泡,后者会阻止浏览器默认的行为. 这里我们定义一个ig

jquery实现上传图片本地预览效果

原理 分为两步:当上传图片的input被触发并选择本地图片之后获取要上传的图片这个对象的URL(对象URL):把对象URL赋值给事先写好的img标签的src属性即可把图片显示出来. 在这里,我们需要了解Javascript里File对象.Blob对象和window.URL.createObjectURL()方法. File对象 File对象可以用来获取某个文件的信息,还可以用来读取这个文件的内容.通常情况下,File对象是来自用户在一个input元素上选择文件后返回的FileList对象,也可以

浅谈js图片前端预览之filereader和window.URL.createObjectURL_javascript技巧

浅谈js图片前端预览之filereader和window.URL.createObjectURL //preview img : filereader方式 document.getElementById('imgFile').onchange = function(e){ 5 var ele = document.getElementById('imgFile').files[0]; var fr = new FileReader(); fr.onload = function(ele){ va

Win8.1系统怎么关闭图片缩略图预览

  Win8.1系统怎么关闭图片缩略图预览 1.设置为小图标查看方式(右键点击文件夹空白的地方,选择查看-小图标); 这样的方法可以单独给每个文件夹设置.也是比较方便的. 2.关闭所有文件夹缩略图预览: 在文件夹上点击"查看"-"选项"; 在文件夹选项下,勾选,始终显示图标,从不显示缩略图选项,确定即可. windows7教程 windows8教程 windows10教程

Xp系统下图片无法预览怎么查看

  Xp系统下图片无法预览怎么查看              解决方案: 1.打开开始-运行中输入: regsvr32 %systemroot%system32shimgvw.dll 如果提示成功,下面的就不用看了. 2.提示如果找不到shimgvw.dll文件.打开360卫士的系统急救箱,点系统文件修复区. 3.点手动添加--输shimgvw.dll,点击添加. 4.提示成功后回到第一步,开始运行: regsvr32 %systemroot%system32shimgvw.dll 至此问题解决