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 ...
随机推荐
- UVa 674 Coin Change（完全背包）
https://vjudge.net/problem/UVA-674 题意: 计算兑换零钱的方法共有几种. 思路: 完全背包基础题. #include<iostream> #include ...
- 关于在Mac上安装模拟器的坑比~~~~~
没有人比我更坑了~~就安装一个简单的模拟器花了我一天时间~~我去~~~ 但是最后还是安装好了~~真的是活久见~~好吧~~ 废话不多说先上安装好的图~炫耀一下~ ~ ok!要实现这样的效果~你需要下载虚 ...
- Android广播接收器和Activity间传递数据
Activity向广播接收器传递数据很简单,只需要在发送广播前将数据put进Intent中就行了. 广播接收器怎么向Activity传送数据?这里要用到接口,通过在广播接收器里定义一个接口,然后让接收 ...
- Linux——用户管理简单学习笔记（四）
主要讲两个用户管理的案例: 1: 限制用户su为root,只允许某个组的的用户su # groupadd sugroup 首先添加我们的用户组 # chmod 4550 /bin/su 改变命令的权限 ...
- 简单介绍tomcat中maxThreads，acceptCount，connectionTimeout
<?xml version='1.0' encoding='utf-8'?> <Server port="8005" shutdown="SHUTDOW ...
- 从celery rabbitmq with docker-compose 引出对容器、依赖注入、TDD的感悟
用docker配置项目管理系统taiga的时候,不是我一个人遇到这个问题.https://github.com/douglasmiranda/docker-taiga/issues/5 问题描述: 用 ...
- Codeforces 448E - Divisors
448E - Divisors 思路: dfs.注意如果是1,直接返回,因为1的因子还是1. 因为x因子的因子还是x的因子,所以可以事先处理好x因子的因子在x因子中的位置. 不用这个方法也可以,用ma ...
- English trip -- VC(情景课)5 C It's on Main Street 在主街上
Grammar focus 语法点: on, 在...上 next to , 旁边,周围 aross from , 对面 between 在...之间 in front of 在…前面 ...
- Imbalance Value of a Tree CodeForces - 915F
链接 大意: 给定树, 求树上所有链上最大值最小值之差 817D的树上版本, 用并查集维护即可. 817D由于是链的情况并查集不必压缩路径即可达到均摊$O(n)$, 该题必须压缩, 复杂度$O(nlo ...
- 『Json』常用方法记录
json模块可以把字典结构改写为string然后保存,并可以反向读取字典 pickle模块则可以持久化任意数据结构 但是即使同样是字典数据结构,两个包也是有差别的, json字典value不支持其他对 ...