精华内容
下载资源
问答
  • 非常好用,加载多张图片,产品360度旋转展示,非常好用,加载多张图片
  • 点量源动闪媒360三维造景全景展示系统是一款Flash三维物体旋转展示的播放器软件。它提供了一种在因特网上逼真旋转展示三维物体的崭新方法。其通过对一个现实物体进行360°环绕拍摄得到的图像进行自动内部处理,给...
  • jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现。
  • 用html5+jquery模仿淘宝、京东等电商网站的商品360旋转效果,自己封装的插件,易懂易用。我的资源里有一个老版本的,请不要下载了。这个在原有基础上添加了拖拽功能。
  • jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现。
  • 这是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,jQuery图片360度3D旋转展示代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] var ...
  • HTML5产品360度旋转展示特效

    千次阅读 2015-12-23 13:12:00
    体验效果:http://hovertree.com/texiao/html5/10.htm下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm代码如下:<!...<...<head><meta charset="utf-8"><...Full 360 degr...

    体验效果:http://hovertree.com/texiao/html5/10.htm

    下载:http://hovertree.com/hvtart/bjae/t16oddyt.htm


    代码如下:
    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Full 360 degree View - HoverTree</title>
    <style>
    .hvtholder {
    margin: 0px auto;
    width: 789px;
    text-align: center;
    }
    a {
    color: blue;
    }
    </style>
    <script type="text/javascript" src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js"></script>
    <script>
    var ctx = null; // global variable 2d context
    var frame = 1; // 23
    var width = 0;
    var height = 0;
    var started = false;
    var images = new Array();
    var startedX = -1;
    $(function () {
    var canvas = document.getElementById("hov"+"ertree_canvas");
    canvas.width = 440;// window.innerWidth;
    canvas.height = 691;//window.innerHeight;
    width = canvas.width;
    height = canvas.height;
    var bar = document.getElementById('loadHove'+'rTreeBar');
    for (var i = 1; i < 24; i++) {
    bar.value = i;
    if (i < 10) {
    images[i] = new Image();
    images[i].src = "10/hovertree0" + i + ".jpg";
    }
    else {
    images[i] = new Image();
    images[i].src = "10/hovert"+"ree" + i + ".jpg";
    }
    }
    ctx = canvas.getContext("2d");

    // mouse event
    canvas.addEventListener("mousedown", doMouseDown, false);
    canvas.addEventListener('mousemove', doMouseMove, false);
    canvas.addEventListener('mouseup', doMouseUp, false);
    // loaded();

    // frame = 1
    frame = 1;
    images[frame].onload = function () {
    redraw();
    bar.style.display = 'none';
    }
    $("#goHovertr"+"ee").on("click", function () { gohovertree();})
    })

    function doMouseDown(event) {
    var x = event.pageX;
    var y = event.pageY;
    var canvas = event.target;
    var loc = getPointOnCanvas(canvas, x, y);
    console.log("mouse down at point( x:" + loc.x + ", y:" + loc.y + ")");
    startedX = loc.x;
    started = true;
    }

    function doMouseMove(event) {
    var x = event.pageX;
    var y = event.pageY;
    var canvas = event.target;
    var loc = getPointOnCanvas(canvas, x, y);
    if (started) {
    var count = Math.floor(Math.abs((startedX - loc.x)/30));
    var frameIndex = Math.floor((startedX - loc.x)/30);
    while(count > 0)
    {
    console.log("frameIndex = " + frameIndex);
    count--;
    if(frameIndex > 0)
    {
    frameIndex--;
    frame++;
    } else if(frameIndex < 0)
    {
    frameIndex++;
    frame--;
    }
    else if(frameIndex == 0)
    {
    break;
    }

    if(frame >= 24)
    {
    frame = 1;
    }
    if(frame <= 0)
    {
    frame = 23;
    }
    redraw();
    }
    }
    }

    function doMouseUp(event) {
    console.log("mouse up now");
    if (started) {
    doMouseMove(event);
    startedX = -1;
    started = false;
    }
    }

    function getPointOnCanvas(canvas, x, y) {
    var bbox = canvas.getBoundingClientRect();
    return { x: x - bbox.left * (canvas.width / bbox.width),
    y: y - bbox.top * (canvas.height / bbox.height)
    };
    }

    function gohovertree() {
    setTimeout( update, 1000/8);
    }
    function redraw()
    {
    // var imageObj = document.createElement("img");
    // var imageObj = new Image();
    var imageObj = images[frame];
    ctx.clearRect(0, 0, width, height)
    ctx.drawImage(imageObj, 0, 0, width, height);
    }
    function update() {
    redraw();
    frame++;
    if (frame >= 23) frame = 1;
    setTimeout( update, 1000/8);
    }
    </script>
    </head>
    <body>
    <div class="hvtholder">
    <h3>360度旋转产品展示</h3><a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/hvtart/bjae/49kk0ib8.htm">原文</a>
    <br />点击下面按钮旋转<br /><button id="goHovertree">点击旋转</button>
    <br />
    </div>
    <div style="width:640px;margin:0 auto;">

    <progress id="loadHoverTreeBar" value="0" max="23"></progress>

    <canvas id="hovertree_canvas">您的浏览器不支持HTML5,使用支持HTTML5的浏览器,何问起,hovertree.com</canvas>

    </div>

    </body>
    </html>

    转载于:https://www.cnblogs.com/hgbgfg/p/5069635.html

    展开全文
  • 360度全景展示flash源文件 AS2
  • 产品360度旋转展示

    2011-07-14 10:56:50
    flash 产品360度旋转展示,可拖动。自动旋转
  • 这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节。 jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要...
  • 360 全景 3D 旋转展示功能(JavaScript)

    现如今,某宝、某东等一些知名的购物网站,均在其商品详情页的主图添加了 360 度全景 3D 旋转展示功能,如下图:



    但实际上,并非大家都想到的 3D 建模,其实是很简单的一种实现方式。只需要一台单反,然后一个旋转台,将产品摆放在台面之上匀速旋转,相机快速连续拍摄,将旋转一圈的相片完完整整拍摄下来。




    获得拍摄好的照片后,就可以写 JS 代码了。具体的大家自己看吧。

    https://github.com/CoderZYWang/3DWatchForJS


    展开全文
  • 手机360度旋转展示

    2014-02-17 18:09:20
    这是用flash做的一款手机展示效果,实现了手机360度各个面的展示,手机卖家可以展示自己的商品,开发者也可以用来研究。里面的图片可以替换,需要注意的是,替换的名称要与原来的一致哦!
  • 这是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,jQuery图片360度3D旋转展示代码。
  • jQuery产品图片360度旋转插件是一款可以对产品图片进行360度全方位旋转展示的jQuery插件下载。
  • Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,...

    Circlr插件是一款基于jQuery的可以对图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,动画顺畅,也更易于控制,非常适合于商品的展示。

    主要的特点有:

    支持水平或垂直方向旋转。

    支持移动触摸事件。

    支持滚动事件。

    图片预加载处理。

    可以反向和循环旋转图片。

    源码下载(内含完整图片)https://download.csdn.net/download/zero________________/10424539

    1.引入js文件

     <!-- y这是一个jquery插件,所以先引入jquery -->
        <script src="js/jquery.min.js"></script>
        <script src="js/circlr.min.js"></script>>

    2.html结构

    <div class="container">
            <div id="circlr">
                 <img data-src="images/1.png" />
                 <img data-src="images/2.png" /> 
                 <img data-src="images/3.png" />    
                 ...     //  这里放入所需图片即可, 图片太多可用js动态添加
                <div id="loader"></div>
            </div>
     </div>  

      图片太多了咱们用js动态添加

    注意, 是 自定义属性 data-src 里面写路径 2. loader 是 加载项

    <div class="container">
        <div id="circlr">
            <div id="loader"></div>
        </div>
        <script>
            // 需要准备 74个图片
            for (var i = 1; i <= 74; i++) {
                // 创建图片   别忘更换属性
                var img = $("<img  data-src='images/" + i + ".png'/>");
                // 追加到 circlr里面
                $("#circlr").append(img);// prepend 内部的前面添加  append 内部的后面添加
            }
        </script>
    </div>

    3.css样式(可省略)

    #circlr {
        cursor: move;
        margin: 0 auto;
        min-height: 100px;
        position: relative;
    }
    #circlr #loader {
        background: url(../images/loader.gif) center center no-repeat;
        bottom: 0;
        display: none;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }

    4.js

    <script>
        $(function () {  // 加一个入口函数 ,意思是等上面的 74张图片加载完毕之后,才执行
            var crl = circlr('circlr', {
                scroll: true,  // 滚动滚轮也能旋转
                loader: 'loader'
            })
        })
    </script>

    源码下载(内含完整图片)https://download.csdn.net/download/zero________________/10424539

    有什么不足的地方,希望大家可以指出来,共同努力共同进步。案例中用到了很多图片,都在上面链接地址中可以下载。

    展开全文
  • 产品360度旋转,比如汽车、摩托车等的360度旋转效果,适合各大网站产品展示
  • [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
  • 360度产品展示html代码

    2013-04-09 11:58:18
    360度 代码 3D产品展示代码 html代码 javascript
  • jQuery产品图片360度旋转插件是一款可以对产品图片进行360度全方位旋转展示的jQuery插件下载。
  • 3dEye是一款非常实用的360度产品3D旋转展示特效jQuery插件。通过使用这个插件你可以向用户全方位展示你的商品。用户可以通过鼠标来旋转商品图片,从不同的角度观察商品,对于用户来说是非常好的体验。
  • 这是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,jQuery图片360度3D旋转展示代码。
  • jQuery 360度图片旋转切换,展示代码,点击图片,会从后向前依次旋转出来,有点立体感的效果,非常棒的效果,不错哦。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 8,199
精华内容 3,279
关键字:

产品360度旋转展示