js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
http://www.swiper.com.cn/
http://www.idangero.us/swiper/demos/
解决问题点：
1.先得到图片真实的宽高， 根据真实宽高 等比例
2.调用的控件 宽高的计算 其实是 获取 .swiper-container 样式的宽和高，所以此样式的宽高要设定好。
宽100% 高 则根据 真实图片的 比例来
72 $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);
3.再采用cookie 技术 否则每次加载 页面都new Image 从性能角度考虑 更优
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="css/layout.css"/>
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, A
font-size: 14px;
color:#000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
} .swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center; }
</style> <title>倍赚宝首页</title>
<script type="text/javascript" src="js/jquery1.9.1.js""></script>
<!-- Swiper JS -->
<script src="js/swiper.js"></script> <script type="text/javascript" src="js/iscroll.js"></script>
<script type="text/javascript" src="js/hybrid-1.0.2.js"></script>
<script type="text/javascript" src="js/plugins/WinnerFrame.js"></script>
<script type="text/javascript">
var leverage={
leverageStock:function(){
window.plugins.winnerFrame.redirectTrade();
},
leverageNew:function(){
window.plugins.winnerFrame.redirectZijin();
}}
$(function(){
var imageRealWidth,imageRealHeight;
imageRealWidth=localStorage['imageRealWidth'];
imageRealHeight=localStorage["imageRealHeight"];
function callSwiper(){
//设置宽高
//$(".swiper-container").css("width",localStorage['swipercontainerWidth']);
//$(".swiper-container").css("height",localStorage['swipercontainerHeight']);
$(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);
//alert("w h"+imageRealWidth+" "+imageRealHeight+", swiper-container w h "+$(".swiper-container").width()+" "+$(".swiper-container").height());
swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
spaceBetween: 10,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false
});
}
if(imageRealWidth==null||imageRealHeight==null){
var image=new Image();
var swiper;
image.src="data:images/banner01.png";
image.onload=function(){
imageRealWidth=this.width;
imageRealHeight=this.height;
localStorage['imageRealWidth']= imageRealWidth; // 存储 cookie
localStorage['imageRealHeight']= imageRealHeight; // 存储 cookie
//存储 container控件宽高
localStorage['swipercontainerWidth']=$(".swiper-container").width();
localStorage['swipercontainerHeight']=$(".swiper-container").height();
callSwiper();
};
delete image;
}else{
callSwiper();
} })
</script> </head> <body>
<article class="header">
<div class="logo"><img src="data:images/logo.png" width="100" height="34" alt="logo"/> </div>
</article>
<!--
<div class="banner">
<div class="flex-viewport">
<!-- 改变 -webkit-transform: translate3d(-100px, 0px, 0px), 改变位置
<ul class="slides" style="-webkit-transform: translate3d(0px, 0px, 0px);">
<li style="left:0;"><a><img src="data:images/banner01.png"/></a></li>
<li style="left:100%;"><a><img src="data:images/banner02.png"/></a></li>
<li style="left:200%;"><a><img src="data:images/banner03.png"/></a></li>
</ul>
</div>
</div> -->
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" style="background:url('images/banner01.png');background-repeat:no-repeat;background-size:100%;"></div>
<div class="swiper-slide" style="background:url('images/banner02.png');background-repeat:no-repeat;background-size:100%;"></div>
<div class="swiper-slide" style="background:url('images/banner03.png');background-repeat:no-repeat;background-size:100%;"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div> </div> <article class="content am-grid">
<div class="clearfix">
<div class="blockButton blockButtoncg" onclick="leverage.leverageStock()">leverageStock</div>
<div class="blockButton blockButtondx" onclick="leverage.leverageNew()">leverageNew</div>
</div>
<p class="whytitle clearfix">
<span class="line"></span>
<span class="title">why choose this</span>
<span class="line"></span>
</p>
<aside class="reasons clearfix">
<div class="circle ycircle am-grid-item">
<div class="icon"></div>
<div class="txt">the maximum 1.8</div>
</div>
<div class="circle rcircle am-grid-item">
<div class="icon"></div> <div class="txt">above 2.5 w</div>
</div>
<div class="circle bcircle am-grid-item">
<div class="icon"></div>
<div class="txt">8 percentage</div>
</div>
</aside>
</article> </body>
</html>
js swipe 图片滑动控件实现 任意尺寸适用任意屏幕的更多相关文章
- Slider.js轻量级图片播放控件
Slider.js基于HTML5和CSS3实现的Slideshow 1.Slider.js 是一个图片播放Slideshow引擎,采用jQuery.CSS3和HTML5 canvas技术实现. 2.可 ...
- Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来
首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我两年半的摩托罗拉里程碑一代就这么安息了,于是我今天决定怒更一记,纪念我死去的爱机. 如果你是网购达人,你的手机上一定少不了淘宝客户 ...
- appium+python：自己写的一个滑动控件的方式
#调用方式roll_ele("ID","ele_id","7","up",3)#将控件分为7格,从底部倒数第二格向上滑动 ...
- Android进阶篇-时间滑动控件
仿Iphone时间选择滑动控件: WheelView.java: /** * @author Administrator * * 时间滑动滚轮 */ public class WheelView ex ...
- Android开发技巧——定制仿微信图片裁剪控件
拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...
- JS与APP原生控件交互
"热更新"."热部署"相信对于混合式开发的童鞋一定不陌生,那么APP怎么避免每次升级都要在APP应用商店发布呢?这里就用到了混合式开发的概念,对于电商网站尤其显 ...
- [js开源组件开发]js多选日期控件
js多选日期控件 详情请见:http://www.lovewebgames.com/jsmodule/calendar.html 它的github地址:https://github.com/tianx ...
- UI-UIImageView的图片填充方式(contentMode)_图片作为控件背景图的拉伸方式(stretch)介绍
常用图片填充方式 这里只介绍三个最常用的图片填充方式 UIViewContentModeScaleToFill模式会导致图片变形.例如: UIViewContentModeScaleAspectFit ...
- js实现图片滑动显示效果
js实现图片滑动显示效果 今天用户提出一个需求,要实现一个滑动显示新闻列表的效果,具体就是图片新闻自动滑动显示,鼠标移上去就停止滑动,移开就继续滑动:效果如下: 第一:先用HTML和CSS实现显示,主 ...
随机推荐
- 答辩ppt
目录:1.2.3.4 poct市场 荧光免疫技术(特点:灵敏性.可做仪器很小) 意义 国内外现状:万福.天宝 研究内容1.2.3. 一.意义与背景 二.内容(测量原理) 目标 三.仪器设计 1.基本测 ...
- 网络-数据包在路由转发过程中MAC地址和IP地址，变与不变
关于MAC地址和IP地址在传输过程中变与不变的问题: 结论:MAC地址在同一个广播域传输过程中是不变的,在跨越广播域的时候会发生改变的:而IP地址在传输过程中是不会改变的(除NAT的时候),总结为 路 ...
- 大白话系列之C#委托与事件讲解(一)
从序言中,大家应该对委托和事件的重要性有点了解了吧,虽然说我们现在还是能模糊,但是从我的大白话系列中,我会把这些概念说的通俗易懂的.首先,我们还是先说说委托吧,从字面上理解,只要是中国人应该都知道这个 ...
- RxJava + Retrofit 的实际应用场景
关于 RxJava Retrofit 很多篇文章都有详细的说明,在这里我想分享一个具体的使用案例,在我的开源项目 就看天气 里的实际应用.也希望跟大家探讨如何优雅的使用. 准备 项目中用到的依赖: c ...
- 清除PDF里的元数据和机密信息的方法
相信很多人都知道,PDF文档的表现形式可以大不相同,它们可能包含某些数据,乍一看根本看不见,那些数据可能是不适合共享的信息-比如元数据(作者.主题.关键词).书签.扫描文档里的文本层等,通过ABBYY ...
- asp.net MVC 自定义@helper 和自定义函数@functions小结
asp.net Razor 视图具有.cshtml后缀,可以轻松的实现c#代码和html标签的切换,大大提升了我们的开发效率.但是Razor语法还是有一些棉花糖值得我们了解一下,可以更加强劲的提升我们 ...
- linux服务之rsync
http://www.cnblogs.com/itech/archive/2010/06/13/1757952.html rsync与mfs好像有点类似,都是传输块的chunk,chunk的 1)软件 ...
- TaffyDB：开源JavaScript数据库
你是否曾经注意到javascript的对象有点像数据库中的记录,你把很多javascript对象包装到一起时就像是你在处理一个数据库中的表,TaffyDB是一个Javascript库,它提供了强大的数 ...
- java序列化---转
Java 序列化Serializable详解(附详细例子) 1.什么是序列化和反序列化Serialization(序列化)是一种将对象以一连串的字节描述的过程:反序列化deserialization是 ...
- .Net分布式缓存应用实例：Couchbase
转自:http://www.cnblogs.com/wu-jian Couchbase概述 Couchbase最早叫Membase,是由Memcached项目组的一些头目另立的山头. 2011年与Co ...