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. UVa 1152 和为0的4个值（二分查找）

    https://vjudge.net/problem/UVA-1152 题意:给定4个n元素集合A,B,C,D,要求分别从中选取一个元素a,b,c,d,使得a+b+c+d=0.问有多少种取法. 思路: ...

  2. Python的collections模块中的OrderedDict有序字典

    如同这个数据结构的名称所说的那样,它记录了每个键值对添加的顺序. ? 1 2 3 4 5 6 d = OrderedDict() d['a'] = 1 d['b'] = 10 d['c'] = 8 f ...

  3. axios post请求报错

    问题描述: vue中使用axios提交post请求, 请求地址及参数都对, 但是一直报缺少参数的错误 探索:对比post请求数据, 提交数据的方式不对 (1)axios的post请求(返回响应缺少参数 ...

  4. Codeforces Beta Round #16 div 2 C.Monitor最大公约数

    C. Monitor time limit per test 0.5 second memory limit per test 64 megabytes input standard input ou ...

  5. [原][译][lua][luabridge]一个简单的luabridge与c++例子结合例子

    参考:https://eliasdaler.wordpress.com/tag/luabridge/ https://eliasdaler.wordpress.com/2015/08/10/using ...

  6. Android JNI(一)——NDK与JNI基础

    本系列文章如下: Android JNI(一)——NDK与JNI基础 Android JNI学习(二)——实战JNI之“hello world” Android JNI学习(三)——Java与Nati ...

  7. sublime插件安装及常用插件配置

    1.下载 :百度云 工具中 2.注册 sgbteam Single User License EA7E-1153259 8891CBB9 F1513E4F 1A3405C1 A865D53F 115F ...

  8. LeetCode--203--删除链表中的节点

    问题描述: 删除链表中等于给定值 val 的所有节点. 示例: 输入: 1->2->6->3->4->5->6, val = 6 输出: 1->2->3 ...

  9. 『科学计算_理论』优化算法：梯度下降法&牛顿法

    梯度下降法 梯度下降法用来求解目标函数的极值.这个极值是给定模型给定数据之后在参数空间中搜索找到的.迭代过程为: 可以看出,梯度下降法更新参数的方式为目标函数在当前参数取值下的梯度值,前面再加上一个步 ...

  10. 操作系统错误 5:"5(拒绝访问。)

    ------------------------------ 无法打开物理文件 "G:/QGJX.mdf".操作系统错误 5:"5(拒绝访问.)". (Micr ...