MovingBoxes左右滑动放大图片插件
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左右滑动放大图片插件的更多相关文章
- jquery手指触摸滑动放大图片的方法(比较靠谱的方法)
jquery手指触摸滑动放大图片的方法(比较靠谱的方法) <pre><!DOCTYPE html><html lang="zh-cn">< ...
- Ionic实战三：Ionic 图片预览可放大缩小左右滑动demo-iClub图片预览
这个demo的主要功能有两个,一个是首页的导航向上拉动会浮动在最上面的效果,另一个就是我们平时非常实用的功能,就是图片预览功能 点击可以放大图片,并且可以左右滑动,还可以双击放大缩小图片以及双手指控制 ...
- jquery插件jquery.LightBox.js之点击放大图片并左右点击切换图片（仿相册插件）
该插件乃本博客作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实 ...
- jQuery.hhLRSlider 左右滚动图片插件
/** * jQuery.hhLRSlider 左右滚动图片插件 * User: huanhuan * QQ: 651471385 * Email: th.wanghuan@gmail.com ...
- jQuery-单击文字或图片内容放大显示效果插件
css很强大,jQuery也很强大,两者结合在一起就是无比强大.这里要介绍的这个单击文字或图片内容放大居中显示的效果就是这两者结合的产物. 先来介绍css和jQuery各自发挥了什么作用吧: css: ...
- 手机端图片插件可缩放 旋转 全屏查看photoswipe
官方介绍PhotoSwipe 是专为移动触摸设备设计的相册/画廊.兼容所有iPhone.iPad.黑莓6+,以及桌面浏览器.底层实现基于HTML/CSS/JavaScript,是一款免费开源的相册产品 ...
- IOS下拉放大图片
代码地址如下:http://www.demodashi.com/demo/11623.html 一.实现效果图 现在越来越多的APP中存在下拉放大图片的效果,今天贡献一下我的实现这种方法的原理,和我遇 ...
- 我利用网上代码开发的JQuery图片插件
我利用网上代码开发的JQuery图片插件 代码如下 (function($){ $.fn.FocusPic = function(options){ var defaults = { interval ...
- 移动端全屏滑动的小插件，简单，轻便，好用，只有3k swiper,myswiper,page,stage
https://github.com/donglegend/mySwiper mySwiper 移动端全屏滑动的小插件,简单,轻便,好用,只有3k 下载 直接下载 bower install mySw ...
随机推荐
- shell ：
示例一.(用作注释,占位)#!/bin/bash : this is single line comment : 'this is a multiline comment, second line e ...
- bugfree 数据库配置 显示No such file or directory
把数据库服务器 localhost 改成127.0.0.1 sudo vi /etc/hosts 增加: 127.0.0.1 localhost 127.0.0.1 你的hostname ...
- 爱阅app --- 答复功能改进建议
共有四组评论,接下来一一答复. 第一组: 希望增加的功能: 1.希望能够继续完善书签功能,增加逐条删除书签功能. 2.能够在爱阅内部打开APP中提供的网址,用户选择一款阅读APP,当然不想每看一本新的 ...
- 《剑指offer》第四十题（最小的k个数）
// 面试题40:最小的k个数 // 题目:输入n个整数,找出其中最小的k个数.例如输入4.5.1.6.2.7.3.8 // 这8个数字,则最小的4个数字是1.2.3.4. #include < ...
- 《剑指offer》第九题（用两个栈实现队列）
// 面试题:用两个栈实现队列 // 题目:用两个栈实现一个队列.队列的声明如下,请实现它的两个函数appendTail // 和deleteHead,分别完成在队列尾部插入结点和在队列头部删除结点的 ...
- Codeforces 101628A - Arthur's Language
101628A - Arthur's Language 思路:dp,状态转移见代码. 代码: #include<bits/stdc++.h> using namespace std; #d ...
- Netty优雅退出机制和原理
1.进程的优雅退出 1.1.Kill -9 PID带来的问题 在Linux上通常会通过kill -9 pid的方式强制将某个进程杀掉,这种方式简单高效,因此很多程序的停止脚本经常会选择使用kill - ...
- Eclipse 中 SDK无法更新---解决方法
在SDK Manager -> tools -> options中: HTTP Proxy Server: mirrors.neusoft.edu.cn HTTP Proxy Port: ...
- python-GUI，生成ssn
第一次做这个, 样子有点丑,主要是实现功能,做测试的时候,经常要用到身份证号.手机号.姓名等,这里先生成ssn,后续研究怎么做成客户端 代码: from tkinter import * from u ...
- Jersey 2.x 前言和约定的文本格式
这是Jersey 2.x 的用户指南.我们极力将它能与我们新增的功能保持一致.当阅读本指南,作为补充,也请移步至Jersey API documentation查看 Jersey 的特性和 API. ...