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 ...
随机推荐
- HDU 5963 朋友（找规律博弈）
http://acm.hdu.edu.cn/showproblem.php?pid=5963 题意: 思路: 我们可以先只考虑单链,自己试几种案例就可以发现规律,只有与根相连的边为1时,只需要奇数次操 ...
- 机器学习-数据可视化神器matplotlib学习之路（四）
今天画一下3D图像,首先的另外引用一个包 from mpl_toolkits.mplot3d import Axes3D,接下来画一个球体,首先来看看球体的参数方程吧 (0≤θ≤2π,0≤φ≤π) 然 ...
- phpMyAdmin-Error:The mbstring extension is missing. Please check your PHP configuration.
1.打开php.ini 2.找到 ; extension_dir = "./",把前面的分号去掉.引号里改成extension_dir = "D:php/ext" ...
- git 代码冲突处理
在使用git pull代码时,经常会碰到有冲突的情况,提示如下信息: error: Your local changes to 'c/environ.c' would be overwritten b ...
- python 获取指定文件夹的大小
def getdirsize(dirpath): size = for root, dirs, files in os.walk(dirpath): size += sum([getsize(join ...
- 《剑指offer》第三十五题（复杂链表的复制）
// 面试题35:复杂链表的复制 // 题目:请实现函数ComplexListNode* Clone(ComplexListNode* pHead),复 // 制一个复杂链表.在复杂链表中,每个结点除 ...
- css 键盘
<html lang="en"> <head> <meta charset="UTF-8"> <title>Do ...
- ubuntu配置zsh和oh-my-zsh
1安装zsh sudo apt-get install -y zsh chsh -s /bin/zsh 2安装oh-my-zsh $ sh -c "$(curl -fsSL https:// ...
- Linux中CentOS6.5 64位 系统下安装docker步骤
CentOS6.5 64位 (docker目前仅支持64位)内核必须在3.10及以上 1. uname -r 查看内核版本 2. 升级内核到3.10版本(带aufs模块) cd /etc ...
- php将中文符号全部替换为英文符号
php将中文符号全部替换为英文符号 一.总结 一句话总结:可以用简单替换和规律替换 简单替换 str_replace() 规律替换 均相差 65248 方法一:简单替换(php代码) $val1=st ...