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 相关文章推荐
Firefox和IE浏览器兼容JS脚本写法小结
Jul 07 Javascript
javascript 图片上传预览-兼容标准
Jun 01 Javascript
用JS判断IE版本的代码 超管用!
Aug 09 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
使用jquery实现IE下按backspace相当于返回操作
Mar 18 Javascript
jQuery实现ichat在线客服插件
Dec 29 Javascript
jquery实现初次打开有动画效果的网页TAB切换代码
Sep 06 Javascript
JS实现的新浪微博大厅文字内容滚动效果代码
Nov 05 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
JS+CSS实现3D切割轮播图
Mar 21 Javascript
vue3.0中setup使用(两种用法)
Dec 02 Vue.js
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流量统计功能的实现代码
2012/09/29 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
php中simplexml_load_file函数用法实例
2014/11/12 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
浅析php设计模式之数据对象映射模式
2016/03/03 PHP
PHP处理CSV表格文件的常用操作方法总结
2016/07/01 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
JavaScript窗口功能指南之在窗口中书写内容
2006/07/21 Javascript
js监听表单value的修改同步问题,跨浏览器支持
2009/12/31 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
2014/08/27 Javascript
使用jquery组件qrcode生成二维码及应用指南
2015/02/22 Javascript
javascript实现可全选、反选及删除表格的方法
2015/05/15 Javascript
Jquery使用val方法读写value值
2015/05/18 Javascript
利用node.js本地搭建HTTP服务器
2017/04/19 Javascript
JavaScript数组的5种迭代方法
2017/09/29 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
浅析我对JS延迟异步脚本的思考
2020/10/12 Javascript
举例讲解Python程序与系统shell交互的方式
2015/04/09 Python
python使用 HTMLTestRunner.py生成测试报告
2017/10/20 Python
python实现音乐播放和下载小程序功能
2020/04/26 Python
Python模拟登录和登录跳转的参考示例
2020/10/30 Python
python 实现aes256加密
2020/11/27 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
大学生求职简历的自我评价
2013/10/14 职场文书
监理员的岗位职责
2013/11/13 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
2014年乡镇卫生院工作总结
2014/11/24 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
植树节新闻稿
2015/07/17 职场文书
公司安全管理制度范本
2015/08/05 职场文书
小学三年级语文教学反思
2016/03/03 职场文书