编程 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 相关文章推荐

IE 上下滚动展示模仿Marquee机制

Dec 20 Javascript

跨域传值即主页面与iframe之间互相传值

Dec 09 Javascript

jQuery解析XML文件同时动态增加js文件的方法

Jun 01 Javascript

jquery获取当前元素索引值用法实例

Jun 10 Javascript

jQuery实现的fixedMenu下拉菜单效果代码

Aug 24 Javascript

浅谈javascript中new操作符的原理

Jun 07 Javascript

详解js删除数组中的指定元素

Oct 31 Javascript

json数据格式常见操作示例

Jun 13 Javascript

js基础之事件捕获与冒泡原理

Oct 09 Javascript

VUE+node（express）实现前后端分离

Oct 13 Javascript

vue（2.x，3.0）配置跨域代理

Nov 27 Javascript

详解JavaScript之ES5的继承

Jul 08 Javascript

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

You might like

聊天室php&mysql(二)

2006/10/09 PHP

php checkbox复选框值的获取与checkbox默认值输出方法

2010/05/15 PHP

解析php中curl_multi的应用

2013/07/17 PHP

typecho插件编写教程（二）:写一个新插件

2015/05/28 PHP

PHP函数实现从一个文本字符串中提取关键字的方法

2015/07/01 PHP

thinkPHP框架动态配置用法实例分析

2018/06/14 PHP

Laravel+Intervention实现上传图片功能示例

2019/07/09 PHP

Laravel 模型关联基础教程详解

2019/09/17 PHP

Laravel6.0.4中将添加计划任务事件的方法步骤

2019/10/15 PHP

PHP设计模式之命令模式示例详解

2020/12/20 PHP

让firefox支持IE的一些方法的javascript扩展函数代码

2010/01/02 Javascript

利用onresize使得div可以随着屏幕大小而自适应的代码

2010/01/15 Javascript

使用dynatrace-ajax跟踪JavaScript的性能

2010/04/12 Javascript

JS(JQuery)操作Array的相关方法介绍

2014/02/11 Javascript

给html超链接设置事件不使用href来完成跳

2014/04/20 Javascript

jquery实现的伪分页效果代码

2015/10/29 Javascript

基于JS实现EOS隐藏错误提示层代码

2016/04/25 Javascript

iscroll碰到Select无法选择下拉刷新的解决办法

2016/05/21 Javascript

详解VueJs异步动态加载块

2017/03/09 Javascript

详解vue事件对象、冒泡、阻止默认行为

2017/03/20 Javascript

微信小程序实现动态设置页面标题的方法【附源码下载】

2017/11/29 Javascript

vue 修改 data 数据问题并实时显示的方法

2018/08/27 Javascript

nuxt.js 在middleware(中间件)中实现路由鉴权操作

2020/11/06 Javascript

Python中的Numpy入门教程

2014/04/26 Python

Python中逗号的三种作用实例分析

2015/06/08 Python

Python学习小技巧之列表项的推导式与过滤操作

2017/05/20 Python

python实现TF-IDF算法解析

2018/01/02 Python

解决IDEA 的 plugins 搜不到任何的插件问题

2020/05/04 Python

HTML5中canvas中的beginPath()和closePath()的重要性

2018/08/24 HTML / CSS

美国婴儿用品及配件购买网站：Munchkin

2019/04/03 全球购物

一些关于MySql加速和优化的面试题

2014/01/30 面试题

高等教育学自荐书范文

2014/02/10 职场文书

我的中国梦演讲稿初中篇

2014/08/19 职场文书

国庆节促销广告语2014

2014/09/19 职场文书

教师师德表现自我评价

2015/03/05 职场文书

节约用电通知

2015/04/25 职场文书