jQuery 点击小图预览大图

JQuery

1个成员

jQuery 点击小图预览大图

发表于 2016-12-31 • 3161 次查看

本文章是一款图片预览效果代码不过是利用了jquery来实现的，用户点击小图可以在当前页面显示大图的预览效果，也就是jQuery 点击小图预览大图插件实例的哦。

本文章是一款图片预览效果代码不过是利用了jquery来实现的，用户点击小图可以在当前页面显示大图的预览效果，也就是jquery 点击小图预览大图插件实例的哦。
<!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
<meta http-equiv="imagetoolbar" content="no" />
<title>jquery 点击小图预览大图</title>
<script type="text/网页特效" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel-3.0.2.pack.js"></script>
<script type="text/javascript" src="js/jquery.fancybox-1.3.1.js"></script>
<script type="text/javascript" src="js/pngobject.js"></script>
  <link rel="stylesheet" href="style/style.css教程" type="text/css" />
<link rel="stylesheet" href="style/jquery.fancybox-1.3.1.css" type="text/css" />
<script type="text/javascript">
  $(document).ready(function() {
   /*
   *   examples - images
   */

   $("a#example1").fancybox({
    'titleshow'  : false
   });

   $("a#example2").fancybox({
    'titleshow'  : false,
    'transitionin' : 'elastic',
    'transitionout' : 'elastic'
   });

   $("a#example3").fancybox({
    'titleshow'  : false,
    'transitionin' : 'none',
    'transitionout' : 'none'
   });

$("a#example4").fancybox();

   $("a#example5").fancybox({
    'titleposition' : 'inside'
   });

   $("a#example6").fancybox({
    'titleposition' : 'over'
   });

   $("a[rel=example_group]").fancybox({
    'transitionin'  : 'none',
    'transitionout'  : 'none',
    'titleposition' : 'over',
    'titleformat'  : function(title, currentarray, currentindex, currentopts) {
     return '<span id="fancybox-title-over">image ' + (currentindex + 1) + ' / ' + currentarray.length + (title.length ? '   ' + title : '') + '</span>';
    }
   });

   /*
   *   examples - various
   */

   $("#various1").fancybox({
    'titleposition'  : 'inside',
    'transitionin'  : 'none',
    'transitionout'  : 'none'
   });

$("#various2").fancybox();

   $("#various3").fancybox({
    'width'    : '75%',
    'height'   : '75%',
    'autoscale'   : false,
    'transitionin'  : 'none',
    'transitionout'  : 'none',
    'type'    : 'iframe'
   });

   $("#various4").fancybox({
    'padding'   : 0,
    'autoscale'   : false,
    'transitionin'  : 'none',
    'transitionout'  : 'none'
   });
  });
</script>
</head>
<body>
<div id="content">
<h4>jquery fancybox 实现点击小图显示大图</h4>
<p>
  <a rel="example_group" href="example/4_b.jpg" title="lorem ips教程um dolor sit amet"><img alt="" src="example/4_s.jpg" /></a>