html5 运行在手机上图片根据手势缩放

椰角科技

于 2016-07-14 21:58:11 发布

阅读量6.6k

点赞数 6

分类专栏： html 文章标签： html5 手机图片

html 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

html5 运行在手机上图片根据手势缩放

<!doctype html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; 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" />

        <title>图片缩放</title>
        <link rel="stylesheet" href="themes/scale.css" type="text/css" />
    </head>
    <body>
    	<div class="list">
            <img src="themes/images/2.jpg" />
    	</div>

    	<section class="imgzoom_pack">
    		<div class="imgzoom_x">X</div>
    		<div class="imgzoom_img"><img src="" /></div>
    	</section>
        <script src="js/scale.js"></script>
		<script>
			document.addEventListener("DOMContentLoaded", function(event){
				ImagesZoom.init({
					"elem": ".list"
				});
			}, false);
		</script>
    </body>
</html>

分析：图片必须在class="list"里面，引入一个css文件，一个js文件。

文件下载：http://pan.baidu.com/s/1dERJhuh