编程 Javascript

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

Posted in Javascript onFebruary 28, 2017

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插件MovingBoxes实现左右滑动中间放大图片效果

- Author -

285267128

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

Firefox和IE浏览器兼容JS脚本写法小结

Jul 07 Javascript

javascript 图片上传预览-兼容标准

Jun 01 Javascript

用JS判断IE版本的代码超管用！

Aug 09 Javascript

JQuery.closest(),parent(),parents()寻找父结点

Feb 17 Javascript

使用jquery实现IE下按backspace相当于返回操作

Mar 18 Javascript

jQuery实现ichat在线客服插件

Dec 29 Javascript

jquery实现初次打开有动画效果的网页TAB切换代码

Sep 06 Javascript

JS实现的新浪微博大厅文字内容滚动效果代码

Nov 05 Javascript

BootStrap数据表格实例代码

Sep 13 Javascript

使用Vue CLI创建typescript项目的方法

Aug 09 Javascript

JS+CSS实现3D切割轮播图

Mar 21 Javascript

vue3.0中setup使用(两种用法)

Dec 02 Vue.js

jQuery中的on与bind绑定事件区别实例详解

Feb 28 #Javascript

利用angularjs1.4制作的简易滑动门效果

Feb 28 #Javascript

js 转义字符及URI编码详解

Feb 28 #Javascript

基于Bootstrap漂亮简洁的CSS3价格表(附源码下载)

Feb 28 #Javascript

基于vue2.0+vuex+localStorage开发的本地记事本示例

Feb 28 #Javascript

原生js仿淘宝网商品放大镜效果

Feb 28 #Javascript

原生js实现可拖拽效果

Feb 28 #Javascript