alloytouch
Version:
super tiny size touch and physical motion library for the web
58 lines (53 loc) • 1.81 kB
HTML
<html>
<head>
<meta charset="utf-8">
<title>AlloyTouch</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style>
#header {
position: absolute;
z-index: 2;
top: 0;
left: 0;
width: 100%;
height: 45px;
line-height: 45px;
background: #00ABEB;
padding: 0;
color: #eee;
font-size: 20px;
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="header">AlloyTouch</div>
<div id="testImg" style="
width: 100%;
height: 210px;
position: absolute;
top: 50%;
text-align: center;
margin-top: -105px;">
<img style="width: 210px; height: 210px;" src="//alloyteam.github.io/AlloyTouch/full_page/asset/atLogo.png" alt="" /></div>
<a href="https://github.com/AlloyTeam/AlloyTouch" target="_blank" style="position: fixed; right: 0; top: 0; z-index: 3;width:140px;height:140px;">
<img src="//alloyteam.github.io/github.png" alt="">
</a>
<script src="../transformjs/transform.js"></script>
<script src="../index.js"></script>
<script>
var target = document.querySelector("#testImg");
//给element注入transform属性
Transform(target);
new AlloyTouch({
touch: target,//反馈触摸的dom
vertical: false,//不必需，默认是true代表监听竖直方向touch
target: target, //运动的对象
property: "rotateY", //被滚动的属性
factor: 1//不必需,默认值是1代表touch区域的1px的对应target.y的1
})
</script>
</body>
</html>