js swipe 图片滑动控件实现 任意尺寸适用任意屏幕
2024-05-31 17:07:14
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 从性能角度考虑 更优
1 <!DOCTYPE HTML>
2 <html>
3 <head>
4 <meta charset="utf-8">
5 <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
6 <link rel="stylesheet" type="text/css" href="css/layout.css"/>
7 <!-- Link Swiper's CSS -->
8 <link rel="stylesheet" href="css/swiper.min.css">
9 <!-- Demo styles -->
10 <style>
11 html, body {
12 position: relative;
13 height: 100%;
14 }
15 body {
16 background: #eee;
17 font-family: Helvetica Neue, Helvetica, A
18 font-size: 14px;
19 color:#000;
20 margin: 0;
21 padding: 0;
22 }
23 .swiper-container {
24 width: 100%;
25 }
26
27 .swiper-slide {
28 text-align: center;
29 font-size: 18px;
30 background: #fff;
31 /* Center slide text vertically */
32 display: -webkit-box;
33 display: -ms-flexbox;
34 display: -webkit-flex;
35 display: flex;
36 -webkit-box-pack: center;
37 -ms-flex-pack: center;
38 -webkit-justify-content: center;
39 justify-content: center;
40 -webkit-box-align: center;
41 -ms-flex-align: center;
42 -webkit-align-items: center;
43 align-items: center;
44
45 }
46 </style>
47
48 <title>倍赚宝首页</title>
49 <script type="text/javascript" src="js/jquery1.9.1.js""></script>
50 <!-- Swiper JS -->
51 <script src="js/swiper.js"></script>
52
53 <script type="text/javascript" src="js/iscroll.js"></script>
54 <script type="text/javascript" src="js/hybrid-1.0.2.js"></script>
55 <script type="text/javascript" src="js/plugins/WinnerFrame.js"></script>
56 <script type="text/javascript">
57 var leverage={
58 leverageStock:function(){
59 window.plugins.winnerFrame.redirectTrade();
60 },
61 leverageNew:function(){
62 window.plugins.winnerFrame.redirectZijin();
63 }}
64 $(function(){
65 var imageRealWidth,imageRealHeight;
66 imageRealWidth=localStorage['imageRealWidth'];
67 imageRealHeight=localStorage["imageRealHeight"];
68 function callSwiper(){
69 //设置宽高
70 //$(".swiper-container").css("width",localStorage['swipercontainerWidth']);
71 //$(".swiper-container").css("height",localStorage['swipercontainerHeight']);
72 $(".swiper-container").css("height",$(".swiper-container").width()/imageRealWidth*imageRealHeight);
73 //alert("w h"+imageRealWidth+" "+imageRealHeight+", swiper-container w h "+$(".swiper-container").width()+" "+$(".swiper-container").height());
74 swiper = new Swiper('.swiper-container', {
75 pagination: '.swiper-pagination',
76 paginationClickable: true,
77 spaceBetween: 10,
78 centeredSlides: true,
79 autoplay: 2500,
80 autoplayDisableOnInteraction: false
81 });
82 }
83 if(imageRealWidth==null||imageRealHeight==null){
84 var image=new Image();
85 var swiper;
86 image.src="data:images/banner01.png";
87 image.onload=function(){
88 imageRealWidth=this.width;
89 imageRealHeight=this.height;
90 localStorage['imageRealWidth']= imageRealWidth; // 存储 cookie
91 localStorage['imageRealHeight']= imageRealHeight; // 存储 cookie
92 //存储 container控件宽高
93 localStorage['swipercontainerWidth']=$(".swiper-container").width();
94 localStorage['swipercontainerHeight']=$(".swiper-container").height();
95 callSwiper();
96 };
97 delete image;
98 }else{
99 callSwiper();
100 }
101
102 })
103 </script>
104
105 </head>
106
107 <body>
108 <article class="header">
109 <div class="logo"><img src="data:images/logo.png" width="100" height="34" alt="logo"/> </div>
110 </article>
111 <!--
112 <div class="banner">
113 <div class="flex-viewport">
114 <!-- 改变 -webkit-transform: translate3d(-100px, 0px, 0px), 改变位置
115 <ul class="slides" style="-webkit-transform: translate3d(0px, 0px, 0px);">
116 <li style="left:0;"><a><img src="data:images/banner01.png"/></a></li>
117 <li style="left:100%;"><a><img src="data:images/banner02.png"/></a></li>
118 <li style="left:200%;"><a><img src="data:images/banner03.png"/></a></li>
119 </ul>
120 </div>
121 </div>
122
123 -->
124 <!-- Swiper -->
125 <div class="swiper-container">
126 <div class="swiper-wrapper">
127 <div class="swiper-slide" style="background:url('images/banner01.png');background-repeat:no-repeat;background-size:100%;"></div>
128 <div class="swiper-slide" style="background:url('images/banner02.png');background-repeat:no-repeat;background-size:100%;"></div>
129 <div class="swiper-slide" style="background:url('images/banner03.png');background-repeat:no-repeat;background-size:100%;"></div>
130 </div>
131 <!-- Add Pagination -->
132 <div class="swiper-pagination"></div>
133
134 </div>
135
136 <article class="content am-grid">
137 <div class="clearfix">
138 <div class="blockButton blockButtoncg" onclick="leverage.leverageStock()">leverageStock</div>
139 <div class="blockButton blockButtondx" onclick="leverage.leverageNew()">leverageNew</div>
140 </div>
141 <p class="whytitle clearfix">
142 <span class="line"></span>
143 <span class="title">why choose this</span>
144 <span class="line"></span>
145 </p>
146 <aside class="reasons clearfix">
147 <div class="circle ycircle am-grid-item">
148 <div class="icon"></div>
149 <div class="txt">the maximum 1.8</div>
150 </div>
151 <div class="circle rcircle am-grid-item">
152 <div class="icon"></div>
153
154 <div class="txt">above 2.5 w</div>
155 </div>
156 <div class="circle bcircle am-grid-item">
157 <div class="icon"></div>
158 <div class="txt">8 percentage</div>
159 </div>
160 </aside>
161 </article>
162
163
164
165 </body>
166 </html>转载于:https://www.cnblogs.com/friends-wf/p/4582624.html
js swipe 图片滑动控件实现 任意尺寸适用任意屏幕相关推荐
- Android实现图片滚动控件，含页签功能，让你的应用像淘宝一样炫起来
转载请注明出处:http://blog.csdn.net/sinyu890807/article/details/8769904 首先题外话,今天早上起床的时候,手滑一下把我的手机甩了出去,结果陪伴我 ...
- 第一站小红书图片裁剪控件，深度解析大厂炫酷控件
先来看两张效果图: 哈哈,就是这样了.效果差了一些,感兴趣的小伙伴们可以运行代码感受丝滑与弹性.前段时间在竞品小红书上看到了这样的效果:图片可以跟随手指移动,双指可以(无限)放大,缩小,还可以挤压,手 ...
- 第一站小红书图片裁剪控件之二，自定义CoordinatorLayout联动效果
本篇续: 第一站小红书图片裁剪控件,深度解析大厂炫酷控件 先来看看几张效果图: emmmm,想感受高清丝滑的动画效果,有以下两种方式: https://github.com/HpWens/MeiWid ...
- 像小红书一样的图片裁剪控件联动效果
今日科技快讯 据CNBC报道,美国法官已经要求特斯拉首席执行官埃隆·马斯克(Elon Musk)在未来两周内设法与美国证券交易委员会(SEC)达成和解协议.否则,法院将决定是否判马斯克犯有藐视法庭罪. ...
- 第一站仿小红书图片裁剪控件，深度解析大厂炫酷控件
先来看两张效果图: 哈哈,就是这样了.效果差了一些,感兴趣的小伙伴们可以运行代码感受丝滑与弹性.前段时间在竞品小红书上看到了这样的效果:图片可以跟随手指移动,双指可以(无限)放大,缩小,还可以挤压,手 ...
- Android左右滑动控件实现开关的切换效果
/** * 开关控件,通过左右滑动控件实现开关的切换效果 <br> * 使用时需要设置开关状态监听{@link OnSwitchStateChangeListener} <br& ...
- android从九宫格全屏预览,仿微信朋友圈展示图片的九宫格图片展示控件，支持点击图片全屏预览大图...
AssNineGridView 仿微信朋友圈展示图片的九宫格图片展示控件,支持点击图片全屏预览大图(可自定义). 写在前面 这是一个九宫格控件,本来是很久之前就写好了,现在才开源出来,也是看了很多优秀 ...
- Android开发技巧——定制仿微信图片裁剪控件
拍照--裁剪,或者是选择图片--裁剪,是我们设置头像或上传图片时经常需要的一组操作.上篇讲了Camera的使用,这篇讲一下我对图片裁剪的实现. 背景 下面的需求都来自产品. 裁剪图片要像微信那样,拖动 ...
- CropImageView android上的一个图片裁剪控件
CropImageView **文前:**本文非常容易让读者看的云里雾里,建议直接看效果图,觉得有用就去看源码吧. CropImageView的原型来自Cropimage_demo,是android上 ...
最新文章
- mysql mysqlhotcopy_MySQL备份之mysqlhotcopy与注意事项
- 完整java开发中JDBC连接数据库代码和步骤
- python3 获取 文件 文件夹大小
- 【深度学习】利用一些API进行图像数据增广
- HTML中的Content-Type的类型
- websevice中runtime modeler error: Wrapper class com.ws.jaxws.Add is not found问题的解决办法
- php 小程序登录授权解密,微信小程序授权登录，PHP解密数据，并返回用户信息token记住登录状态...
- LeetCode 25 Reverse Nodes in k-Group
- 参考文献标号字体_论文格式要求及字体大小
- Redis 集群模式（Cluster）原理详解
- 雷云3 Razer Synapse官方版-雷云3 Razer Synapse官方版下载
- matlab画组合立方体,matlab小程序 画立方体
- fatal: The remote end hung up unexpectedly解决办法
- [附源码]java毕业设计基于的高校学生考勤管理系统
- 通过硬盘iso文件安装ubuntu
- Js实现将Excel导出为JSON
- 新一代人工智能有哪些新看点？
- Beacon of BLE
- python笔记-2020/09/03下午-字符串练习（5）
- 区块链中的石墨烯技术是什么