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

List the Stored Procedures in a SQL Server database

Jun 20 Javascript

用JavaScript实现页面重定向功能的教程

Jun 04 Javascript

js基于cookie方式记住返回页面用法示例

May 27 Javascript

带有定位当前位置的百度地图前端web api实例代码

Jun 21 Javascript

jQuery实现table中的tr上下移动并保持序号不变的实例代码

Jul 11 Javascript

javascript学习笔记_浅谈基础语法,类型,变量

Sep 19 Javascript

Javascript中arguments对象的详解与使用方法

Oct 04 Javascript

详解vue中使用express+fetch获取本地json文件

Oct 10 Javascript

Vue.js在数组中插入重复数据的实现代码

Nov 17 Javascript

vue2.0 资源文件assets和static的区别详解

Apr 08 Javascript

Vue v-model相关知识总结

Jan 28 Vue.js

react如何快速设置文件路径别名

Apr 28 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

在Windows版的PHP中使用ADO

2006/10/09 PHP

PHP判断浏览器、判断语言代码分享

2015/03/05 PHP

php给图片添加文字水印方法汇总

2015/08/27 PHP

php事务回滚简单实现方法示例

2017/03/28 PHP

showModelessDialog()使用详解

2006/09/07 Javascript

javascript循环变量注册dom事件之强大的闭包

2010/09/08 Javascript

扩展JS Date对象时间格式化功能的小例子

2013/12/02 Javascript

js中call与apply的用法小结

2013/12/28 Javascript

JavaScript中提前声明变量或函数例子

2014/11/12 Javascript

jQuery实现鼠标滑过Div层背景变颜色的方法

2015/02/17 Javascript

jquery简单的弹出层浮动层代码

2015/04/27 Javascript

基于jquery实现图片放大功能

2016/05/07 Javascript

Jquery on方法绑定事件后执行多次的解决方法

2016/06/02 Javascript

浅谈Nodejs中的作用域问题

2016/12/26 NodeJs

jQuery日期范围选择器附源码下载

2017/05/23 jQuery

layer.open关闭父窗口以及调用父页面的方法

2018/08/17 Javascript

使用 Vue 实现一个虚拟列表的方法

2019/08/20 Javascript

Layui弹出层加载做编辑页面的方法

2019/09/16 Javascript

jQuery实现鼠标滑动切换图片

2020/05/27 jQuery

Python中实现的RC4算法

2015/02/14 Python

Python heapq使用详解及实例代码

2017/01/25 Python

Django实现自定义404，500页面教程

2017/03/26 Python

python3学习笔记之多进程分布式小例子

2018/02/13 Python

Python修改文件往指定行插入内容的实例

2019/01/30 Python

python实现数学模型(插值、拟合和微分方程)

2020/11/13 Python

数据库方面面试题

2012/04/22 面试题

公务员年总结的自我评价

2013/10/25 职场文书

一份婚庆公司创业计划书

2014/01/11 职场文书

趣味比赛活动方案

2014/02/15 职场文书

公司党的群众路线教育实践活动领导班子对照检查材料

2014/09/25 职场文书

房屋授权委托书范本

2014/10/07 职场文书

银行给客户的感谢信

2015/01/23 职场文书

如何使用Python对NetCDF数据做空间相关分析

2021/04/21 Python

python生成可执行exe控制Microsip自动填写号码并拨打功能

2021/06/21 Python

MySQL数据库必备之条件查询语句

2021/10/15 MySQL

利用Python实现翻译HTML中的文本字符串

2022/06/21 Python