脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → jquery → 左右滑动中间图片放大

jQuery插件MovingBoxes实现左右滑动中间放大图片效果

 更新时间：2017年02月28日 14:31:54   作者：285267128  
本篇文章主要介绍jQuery中MovingBoxes左右滑动放大图片插件示例，实现左右滑动和放大效果，有兴趣的可以了解一下。

MovingBoxes左右滑动放大图片插件在产品预览时很有用哦

实例代码

<!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>MovingBoxes滑动放大图片插件</title>

  <link type="text/css" href="/api/jq/5733e358c8829/css/style.css" rel="external nofollow" rel="stylesheet">

 <script type="text/javascript" src="/api/jq/5733e358c8829/js/jquery.js"></script>

   <script type="text/javascript" src="/api/jq/5733e358c8829/js/jquery.movingboxes.js"></script>

   <script type="text/javascript">

    $(function() {

     $('#focus').movingBoxes({

      startPanel: 1, // 从第一个li开始

      reducedSize: .5, // 缩小到原图50%的尺寸

      wrap: true, // 是否无缝循环

      buildNav: false, // 是否显示分页

      navFormatter: function() {

       return "●";// 返回分页格式

      }

     });

    });

   </script>

 </head>

 <body>

  <!-- 代码开始 -->

  <ul id="focus">

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img01.jpg"></a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img02.jpg"></a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img03.jpg"></a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img04.jpg"></a></li>

   <li><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="/api/jq/5733e358c8829/images/img05.jpg"></a></li>

  </ul>

  <!-- 代码结束 -->

 </body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

  • jQuery控制iFrame(实例代码)

    jQuery控制iFrame(实例代码)

    这篇文章主要是对jQuery控制iFrame的实例代码进行了详细的分析介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2013-11-11
  • jquery实现用户打分评分特效

    jquery实现用户打分评分特效

    很多网站都应用了评分效果，让用户可以对正在浏览的文章、电影、资源等进行评分，让网站增添了几分互动效果。本文将讲解如何使用jQuery来实现评分效果。
    2015-05-05
  • jquery ajax 请求小技巧实例分析

    jquery ajax 请求小技巧实例分析

    这篇文章主要介绍了jquery ajax 请求小技巧,结合实例形式分析了jquery ajax请求操作相关配置与使用技巧,需要的朋友可以参考下
    2019-11-11
  • jquery实现带缩略图的全屏图片画廊效果实例

    jquery实现带缩略图的全屏图片画廊效果实例

    这篇文章主要介绍了jquery实现带缩略图的全屏图片画廊效果,实例分析了jquery带缩略图的全屏效果图片实现技巧,并附有完整的源码下载,需要的朋友可以参考下
    2015-06-06
  • JQuery 小练习(实例代码)

    JQuery 小练习(实例代码)

    空闲时候写的一些jquery小代码，虽然就几分钟完成的小代码，但每天保持练习，不至于头脑会生锈；
    2009-08-08
  • jquery实现刷新随机变化样式特效（tag标签样式）

    jquery实现刷新随机变化样式特效（tag标签样式）

    本文主要介绍了tag标签随机多彩变化的超链接样式，使用JQ+DIV+CSS实现刷新随机变化样式特效。具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • JQuery复选框全选效果如何实现

    JQuery复选框全选效果如何实现

    这篇文章主要介绍了JQuery复选框全选效果如何实现,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-05-05
  • Jquery实现搜索框提示功能示例代码

    Jquery实现搜索框提示功能示例代码

    数据量很大的情况下使用Ajax去实现真的不合适，于是想采用Jquery来实现方法，具体的示例代码如下，有需求的朋友可以参考下希望对大家有所帮助
    2013-08-08
  • jQuery选择器源码解读（四）：tokenize方法的Expr.preFilter

    jQuery选择器源码解读（四）：tokenize方法的Expr.preFilter

    这篇文章主要介绍了jQuery选择器源码解读（四）：tokenize方法的Expr.preFilter,本文用详细的注释解读了tokenize方法的Expr.preFilter的实现源码,需要的朋友可以参考下
    2015-03-03
  • jquery实现仿Flash的横向滑动菜单效果代码

    jquery实现仿Flash的横向滑动菜单效果代码

    这篇文章主要介绍了jquery实现仿Flash的横向滑动菜单效果代码,可实现滑块跟随鼠标滑动效果的功能,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-09-09

最新评论