首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onFebruary 28, 2017

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

jQuery插件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 相关文章推荐
JavaScript 学习笔记（四）
Dec 31 Javascript
jquery刷新页面的实现代码（局部及全页面刷新）
Jul 11 Javascript
js分页代码分享
Apr 28 Javascript
jQuery中index()的用法分析
Sep 05 Javascript
jQuery中noConflict()用法实例分析
Feb 08 Javascript
Javascript监视变量变化的方法
Jun 09 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
Oct 29 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
AngularJS基础 ng-selected 指令简单示例
Aug 03 Javascript
详解vue.js组件化开发实践
Dec 14 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
微信小程序实现购物车代码实例详解
Aug 29 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
排名(1) 阿里云(6) 窗口函数(3) 速龙(1) 分析统计(1) 条形图(1) Tomcat(18) redis shake(1) 数据同步(1) ipad(1)
You might like
PHP实现多进程并行操作的详解(可做守护进程)
2013/06/18 PHP
浅析php中三个等号(===)和两个等号(==)的区别
2013/08/06 PHP
smarty简单入门实例
2014/11/28 PHP
php中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
使用XHProf查找PHP性能瓶颈的实例
2017/12/13 PHP
Javascript中Eval函数的使用
2010/03/23 Javascript
为JavaScript类型增加方法的实现代码(增加功能)
2011/12/29 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
2013/11/26 Javascript
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
2016/05/31 Javascript
Bootstrap源码解读排版（1）
2016/12/23 Javascript
详解从Vue.js源码看异步更新DOM策略及nextTick
2017/10/11 Javascript
Node实战之不同环境下配置文件使用教程
2018/01/02 Javascript
完美解决mui框架off-canvas侧滑超出部分隐藏无法滚动的问题
2018/01/25 Javascript
iview日期控件,双向绑定日期格式的方法
2018/03/15 Javascript
vue自定义tap指令及tap事件的实现
2018/09/18 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
2018/10/30 Javascript
JavaScript 性能提升之路（推荐）
2019/04/10 Javascript
微信小程序用户拒绝授权的处理方法详解
2019/09/20 Javascript
使用webpack搭建vue环境的教程详解
2019/12/31 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
Vue 中获取当前时间并实时刷新的实现代码
2020/05/12 Javascript
[36:52]DOTA2真视界：基辅特锦赛总决赛
2017/05/21 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
python3实现ftp服务功能（客户端）
2017/03/24 Python
Python最火、R极具潜力 2017机器学习调查报告
2017/12/11 Python
Python中的函数式编程:不可变的数据结构
2018/10/08 Python
CSS3 创建网页动画实现弹跳球动效果
2018/10/30 HTML / CSS
cf战队收人口号
2014/06/21 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
Nginx服务器如何设置url链接
2021/03/31 Servers
CentOS MySql8 远程连接实战
2022/04/19 MySQL