JS实现全景图效果360度旋转

var scrl,direction="right";
var x,xold,xdiff, i=1;

function change(start){
if(direction == "right"){
if(div1.scrollTop+190 0){
div1.scrollTop -= 190;
}
else{
div1.scrollTop = div1.scrollHeight;
}
}
if(start) scrl = setTimeout("change(1)",100);
else clearTimeout(scrl);
}

function getpos(){
x = event.clientX;
xdiff = x - xold;
xold = x;
if(xdiff>0) direction = "right";
if(xdiff

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

赞 (0)

相关推荐

  • 基于jQuery Circlr插件实现产品图片360度旋转

    基于jQuery Circlr插件实现产品图片360度旋转

    Circlr是一款可以对产品图片进行360度全方位旋转展示的jQuery插件.Circlr通过按一定角度规律拍摄的产品图片,制作出可以使用鼠标拖动.鼠标滚轮和移动触摸来进行图片逐帧旋转的效果.比先前的Rollerblade,动画顺畅了许多,也更易于控制,该插件非常适合于商品的展示. 它的特点有: 支持水平或垂直方向旋转. 支持移动触摸事件. 支持滚动事件. 图片预加载处理. 可以反向和循环旋转图片. jQ酷实例教程:jQuery产品图片360度旋转Circlr 引入核心文件 <script sr

  • javascript如何实现360度全景照片问题汇总

    本文为大家分享了做360度的全景照片的详细步骤,其中要注意以下几个问题: 1.如何在拖图片时,使其加载变快?---注意让图片隐藏的性能比让图片切换的性能高,且在IE9下运行,会出现图片加载的问题 2.如何使图片带有一定的速度转 3.考虑如果x为负数和负数两种情况 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xht

  • js实现按钮控制图片360度翻转特效的方法

    本文实例讲述了js实现按钮控制图片360度翻转特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js实现按钮控制图片360度翻转特效</title> <body> <script language="javascript"> var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var o

  • 利用C#代码实现图片旋转360度

    using System; using System.Collections.Generic; using System.Drawing; using System.IO; using System.Linq; using System.Text; namespace 图片旋转程序 { public class ImageHelper { /// <summary> /// 以逆时针为方向对图像进行旋转 /// </summary> /// <param name="

  • Android开发VR实战之播放360度全景视频

    Android开发VR实战之播放360度全景视频

    VR即Virtual Reality虚拟现实.虚拟现实技术是一种可以创建和体验虚拟世界的计算机仿真系统它利用计算机生成一种模拟环境是一种多源信息融合的交互式的三维动态视景和实体行为的系统仿真使用户沉浸到该环境中. 那么,如何在Android中去开发VR功能的APP呢?我们利用谷歌提供的开源SDK去实现一个360°全景视频的功能 一.在build.gradle中引入谷歌VR的SDK依赖 compile 'com.google.vr:sdk-videowidget:1.10.0' 二.注意支持的最小

  • jQuery实现的产品自动360度旋转展示特效源码分享

    jQuery实现的产品自动360度旋转展示特效源码分享

    这是一款基于jQuery实现的产品自动360度旋转展示特效代码,可以对产品进行360度旋转展示,更好的让顾客了解产品的全部外观细节. jQuery产品360度旋转展示代码,支持预加载,能够快速全面的的预览产品的图片,主要原理是利用多张图片按顺序播放实现,本段代码兼容目前最新的各类主流浏览器,是一款非常优秀的特效源码. 运行效果图:---------------------------------效果查看 源码下载----------------------------------- 为大家分享的

  • 基于Three.js插件制作360度全景图

    这是个基于three.js的插件,预览地址:戳这里 使用方法: 1.这个插件的用法很简单,引入如下2个js <script src="js/three.min.js"></script> <script src="js/photo-sphere-viewer.min.js"></script> 2.初始化一下,(具体各种参数配置根据情况而定) var PSV = new PhotoSphereViewer({ // 全

  • javascript制作幻灯片（360度全景图片）

    javascript制作幻灯片（360度全景图片）

    在给客户做产品演示时经常会用到幻灯片,拥有360度的全景图片效果给用户带来好的体验价值.在这里给大家介绍一款来自Robert Pataki的360全景幻灯实现教程,此款教程使用js来实现一个超酷的全景幻灯,具体内容如下: 在这个教程中没有使用到任何插件,我们将使用HTML,css和javascript来实现,当然,也使用是jQuery这个框架! 如何实现? 我们将使用预先按照360生成的图片进行轮播来实现动画展示效果.包含了180个图片.所以加载时间可能比较长. 代码实现 我们将在css代码中添

  • JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码

    JavaScript控制图片360度旋转代码 var isIE = (document.uniqueID)?1:0; var i=1; function rotate(image) { var object = image.parentNode; if(isIE){ image.style.filter="progid:dXImagetransform.Microsoft.basicImage(rotation="+i+")"; i++; if(i>4) {i

  • JS实现全景图效果360度旋转

    JS实现全景图效果360度旋转

    var scrl,direction="right"; var x,xold,xdiff, i=1; function change(start){ if(direction == "right"){ if(div1.scrollTop+190 0){ div1.scrollTop -= 190; } else{ div1.scrollTop = div1.scrollHeight; } } if(start) scrl = setTimeout("cha

  • 13 款最热门的 jQuery 图像 360 度旋转插件推荐

    13 款最热门的 jQuery 图像 360 度旋转插件推荐

    在 web 页面上使用 jQuery 图像 360 度旋转插件是最美也是最方便的显示图像的方式.这些超级棒的 360° 图像选择插件允许用户更详细的分析产品或者文章.jQuery 图像旋转插件可以让用户从各种角度进行 360 度的图像展示,经常在电子商务网站上使用,帮助消费者更好的了解产品,从任意的一个角度观察欣赏. 在这篇文章中,我们收集了 13 款最佳的 jQuery 图像 360 度旋转插件,这些插件都能进行 360 度图像旋转展示.希望大家能从中找到自己喜欢的,并应用在自己的网站上. 1

  • js实现图片360度旋转

    js实现图片360度旋转

    大致介绍 这次是一个简单的效果,就是思路的问题 效果: 思路 旋转的效果就是根据鼠标的的移动距离来显示不同的图片,形成视觉差,仿佛就是在正真的旋转 由于效果是根据鼠标的移动距离来操作的,即移动的像素值.如果按照默认的情况,移动鼠标的时候图片就旋转的太快了,所以我们要给鼠标移动的距离处以15,降低图片的旋转速度. var l = parseInt(-x/15); 有一个问题是在鼠标向左移动的时候,移动的距离是负的.要想正确的显示图片,就要对负值进行处理.例如-1,图片要显示最后一张即72张(图片一

  • iOS优雅的将CALayer旋转360度示例代码

    什么是CALayer * 在iOS系统中,你能看得见摸得着的东西基本上都是UIView,比如一个按钮.一个文本标签.一个文本输入框.一个图标等等,这些都是UIView. * 其实UIView之所以能显示在屏幕上,完全是因为它内部的一个层. * 在创建UIView对象时,UIView内部会自动创建一个层(即CALayer对象),通过UIView的layer属性可以访问这个层.当UIView需要显示到屏幕上时,会调用 drawRect:方法进行绘图,并且会将所有内容绘制在自己的层上,绘图完毕后,系统

  • 基于Three.js实现360度全景图片

    基于Three.js实现360度全景图片

    Three.js 是一款运行在浏览器中的3D引擎, 处理三维效果.在一些相机的官网首页中,经常有一张图在旋转,图上面悬浮着文字.这种效果是如何做出来的呢?先看效果,再讲解. 1).建立一个java web 工程(或者其他工程), 因为three.js 的全景图要通过服务端浏览(安全的考虑) 2).在上面的结构中,只有css中的index.css是自定义的,其余css和js都属于three.js自带的工具文件.包含图片在内,已经上传资源了,点击此处下载. 3).index.jsp <%@ page

随机推荐