精华内容
下载资源
问答
  • jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现。
  • 产品360度旋转展示

    2011-07-14 10:56:50
    flash 产品360度旋转展示,可拖动。自动旋转
  • 非常好用,加载多张图片,产品360度旋转展示,非常好用,加载多张图片
  • 体验效果: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

    展开全文
  • jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码。 运行效果图:——————...
  • 这是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,jQuery图片360度3D旋转展示代码。
  • 这是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,jQuery图片360度3D旋转展示代码。
  • 这是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,jQuery图片360度3D旋转展示代码。 js代码 [removed][removed] [removed][removed] [removed][removed] [removed] var ...
  • 这是一款360度图片旋转产品预览展示js插件。该360度图片旋转产品预览js插件提供多种控制产品图片旋转的方法,包括自动旋转,通过按钮来控制旋转,通过鼠标拖拽或鼠标移动来控制旋转,通过鼠标滚轮来控制旋转等。
  • 3dEye是一款非常实用的360度产品3D旋转展示特效jQuery插件。通过使用这个插件你可以向用户全方位展示你的商品。用户可以通过鼠标来旋转商品图片,从不同的角度观察商品,对于用户来说是非常好的体验。
  • jquery360度旋转插件自动选择鼠标拖动旋转产品展示 带有5种360度全方位展示产品特效,窗体加载自动旋转播放,鼠标拖动播放等。 演示地址:http://www.xwcms.net/js/tpdm/98286.html
    jquery360度旋转插件自动选择鼠标拖动旋转产品展示

    带有5种360度全方位展示产品特效,窗体加载自动旋转播放,鼠标拖动播放等。

    演示地址:http://www.xwcms.net/js/tpdm/98286.html


    展开全文
  • Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件,本文给大家分享一款基于jQuery Circlr插件实现产品图片360度旋转,大家一起来看看吧
  • 这是一款非常实用的可以对产品图片进行360度全方位旋转展示的jQuery插件。该插件通过使用不同角度的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。该插件非常适合于商品的展示。
  • jQuery产品图片360度展示代码基于Bootstrap.3.2.0和jquery.1.11.1.min.js制作,可以对产品图片进行360度全方位旋转展示
  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐 时间:02月07日  在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式。这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者...

    13 款最热门的 jQuery 图像 360 度旋转插件推荐
    时间:02月07日
     在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式。这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章。jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏。

    在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示。希望大家能从中找到自己喜欢的,并应用在自己的网站上。

    1. Reel

    Reel 是个已完成的项目,是个功能非常齐全的 jQuery 图像 360 度旋转插件。它利用新的技术使普通的图像标记变成一个全方位 360 度交互的对象电影,全景或者定格动画。

    2. SpriteSpin

    Spritespin 是个 jQuery 插件,允许在网页上显示 sprite 动画。只需要用户提供一组图像,或者一系列无缝的 sprite 列表,就可以逐帧显示这些图像,然后生成动画。在线演示

    3. The 360 Degree JavaScript Viewer

    The 360 degree Javascript viewer 是个 jQuery 插件,用来展示一个漂亮的 360 度图像旋转效果。在线演示

    4. jQuery Panorama Viewer

    jQuery Panorama Viewer 能帮助用户嵌入全景图片到用户的网站上。需要达到这个效果,第一,用户需要包括最新的 jQuery 库,包括 jquery.panorama_viewer.js 和 panorama_viewer.css,然后把图片加入到 HTML 的“panorama”类中。支持的现代主流的浏览器:Chrome, Firefox 和 Safari (桌面和移动端)。在线演示

    5. jQuery Threesixty

    jQuery Threesixty 是个很小的插件,用来构建类似 flash 的全景图像,或者是很自然的图像的 360 ° 视图展示。在线演示

    6. Ajax Zoom

    AJAX-ZOOM 是个独特的“Flash” 免费工具来进行 360 度产品照片。用户可以 360 度旋转图像,同时可以显示 3D 效果,进行深度缩放。这个插件采用图像块技术(图像堆积)来制作高分辨率的图像。

    7. jQuery Image Cube

    jQuery Image Cube 是个 jQuery 插件,可以在图像中分开旋转,达到 360 ° 旋转的效果。

    8. Flip

    Flip 是个 jQuery 插件,允许从四个方向翻转图像。

    9. Super Tiny jQuery 360 Degree Product Viewer

    Super Tiny jQuery 360 Degree Product Viewer 是个超轻量级的(只有 27 行 javaScript 代码,约为 1 kb)。这是个非常容易使用的 jQuery 插件,允许用户通过移动鼠标来从 360 度来展示图像。

    10. 3dEye.js

    3dEye.js 是个轻量级的,快速的 jQuery 插件,允许用户通过图像来创建对象的 3D 视图。它对移动端设备和触摸设备都非常友好,支持各种主流的浏览器。使用这个插件,用户可以使用鼠标在网站上进行 360 度展示图像。

    11. Dopeless Rotate

    Dopeless Rotate 是款 jQuery 插件,用来进行图像的 360 度旋转展示,它包括缩放功能,支持触摸设备,允许在同一个页面使用多个插件。

    12. 360 Degree Image Slide

    360 Degree Image slider 是使用 JS ,CSS 和预渲染图像序列创建的,允许用户使用简单的鼠标或者触摸事件来拖拽和围绕 y 轴来旋转 3D 对象。

    13. 360 Slider

    ThreeSixty Image Slider Plugin 是 jQuery 360 度图像旋转插件。这个插件可以使用数字选项来进行自定义,可以显示图像任意方位的 360 旋转效果。

    以上就是这13款jQuery图像旋转插件的简单介绍了,小伙伴根据自己的项目需求,自由选择吧,点击图片可以进入到官方网站,有详细的介绍说明以及使用方法,这里就不多废话了。

    展开全文
  •  在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示。希望大家能从中找到自己喜欢的,并应用在自己的网站上。  1. Reel  Reel 是个已完成的项目,是个...
  • 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度旋转图片小特效

    2016-07-25 11:35:00
    现在,在这个网络发达的时代,一些电子商务公司,需要将自己线上的产品给买家或用户看,为了能让用户了解的更全面,那么把一个物件的产品展示到方方面面,就要运用到360度旋转图片特效,因为上次有朋友叫我帮她弄...
  • 这是一款基于jQuery实现酷炫的360度全景产品展示特效源码,运行该源码可首先显示带有百分比的loading效果,进而显示360度图片全景展示效果。鼠标拖动图片可使图片旋转展示,带有非常逼真的3D立体展示效果。是一款...
  • 在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式。这些超级棒的 360&deg; 图像选择插件允许用户更详细的分析产品或者文章。jQuery 图像旋转插件可以让用户从各种角度进行 360 度...
  • 本代码基于jquery的3D产品展示插件,使用...可通过鼠标控制左旋转和右旋转展示,只要给代码提供好拍摄好的全景图片复制实例代码既可看实现。美中不足的是目前在搜狗浏览器兼容性不好,希望大家改进后能够发给我个版本。
  • 而且一般的排版方式都是图片从上往下排来展示产品的各个角度的图片或者使用轮播图(参照淘宝京东等),因为这个是最简单的能使用户仔细了解产品的外观的方法,所以目前几乎所有的电商都会加入这个环节。当然我们...
  • 360°产品展示

    2017-05-11 04:07:49
    Circlr是一款可以对产品图片进行360度全方位旋转展示的插件。Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动、鼠标滚轮和移动触摸来进行图片逐帧旋转的效果。比先前的Rollerblade,动画顺畅了许多...
  • Flex例子:360度显示产品

    千次阅读 2008-07-01 11:43:00
    一个可以360旋转展示产品的flex例子,虽然是英文的,但是,有demo又有source,已经足够了。原文地址:http://ntt.cc/2008/06/01/how-to-show-your-products-in-360-degree-view-in-flex.html

空空如也

空空如也

1 2 3
收藏数 42
精华内容 16
关键字:

产品360度旋转展示