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 ...
随机推荐
- PAT第二次上机题目
5-1 #include <iostream> #include <cstdlib> using namespace std; template <class T> ...
- 环境安装问题：tensorflow 问题记录 python2.7 和 python3.6发生冲突
似乎是pip在python2.7和python3.6中发生冲突 我想用pip但是python2里没有装pip 但是tensorflow是和python2相关联的 所以我在python2中装pip的过程 ...
- 关于Java 中Integer 和Long对象 对比的陷阱（简单却容易犯的错误）
彩票客户端“忘记密码”功能有bug,今天调试时,发现了原因: 功能模块中有一段: if(userpo.getId()!=Long.valueOf(uid)){ throw new VerifyExce ...
- pandas 处理数据中NaN数据
使用dropna()函数去掉NaN的行或列 import pandas as pd import pickle import numpy as np dates = pd.date_range() d ...
- Qt_2D_画图教程
1. ZC: 看点:相同的API,QPainter.QPainterDevice和QPainterEngine这3个类 Qt学习之2D绘图(画刷和画笔) http://blog.csdn.net/lp ...
- [ogre]ogre::Animation
参考:http://blog.csdn.net/leonwei/article/details/5819248 http://blog.csdn.net/debugconsole/article/de ...
- php正则表达式的三个最基本原则分享
我个人认为,正则表达式的常规用法可以分为如下三个最基本的原则:1.找谁.2.怎么找.3.找它干什么. 接下来,我分享一下一个正则表达式分三个部分: 原子字符 . 匹配除换行符以外的任意字符 \w 匹配 ...
- Professional layer CodeForces - 1103D (状压,gcd)
大意: 给定$n$元素序列$a$, 现在想要让$gcd(a_1,a_2,...,a_n)=1$. 对于每个$a_i$可以除以一个不超过$k$的因子, 代价为$e_i$, 假设一共选择了$x$个元素去除 ...
- python-day49--前端 html
一.列表标签 1.有序列表 <ol> (order list ) 在浏览器中显示包括:padding , 有序排列 <li>:列表中的每一项. 2.无序列表 ...
- python-day18--匿名函数
一.lambda表达式 1.匿名函数的核心:一些简单的需要用函数去解决的问题,匿名函数的函数体只有一行 2.参数可以有多个,用逗号隔开 3.返回值和正常的函数一样可以是任意的数据类型 4.练习: 请把 ...