zoukankan      html  css  js  c++  java
  • Swiper滑动Html5手机浏览器自适应

    手机网页能通过window.screen.height, width获取屏幕分辨率,于是能够通过分辨率比率来计算高度。

    window.onload=function(){
    	var swiper = document.getElementById("swiper");
    	var scale = window.screen.height / window.screen.width;
    	swiper.style.height = document.body.clientWidth * scale + "px";
    }

    结合swiper来做个手机全屏适配的滑动,所有代码例如以下

    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="utf-8">
    	<meta name="viewport" content="width=device-width,height=device-height,target-densitydpi=high-dpi,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
        <title>swiper demo</title>
    	<link rel="stylesheet" href="swiper.min.css"/>
    	<style type="text/css">
    	body {
            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
            font-size: 14px;
            color:#000;
            margin: 0;
            padding: 0;
        }
        .swiper-container {
            margin: 0 auto;
        }
        .swiper-slide {
            text-align: center;
            font-size: 18px;
            background: #fff;
        }
    	</style>
    </head>
    <body>
    	<div class="swiper-container" id="swiper">
    		<div class="swiper-wrapper">
    			<div class="swiper-slide" style="background:green;">Slide 1</div>
                <div class="swiper-slide" style="background:yellow;">Slide 2</div>
                <div class="swiper-slide" style="background:orange;">Slide 3</div>
    		</div>
    		
    	    <div class="swiper-pagination"></div>
    	    
    	</div>
    	
        <script src="swiper.min.js"></script>
    	<script>
    		window.onload=function(){
    			var swiper = document.getElementById("swiper");
    			var scale = window.screen.height / window.screen.width;
    			swiper.style.height = document.body.clientWidth * scale + "px";
    		}
    		var mySwiper = new Swiper('.swiper-container',{
    			direction: 'horizontal',
    		    loop: false,
    		    pagination: '.swiper-pagination'
    		});    
    	</script>
    </body>
    </html>


  • 相关阅读:
    (转)排序算法——归并排序与递归
    在serviceImpl里使用自身的方法
    hibernate manytoone中的lazy EAGER
    autowire异常的三个情况
    (转)js的call和apply
    mysql创建外键出错(注意数据库表字段排序)
    easyui datagrid
    ava.lang.NullPointerException的一般解决方法
    spring简单事务管理器
    关于使用注解出现BeanCreationException或者NameNotFoundException的解决方法
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5244649.html
Copyright © 2011-2022 走看看