找回密码
当前位置：前端开发者 > 教程 > 正文

前端商城开发_商品展示功能

2018-08-11 18:36:35 分类：教程 阅读(519) 评论(0)

智能遥控app能用前端开发吗|前端开发需要什么学历|web前端能开发app吗

html 代码

<!DOCTYPE html>
<html lang=”en”>
<head>
    <meta charset=”UTF-8″>
    <title>Document</title>
    <style type=”text/css”>
        * {
            padding: 0;
            margin: 0;
        }
        ul,
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }
        #gallery {
            width: 400px;
            margin: 100px auto 0;
        }
        #gallery .gallery_main {
            position: relative;
            z-index: 100;
            width: 400px;
            height: 400px;
        }
        #gallery .gallery_small,
        #gallery .gallery_big {
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 400px;
            overflow: hidden;
        }
        #gallery .gallery_big {
            left: 420px;
        }
        #gallery .gallery_small img {
            width: 100%;
            height: 100%;
        }
        #gallery .gallery_small .gallery_move {
            display: none;
            position: absolute;
            background: #f78f1e;
            cursor: move;
            width: 200px;
            height: 200px;
            opacity: 0.5;
            filter: alpha(opacity=50);
            z-index: 10;
        }
        #gallery .gallery_slide_box {
            position: relative;
            padding: 10px 20px;
            width: 360px;
            height: 100px;
        }
        #gallery .gallery_big {
            display: none;
        }
        #gallery .gallery_slide_box_inner {
            position: relative;
            width: 360px;
            height: 100px;
            overflow: hidden;
        }
        #gallery .gallery_slide {
            position: absolute;
            left: 0;
            top: 0;
        }
        #gallery .gallery_slide li {
            float: left;
            width: 88px;
            height: 88px;
            border: 1px solid #fff;
            cursor: pointer;
        }
        #gallery .gallery_slide li:hover {
            border-color: #f78f1e;
        }
        #gallery .gallery_slide .active {
            border-color: #f78f1e;
        }
        #gallery .gallery_slide li img {
            width: 100%;
            height: auto;
        }
        #gallery .gallery_slide_box .arrow_left {
            position: absolute;
            left: 0;
            top: 40px;
            font-size: 24px;
        }
        #gallery .gallery_slide_box .arrow_right {
            position: absolute;
            right: 0;
            top: 40px;
            font-size: 24px;
        }
        #gallery .gallery_slide_box .arrow_ban {
            color: #dedede;
        }
        #gallery .gallery_big img {
            width: 800px;
            height: 800px;
        }
    </style>
</head>
<body>
    <div id=”gallery”>
        <div class=”gallery_main”>
            <div class=”gallery_small” id=”gallerySmall”>
                <span class=”gallery_move” id=”galleryMove”></span>
                <img src=”http://image.mihui365.com/bbc/skuImg/4908049048341_1001.jpg” />
            </div>
            <div class=”gallery_big” id=”galleryBig”>
                <img src=”http://image.mihui365.com/bbc/skuImg/4908049048341_1001.jpg
“id=”galleryBigImg” />
            </div>
        </div>
        <div class=”gallery_slide_box”>
            <a href=”###” class=”arrow_left” id=”arrowLeft”>
            </a>
            <a href=”###” class=”arrow_right” id=”arrowRight”>></a>
            <div class=”gallery_slide_box_inner” id=”galleryInner”>
                <ul class=”gallery_slide” id=”gallerySlide”>
                    <li>
                        <img src=”http://image.mihui365.com/bbc/skuImg/4908049048341_1001.jpg” />
                    </li>
                    <li>
                        <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201607/12/105408fkyo9aaqqq0mwaq9.jpg” />
                    </li>
                    <li>
                        <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201607/12/105528tfqndbfg1ydqj1dj.jpg” />
                    </li>
                    <li>
                        <img src=”http://image.mihui365.com/bbc/skuImg/4908049048341_1001.jpg” />
                    </li>
                    <li>
                        <img src=”http://cdn.attach.w3cfuns.com/notes/pics/201607/12/105528hbamrab34q6kjnj5.jpg” />
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <script type=”text/javascript”>
        function Enlarge(smallBox, bigBox, move, img, galleryInner, gallerySlide, arrowLeft, arrowRight) {
            this.init(smallBox, bigBox, move, img, galleryInner, gallerySlide, arrowLeft, arrowRight);
        }
        Enlarge.prototype = {
            init: function (smallBox, bigBox, move, img, galleryInner, gallerySlide, arrowLeft, arrowRight) {
                var that = this;
                this.smallBox = smallBox;
                this.bigBox = bigBox;
                this.move = move;
                this.img = img;
                this.scale1 = this.scale2 = 2;
                this.galleryInner = galleryInner || ”;
                this.gallerySlide = gallerySlide || ”;
                this.arrowLeft = arrowLeft;
                this.arrowRight = arrowRight;
                this.gallerySlideLi = this.gallerySlide.getElementsByTagName(‘li’);
                this.num = this.gallerySlideLi.length;
                this.width = this.gallerySlideLi[0].offsetWidth;
                if (this.checkShow() === -1) {
                    this.arrowLeft.style.display = this.arrowRight.style.display = ‘none’;
                } else {
                    this.gallerySlide.style.width = this.num * this.width + ‘px’;
                    this.index = 0;
                    this.arrowLeft.onclick = function () {
                        if (that.index === 0) {
                            return false;
                        } else {
                            that.prev();
                        }
                    };
                    this.arrowRight.onclick = function () {
                        if (that.index === that.num – 4) {
                            return false;
                        } else {
                            that.next();
                        }
                    }
                }
                this.smallBox.onmousemove = function (event) {
                    that.goMove(event);
                };
                this.smallBox.onmouseout = function () {
                    that.move.style.display = ‘none’;
                    that.bigBox.style.display = ‘none’;
                };
                for (var i = 0; i < this.gallerySlideLi.length; i++) {
                    this.gallerySlideLi[i].onmouseover = function () {
                        that.smallBox.getElementsByTagName(‘img’)[0].src = that.bigBox.getElementsByTagName(‘img’)[0].src = this.getElementsByTagName(‘img’)[0].src;
                    }
                }
            },
            checkShow: function () {
                if (this.gallerySlide == ” || this.galleryInner == ”) {
                    return -1;
                } else {
                    if (this.width * this.num <= this.galleryInner.offsetWidth) {
                        return -1;
                    }
                }
            },
            prev: function () {
                this.index–;
                this.moveSlide(this.index);
            },
            next: function () {
                this.index++;
                this.moveSlide(this.index);
            },
            moveSlide: function (index) {
                var translate = – index * this.width;
                var oThis = this;
                clearInterval(oThis.timer);
                oThis.timer = setInterval(function () {
                    var iSpeed = (translate – oThis.gallerySlide.offsetLeft) / oThis.num;
                    iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                    if (iSpeed === 0) {
                        clearInterval(oThis.timer);
                    } else {
                        oThis.gallerySlide.style.left = oThis.gallerySlide.offsetLeft + iSpeed + ‘px’;
                    }
                }, 25);
            },
            showBigImg: function () {
            },
            goMove: function (event) {
                var event = window.event || event;
                var x = event.clientX;
                var y = event.clientY;
                this.move.style.display = this.bigBox.style.display = ‘block’;
                x = x – this.smallBox.getBoundingClientRect().left – this.move.offsetWidth / 2;
                y = y – this.smallBox.getBoundingClientRect().top – this.move.offsetHeight / 2;
                if (x < 0) {
                    x = 0;
                } else if (x > this.smallBox.offsetWidth – this.move.offsetWidth) {
                    x = this.smallBox.offsetWidth – this.move.offsetWidth;
                }
                if (y < 0) {
                    y = 0;
                } else if (y > this.smallBox.offsetHeight – this.move.offsetHeight) {
                    y = this.smallBox.offsetHeight – this.move.offsetHeight;
                }
                this.move.style.left = x + ‘px’;
                this.move.style.top = y + ‘px’;
                this.bigBox.scrollLeft = this.scale1 * x;
                this.bigBox.scrollTop = this.scale2 * y;
            }
        };
        var smallBox = document.getElementById(‘gallerySmall’);
        var bigBox = document.getElementById(‘galleryBig’);
        var galleryMove = document.getElementById(‘galleryMove’);
        var galleryBigImg = document.getElementById(‘galleryBigImg’);
        var galleryInner = document.getElementById(‘galleryInner’);
        var gallerySlide = document.getElementById(‘gallerySlide’);
        var arrowLeft = document.getElementById(‘arrowLeft’);
        var arrowRight = document.getElementById(‘arrowRight’);
        new Enlarge(smallBox, bigBox, galleryMove, galleryBigImg, galleryInner, gallerySlide, arrowLeft, arrowRight);
    </script>
</body>
</html>

开发app需要前端吗?|前端开发 大学有什么专业|开发app用什么前端技术

» 本文来自：前端开发者 » 《前端商城开发_商品展示功能》
» 本文链接地址：https://www.rokub.com/5183.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论