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="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="#" ><img src="/api/jq/5733e358c8829/images/img01.jpg"></a></li>

            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img02.jpg"></a></li>

            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img03.jpg"></a></li>

            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img04.jpg"></a></li>

            <li><a href="#" ><img src="/api/jq/5733e358c8829/images/img05.jpg"></a></li>

        </ul>

        <!-- 代码结束 -->

    </body>

</html>

　　

运行一下

下载地址

MovingBoxes左右滑动放大图片插件的更多相关文章

  1. jquery手指触摸滑动放大图片的方法(比较靠谱的方法)

    jquery手指触摸滑动放大图片的方法(比较靠谱的方法) <pre><!DOCTYPE html><html lang="zh-cn">< ...

  2. Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览

    这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...

  3. jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）

    该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...

  4. jQuery.hhLRSlider 左右滚动图片插件

    /**  * jQuery.hhLRSlider 左右滚动图片插件  * User: huanhuan  * QQ: 651471385  * Email: th.wanghuan@gmail.com ...

  5. jQuery-单击文字或图片内容放大显示效果插件

    css很强大,jQuery也很强大,两者结合在一起就是无比强大.这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物. 先来介绍css和jQuery各自发挥了什么作用吧: css: ...

  6. 手机端图片插件可缩放 旋转 全屏查看photoswipe

    官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...

  7. IOS下拉放大图片

    代码地址如下:http://www.demodashi.com/demo/11623.html 一.实现效果图 现在越来越多的APP中存在下拉放大图片的效果,今天贡献一下我的实现这种方法的原理,和我遇 ...

  8. 我利用网上代码开发的JQuery图片插件

    我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...

  9. 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage

    https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...

随机推荐

  1. js中一些关于比较左右两边的值的题目

    alert(typeof(NaN)); alert(typeof(Infinity)); alert(typeof(null)); alert(typeof(undefined)); alert(Na ...

  2. React native 的DatePickerIOS组件

    1.首先如代码所示  引入DatePickerIOS组件 设置他的时间是当前时间 export default class AlertDemo extends Component { render() ...

  3. 《A_Pancers》第一次作业：团队亮相

    一.团队及团队成员介绍 1> 队名:A_Pancers 2> 团队成员组成: 201571030310/龙正圆(小组长) 201571030329/杨环宇      20157103030 ...

  4. Linux环境下 RabbitMQ 的下载与安装

    0 环境 CentOS7 RabbitMQ 3.6.5 erlang 18.3 socat rabbitmq是使用erlang语言编写的,所以需要先安装erlang,其次rabbitmq安装依赖于so ...

  5. Codeforces 680D - Bear and Tower of Cubes

    680D - Bear and Tower of Cubes 思路:dfs+贪心,设剩余的体积为res,存在a,使得a3 ≤ res,每次取边长为a的立方体或者边长为a-1的立方体(这时体积上限变成a ...

  6. angular5 组件之间监听传值变化

    http://www.cnblogs.com/SLchuck/p/5904000.html https://i.cnblogs.com/EditPosts.aspx?postid=7995179&am ...

  7. Lua面向对象 --- 多继承

    工程目录结构: ParentMother.lua: ParentMother = {} function ParentMother:MortherName() print("Morther ...

  8. 检验二叉树序列化的合理性 Verify Preorder Serialization of a Binary Tree

    2018-07-31 17:47:13 问题描述: 问题求解: 本题要求在不构建二叉树的情况下对先序遍历生成的序列化字符串进行合法性验证,这里有个技巧性较强的验证方法,就是采用当前可用的指针数目进行验 ...

  9. Linux 设置程序开机自启动 （命令systemctl 和 chkconfig用法区别比较）

    之前在Linux centos 7 上安装了apache 和mysql,当时并没有设置开机自动启动. 最近又重新练习网页,每次开机总是要手动启动httpd和mysqld,不方便,就想设置成开机自动启动 ...

  10. 关于安装php时 --with-mysql命令参数问题

    如果是rpm安装mysql则直接写成--with-mysql 如果是编译安装mysql则写成--with-mysql=mysql安装路劲 如果你还没有安装Mysql数据库,可以暂时不编译