javascript手机查看图片效果

手机web前端开发声明
手机射频前端开发
手机开发前端

html 代码

<!DOCTYPE html>
<head>
    <meta 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>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>
    <script type=”text/javascript” src=”http://www.bird100.cn/wp-content/uploads/2016/demo/javascript24/domove.js”></script>
</head>
<script>
    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>
    <div id=”iphone”>
        <div id=”wrap”>
            <ul>
                <li style=”background:url(http://www.bird100.cn/wp-content/uploads/2016/demo/javascript24/img/pic1_1.png);” title=”前端菜鸟”></li>
                <li style=”background:url(http://www.bird100.cn/wp-content/uploads/2016/demo/javascript24/img/pic2_1.png);” title=”前端菜鸟”></li>
                <li style=”background:url(http://www.bird100.cn/wp-content/uploads/2016/demo/javascript24/img/pic3_1.png);” title=”前端菜鸟”></li>
                <li style=”background:url(http://www.bird100.cn/wp-content/uploads/2016/demo/javascript24/img/pic4_1.png);” title=”前端菜鸟”></li>
            </ul>
        </div>
    </div>
</body>
</html>
手机前端开发的流程图
手机web前端开发ide
手机前端开发APP
» 本文来自:前端开发者 » 《javascript手机查看图片效果》
» 本文链接地址:https://www.rokub.com/6289.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!