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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js实现屏蔽默认快捷键调用自定义事件示例
Jun 18 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
JavaScript模拟重力状态下抛物运动的方法
Mar 03 Javascript
JavaScript类继承及实例化的方法
Jul 25 Javascript
AngularJS表单验证中级篇(3)
Sep 28 Javascript
JS中数组重排序方法
Nov 11 Javascript
详解基于mpvue的小程序markdown适配解决方案
May 08 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
Vue中computed、methods与watch的区别总结
Apr 10 Javascript
Vue路由对象属性 .meta $route.matched详解
Nov 04 Javascript
javascript局部自定义鼠标右键菜单
Dec 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错误和异长常处理总结
2014/03/06 PHP
php调用nginx的mod_zip模块打包ZIP文件
2014/06/11 PHP
PHP实现微信网页授权开发教程
2016/01/19 PHP
Yii的Srbac插件用法详解
2016/07/14 PHP
windows7配置Nginx+php+mysql的详细教程
2016/09/04 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Laravel Eloquent ORM 多条件查询的例子
2019/10/10 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
js截取函数(indexOf,join等)
2010/09/01 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
仿微博字符限制效果实现代码
2012/04/20 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery Html控件基本操作(日常收集整理)
2016/03/11 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
JSON与XML的区别对比及案例应用
2016/11/11 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
2017/01/10 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
值得收藏的vuejs安装教程
2017/11/21 Javascript
vue.js默认路由不加载linkActiveClass问题的解决方法
2017/12/11 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
Vue 项目代理设置的优化
2018/04/17 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
微信小程序使用蓝牙小插件
2019/09/23 Javascript
vue实现select下拉显示隐藏功能
2019/09/30 Javascript
[45:10]NB vs Liquid Supermajor小组赛 A组胜者组决赛 BO3 第二场 6.2
2018/06/04 DOTA
Python实现比较两个列表(list)范围
2015/06/12 Python
详细分析python3的reduce函数
2017/12/05 Python
Django项目开发中cookies和session的常用操作分析
2018/07/03 Python
解决Pycharm调用Turtle时 窗口一闪而过的问题
2019/02/16 Python
Python 多线程其他属性以及继承Thread类详解
2019/08/28 Python
Keras 数据增强ImageDataGenerator多输入多输出实例
2020/07/03 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
大学生应聘推荐信范文
2013/11/19 职场文书
2014标准社保办理委托书
2014/10/06 职场文书
原型和原型链 prototype和proto的区别详情
2021/11/02 Javascript