投稿 搜索

热搜词

热门文章

当前位置: 站长天下 / 图片相册背景 / jquery实现图片预览展示缩小放大
jquery实现图片预览展示缩小放大
标签:

插件介绍

    这是一款jquery制作可以实现图片预览滑动效果,特别适合做网站模板预览功能,完美兼容任何浏览器,小编模板栏目就是用的这款图片预览效果。

    浏览器兼容性

    浏览器兼容性
    时间:2018-05-02
    阅读:

jquery实现图片预览展示缩小放大

简要教程

这是一款jquery制作可以实现图片预览滑动效果,特别适合做网站模板预览功能,完美兼容任何浏览器,小编模板栏目就是用的这款图片预览效果。

使用方法

在页面引入以下jquery.pack.js和picbox.js两个js文件

<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/picbox.js"></script>

Html结构

在页面引入以下html代码

<div class="wrap soft-art">
<div class="wrap mblitpic">
<div class="mb-style">演示效果</div>
  <div class="mb-img" id="mbimg">
      <a rel="lightbox-demo" href="img/1.jpg">
      <img src="img/1.jpg" alt="首页"><b></b><span>首页</span></a>
      <a rel="lightbox-demo" href="img/2.jpg">
      <img src="img/2.jpg" alt="关于我们单页面"><b></b>
      <span>关于我们单页面</span></a><a rel="lightbox-demo" href="img/3.jpg">
      <img src="img/3.jpg" alt="案例列表页"><b></b><span>案例列表页</span></a>
      <a rel="lightbox-demo" href="img/4.jpg">
      <img src="img/4.jpg" alt="案例详情页"><b></b><span>案例详情页</span></a>
      <a rel="lightbox-demo" href="img/5.jpg">
      <img src="img/5.jpg" alt="新闻列表页"><b></b><span>新闻列表页</span></a>
      
      <div class="clear"></div>
  </div>
<div class="clear"></div>
</div>
</div>

CSS样式

在页面引入以下picbox.css和css.css两个文件

<link rel="stylesheet" href="css/css.css"/>
<link rel="stylesheet" href="css/picbox.css" />