前端开发效果_立体物品预览

前端开发we文档|网站前端开发的模板|前端开发 浏览器缓存

1、初始自动360度展示,点击后会手动拖拽查看。
2、图片有点多,可能加载有点慢。
3、这里只用了36张图,本地测过120张图,特别流畅。不过图片太多传网上不方便,就只传了36张。html 代码

<!DOCTYPE html>
<head>
    <meta charset=”UTF-8″>
    <title>360度旋转图</title>
    <style type=”text/css”>
        html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        .box {
            position: relative;
            width: 600px;
            height: 400px;
            top: 50%;
            left: 50%;
            margin: -200px 0 0 -300px;
        }
        .box img {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <div class=”box” id=”box”>
        <img id=”img” src=”http://sandbox.runjs.cn/uploads/rs/269/ikifpcmz/CapturesP0.png” />
    </div>
</body>
<script src=”https://libs.baidu.com/jquery/2.0.0/jquery.min.js”></script>
<script type=”text/javascript”>
    $(document).ready(function () {
        var auto = setInterval(function () {
            $(“#img”).attr(“src”, imgSrc + “/CapturesP” + imgNum + “.png”);
            imgNum–;
            if (imgNum > maxImg) { imgNum = minImg; }
            if (imgNum < minImg) { imgNum = maxImg; }
        }, 500);
        $(“#box”).click(function () {
            clearInterval(auto);
        });
        var mouseOrignX = 0,
            mouseOrignY = 0;//鼠标初始的坐标值
        var mouseX = 0,
            mouseY = 0;//鼠标当前坐标
        var maxImg = 35;//最大图片序号
        var minImg = 0;//最小图片序号
        var sign = false;
        var step = 7;//鼠标灵敏度
        var imgSrc = “http://sandbox.runjs.cn/uploads/rs/269/ikifpcmz”;
        var imgNum = minImg;//当前图片序号
        $(“#img”).attr(“src”, imgSrc + “/CapturesP” + imgNum + “.png”);
        $(document).bind(‘touchstart mousedown’, function (e) {
            sign = true;
            var touch;
            if (event.touches) {
                touch = event.touches[0];
            } else {
                touch = event;
            }
            mouseOrignY = touch.pageY;
            mouseOrignX = touch.pageX;
        });
        $(document).bind(‘touchmove mousemove’, function (e) {
            if (sign) {
                window.event.preventDefault(); //阻止页面的滑动默认事件
                var touch;
                if (event.touches) {
                    touch = event.touches[0];
                } else {
                    touch = event;
                }
                mouseX = touch.clientX;
                mouseY = touch.clientY;
                if ((mouseX – mouseOrignX) < 0 && (mouseX – mouseOrignX) % step == 0 && imgNum <= maxImg) {
                    imgNum–;
                } else if ((mouseX – mouseOrignX) > 0 && (mouseX – mouseOrignX) % step == 0 && imgNum <= maxImg) {
                    imgNum++;
                }
                if (imgNum > maxImg) { imgNum = minImg; }
                if (imgNum < minImg) { imgNum = maxImg; }
                $(“#img”).attr(“src”, imgSrc + “/CapturesP” + imgNum + “.png”);
                return false;
            }
        });
        $(document).bind(‘touchend mouseup’, function () {
            sign = false;
        });
    });
</script>
</html>

标准前端开发规范文档|前端开发实例 百度api|网游游戏开发前端

» 本文来自:前端开发者 » 《前端开发效果_立体物品预览》
» 本文链接地址:https://www.rokub.com/5120.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!