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 相关文章推荐
Javascript操作select方法大全[新增、修改、删除、选中、清空、判断存在等]
Sep 26 Javascript
突发奇想的一个jquery插件
Nov 19 Javascript
JS+JSP checkBox 全选具体实现
Jan 02 Javascript
javascript事件冒泡详解和捕获、阻止方法
Apr 12 Javascript
js函数模拟显示桌面.scf程序示例
Apr 20 Javascript
java、javascript实现附件下载示例
Aug 14 Javascript
jQuery中extend函数的实现原理详解
Feb 03 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
angular实现表单验证及提交功能
Feb 01 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
深入解析微信小程序开发中遇到的几个小问题
Jul 11 Javascript
js实现飞机大战小游戏
Aug 26 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中HTTP_REFERER函数用法实例
2014/11/21 PHP
不错的JS中变量相关的细节分析
2007/08/13 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
js控制的遮罩层实例介绍
2013/05/29 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
每日十条JavaScript经验技巧(二)
2016/06/23 Javascript
JS函数修改html的元素内容,及修改属性内容的方法
2016/10/28 Javascript
动态加载css方法实现和深入解析
2017/01/18 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
JavaScript中利用Array filter() 方法压缩稀疏数组
2018/02/24 Javascript
原生JS实现获取及修改CSS样式的方法
2018/09/04 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
原生js代码能实现call和bind吗
2019/07/31 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
一看就会的vuex实现登录验证(附案例)
2020/01/09 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
js中实现继承的五种方法
2021/01/25 Javascript
[03:04]DOTA2超级联赛专访ZSMJ “莫名其妙”的逆袭
2013/05/23 DOTA
python创建列表并给列表赋初始值的方法
2015/07/28 Python
Django使用httpresponse返回用户头像实例代码
2018/01/26 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python3反转字符串的3种方法(小结)
2019/11/07 Python
python 解决函数返回return的问题
2020/12/05 Python
CSS3制作漂亮的照片墙的实现代码
2016/06/08 HTML / CSS
前后端结合实现amazeUI分页效果
2020/08/21 HTML / CSS
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
缓刑人员的思想汇报
2014/01/11 职场文书
售后求职信范文
2014/03/15 职场文书
园林技术专业求职信
2014/07/28 职场文书
工程资料员岗位职责
2015/04/13 职场文书
2015年酒店前台工作总结
2015/04/20 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
高效课堂教学反思
2016/02/24 职场文书
用Python爬取各大高校并可视化帮弟弟选大学,弟弟直呼牛X
2021/06/11 Python