网页中360度展示产品

最新推荐文章于 2021-10-09 16:09:35 发布

贺兰山长老

最新推荐文章于 2021-10-09 16:09:35 发布

阅读量696

点赞数

本文链接：https://blog.csdn.net/qq_33998074/article/details/105556653

版权

Demo地址演示

360展示产品

源码举例


<html>
    <head>
        <title>360度产品展示</title>
        <link rel="stylesheet" href="assets/css/main.css">
	<meta charset="utf-8" />
    </head>
    <body>
        <h1>360度产品展示</h1>
        <h2>通过不同视角向您展示产品的“秘密”</h2>
        <div class="threesixty-wrapper">
            <div class="threesixty" data-path="assets/img/src/gem{index}.jpg" data-count="61">
                <!-- put your preloader here -->
                <div class="ui-spinner">
                    <span class="side side-left">
                        <span class="fill"></span>
                    </span>
                    <span class="side side-right">
                        <span class="fill"></span>
                    </span>
                </div>
                <!-- end preloader -->
            </div>
            <div class="ui">
                <div class="next">下一页</div>
                <div class="prev">上一页</div>
            </div>
            <img src="assets/img/label.png" alt="" class="label"/>
        </div>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
        <script src="assets/js/jquery.threesixty.js"></script>
        <script>
            $(document).ready(function(){

                var $threeSixty = $('.threesixty');

                $threeSixty.threeSixty({
                    dragDirection: 'horizontal',
                    useKeys: true,
                    draggable: true
                });

                $('.next').click(function(){
                    $threeSixty.nextFrame();
                });

                $('.prev').click(function(){
                    $threeSixty.prevFrame();
                });

                $threeSixty.on('down', function(){
                    $('.ui, h1, h2, .label, .examples').stop().animate({opacity:0}, 300);
                });

                $threeSixty.on('up', function(){
                    $('.ui, h1, h2, .label, .examples').stop().animate({opacity:1}, 500);
                });
            });
        </script>
    </body>
</html>

如果有问题也欢迎向我进行提问，我会很及时解决，也可以访问的我的[个人博客](http://www.dale047.com/)