• 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>


  • 相关阅读:
    作业
    第一次作业
    临时和永久关闭firewalld与selinux
    联合删除
    使用CascadingDropDown实现级联式下拉框
    使用createElement动态创建HTML对象.
    关于DotNetZip的用法
    网站性能优化:cache-control设置详解
    百度蜘蛛Baiduspider User-Agent字段更新与IP判断
    (转)一个简单,方便的七牛云存储的客户端(收藏)
  • 原文地址:https://www.cnblogs.com/yxwkf/p/5244649.html
Copyright © 2020-2023  润新知