360度全方位3D预览插件

所属分类:媒体-图片展示

 28487  265  查看评论 (4)
分享到微信朋友圈
X
360度全方位3D预览插件 ie兼容12

使用方法

在页面中引入下面的js和CSS文件。

<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/cube.css" />
<link rel="stylesheet" href="css/axes.css" />
<link rel="stylesheet" href="css/controls.css" />
<script src="js/controls.js"></script>
<script src="js/rotate.js"></script>

使用该js和CSS3图片360度全方位3D预览插件的基本HTML结构如下。

<div class="perspective drag-area">
    <div class="camera">
        <div class="rotate">
            <div class="cube">
                <div class="side front">
                    <div class="side left">
                        <div class="side top"></div>
                        <div class="side bottom"></div>
                        <div class="side back">
                            <div class="side right">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="axes">
    <div class="rotate">
        <div class="axis main-axis red-axis">
            <div class="axis perpendicular-axis red-axis"></div>
        </div>
        <div class="axis main-axis green-axis">
            <div class="axis perpendicular-axis green-axis"></div>
        </div>
        <div class="axis main-axis blue-axis">
            <div class="axis perpendicular-axis blue-axis"></div>
        </div>
    </div>
</div>
<div class="controls">
    <img class="input-show-borders" src="images/cube.svg">
    <img class="input-show-grid" src="images/globe.svg">
    <div class="zoom">
        <input class="input-zoom" type="range" min="-800" max="800" value="800">
    </div>
</div>
相关插件-图片展示

jQuery的图片浏览插件Zoomimage

该jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。
  图片展示
 53710  354

在圆点上不断滑动鼠标看看效果

图片以圆点显示,随着鼠标的滑动,圆点的尺寸越来越小,图片越来越清晰
  图片展示
 32955  450

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 51996  698

jQuery移动端对图片进行拖拽与旋转等操作

选着一个背景模板 然后对图片进行拖拽或者旋转一个角度 或者放大和缩小 进行调整 然后保存下来
  图片展示
 26249  303

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    悠然 0
    2020/3/4 15:53:48
    我还以为是对多张图片操作了 回复
    SiriBen 0
    2019/7/30 9:13:03
    不得不说这个确实牛匹,但是不知道在什么场景应用
        ? TiNG0
        2019/8/7 11:47:55
        随缘吧 可以当展示用
        Buenos Aires0
        2019/8/11 11:40:51
        VR呗
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复