javascript手机查看图片效果

手机web前端开发声明

手机射频前端开发

手机开发前端

html 代码

<!DOCTYPE html>

<head>

<title>javascript手机查看图片效果</title>

<style>

* { padding: 0; margin: 0; }

li { list-style: none; }

body { background: #333; }

#iphone { width: 900px; height: 600px; background: url(http://www.bird100.cn/wp-content/uploads/2016/demo/javascript24/img/bg1.jpg); position: absolute; top: 50%; left: 50%; margin: -300px 0 0 -450px; }

#wrap { width: 238px; height: 360px; position: absolute; top: 121px; left: 326px; overflow:hidden; }

#iphone ul { width: 960px; height: 361px; cursor: pointer; position: absolute; top: 0px; left: 0px; }

#iphone li { float: left; width:240px; height:360px; overflow:hidden; }

</style>

</head>

window.onload = function () {

var oBox = document.getElementById(“wrap”);

var oUl = oBox.children[0];

var aLi = oUl.children;

var iNow = 0;

oBox.onmousedown = function (ev) {

var ev = ev || event;

var disX = ev.clientX – oUl.offsetLeft;

var downX = ev.clientX;

document.onmousemove = function (ev) {

var ev = ev || event;

var X = ev.clientX – disX;

oUl.style.left = X + “px”;

}

document.onmouseup = function (ev) {

document.onmousemove = null;

document.onmouseup = null;

var ev = ev || event;

var upX = ev.clientX;

console.log(downX)

console.log(upX)

if (Math.abs(upX – downX) > 30) {

//如果按下比抬起大，下一张

if (downX > upX) {

iNow++;

if (iNow > 3) iNow = 3;

} else {

//如果按钮比抬起小，上一张

iNow–;

if (iNow < 0) iNow = 0;

}

doMove(oUl, { left: -iNow * aLi[0].offsetWidth }, { duration: 700, easing: Tween.Bounce.easeOut });

oUl.releaseCapture && oUl.releaseCapture();

}

//console.log(oUl.offsetLeft)

oUl.setCapture && oUl.setCapture();

return false;

}

</script>

<body>

<ul>

</ul>

</div>

</body>

</html>

手机前端开发的流程图

手机web前端开发ide

手机前端开发APP

javascript手机查看图片效果

前端开发者

相关推荐

评论抢沙发

评论前必须登录！

最新评论

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

最新评论

评论抢沙发