jQuery实现360°全景拖动展示


Posted in Javascript onMarch 18, 2015

CSS

html,body{background:#333;}

 #loading{left:0;top:0;width:100%;height:100%;background:#333;color:#fff;}

 #loading span{left:45%;top:40%;font:normal 50px Arial;color:#fff;}

 #demo{left:50%;top:50%;margin-left:-512px;margin-top:-384px;width:1024px;height:768px;}

 #demo img{border-radius:8px;border:5px solid #555;}

 .back{font-size:18px;line-height:130%;padding:8px 20px;color:#fff;}

 #back-home{left:0px;top:0px;background:#35916D;}

 #back-article{right:0px;top:0px;background:#444;}

 #back-download{right:0px;bottom:0px;background:#CE565D;}

HTML

<div id="demo" class="px hide"><img /></div>

<div id="loading" class="px"><span class="pa"></span></div>

js

<script src="scripts/jquery.js?1.11.1"></script>

<script src="scripts/jquery.drag360.js"></script>

<script>

$(function(){

    $(document.body).attr({

      'onSelectStart' :'return false;',

      'oncontextmenu':'return false;',

      'onbeforecopy':'return false;',

      'oncopy':'return false;',

      'ondragstart':'return false;',

      'style':'-moz-user-select:none; -khtml-user-select: none; user-select: none;'

    });

 var Preload=function(images,callback){

  var done=0,val=0;

  var count=images.length; 

  var preload=function(url) {

   var image = $("<img />").attr("src", url).on("load",function () {

    complete();

   });

   };

  var complete=function() {

   done++;

   val=done/count*100;

   $('#loading span').text(Math.ceil(val) + "%");

   if(done==count){

    callback();

   }

  };

  for(var i=0;i<images.length;i++){

   preload(images[i]);

  }

 };

 var images=[

   'drag/shiwai ceshi0006.jpg',

   'drag/shiwai ceshi0012.jpg',

   'drag/shiwai ceshi0018.jpg',

   'drag/shiwai ceshi0024.jpg',

   'drag/shiwai ceshi0030.jpg',

   'drag/shiwai ceshi0036.jpg',

   'drag/shiwai ceshi0042.jpg',

   'drag/shiwai ceshi0048.jpg',

   'drag/shiwai ceshi0054.jpg',

   'drag/shiwai ceshi0060.jpg',

   'drag/shiwai ceshi0066.jpg',

   'drag/shiwai ceshi0072.jpg',

   'drag/shiwai ceshi0078.jpg',

   'drag/shiwai ceshi0084.jpg',

   'drag/shiwai ceshi0090.jpg',

   'drag/shiwai ceshi0096.jpg',

   'drag/shiwai ceshi0102.jpg',

   'drag/shiwai ceshi0108.jpg',

   'drag/shiwai ceshi0114.jpg',

   'drag/shiwai ceshi0120.jpg',

   'drag/shiwai ceshi0126.jpg',

   'drag/shiwai ceshi0132.jpg',

   'drag/shiwai ceshi0138.jpg',

   'drag/shiwai ceshi0144.jpg',

   'drag/shiwai ceshi0150.jpg',

   'drag/shiwai ceshi0156.jpg',

   'drag/shiwai ceshi0162.jpg',

   'drag/shiwai ceshi0168.jpg',

   'drag/shiwai ceshi0174.jpg',

   'drag/shiwai ceshi0180.jpg',

   'drag/shiwai ceshi0186.jpg',

   'drag/shiwai ceshi0192.jpg',

   'drag/shiwai ceshi0198.jpg',

   'drag/shiwai ceshi0204.jpg',

   'drag/shiwai ceshi0210.jpg',

   'drag/shiwai ceshi0216.jpg',

   'drag/shiwai ceshi0222.jpg',

   'drag/shiwai ceshi0228.jpg',

   'drag/shiwai ceshi0234.jpg',

   'drag/shiwai ceshi0240.jpg',

   'drag/shiwai ceshi0246.jpg',

   'drag/shiwai ceshi0252.jpg',

   'drag/shiwai ceshi0258.jpg',

   'drag/shiwai ceshi0264.jpg',

   'drag/shiwai ceshi0270.jpg',

   'drag/shiwai ceshi0276.jpg',

   'drag/shiwai ceshi0282.jpg',

   'drag/shiwai ceshi0288.jpg',

   'drag/shiwai ceshi0294.jpg',

   'drag/shiwai ceshi0300.jpg',

   'drag/shiwai ceshi0306.jpg',

   'drag/shiwai ceshi0312.jpg',

   'drag/shiwai ceshi0318.jpg',

   'drag/shiwai ceshi0324.jpg',

   'drag/shiwai ceshi0330.jpg',

   'drag/shiwai ceshi0336.jpg',

   'drag/shiwai ceshi0342.jpg',

   'drag/shiwai ceshi0348.jpg',

   'drag/shiwai ceshi0354.jpg',

   'drag/shiwai ceshi0360.jpg',

 ];

 Preload(images,function(){

  $("#loading").fadeOut();

  $("#demo img").attr("src",images[0]);

  $("#demo").fadeIn();

  $("#demo img").drag360(images);

 });
});

</script>

drag.js

(function($){

    $.fn.drag360=function(images){

        var mdx,mmx,isDrag=false,unitStep=40,current=0;

        var that=$(this);

        var length=images.length;

        //触摸  

        that.on('touchstart',function(e){

            var touch = e.originalEvent;

                mdx = touch.changedTouches[0].pageX;

                isDrag=true;

        }).on('touchmove',function(e){

            e.preventDefault();

            touch = e.originalEvent.touches[0]||e.originalEvent.changedTouches[0];

            mmx=touch.pageX;

            if(isDrag){

                if(Math.abs(mmx-mdx)>unitStep){

                    if(mmx-mdx>0){

                        current=current+1; 

                    }else{

                        current=current-1;

                    }

                    mdx=mmx;

                    if(current<0)current=length-1;

                    if(current>length-1)current=0;

                    that.attr("src",images[current]);

                }

            }

        }).on('touchend',function(e){

            isDrag=false;

        });

        //拖动

        that.on('mousedown',function(e){

            mdx=e.pageX;

            isDrag=true;

        }).on('mousemove',function(e){

            mmx=e.pageX;

            if(isDrag){

                if(Math.abs(mmx-mdx)>unitStep){

                    current=current+(mmx-mdx>0?1:-1);

                    mdx=mmx;

                    if(current<0)current=length-1;

                    if(current>length-1)current=0;

                    that.attr("src",images[current]);

                }

            }

            return false;

        })

        $(document).on('mouseup',function(e){

            isDrag=false;

        });

        $(document).on('mouseleave',function(e){

            isDrag=false;

        });

        return this;

    };

})(jQuery);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 Javascript
JavaScript 弹出窗体点击按钮返回选择数据的实现
Apr 01 Javascript
巧用jquery解决下拉菜单被Div遮挡的相关问题
Feb 13 Javascript
js计算德州扑克牌面值的方法
Mar 04 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
Kindeditor在线文本编辑器如何过滤HTML
Apr 14 Javascript
JS模拟实现方法重载示例
Aug 03 Javascript
全站最详细的Vuex教程
Apr 13 Javascript
Vue 路由切换时页面内容没有重新加载的解决方法
Sep 01 Javascript
Vue和React组件之间的传值方式详解
Jan 31 Javascript
JS实现的Object数组去重功能示例【数组成员为Object对象】
Feb 01 Javascript
自定义百度分享的分享按钮
Mar 18 #Javascript
javascript实现密码强度显示
Mar 18 #Javascript
JavaScript通过元素索引号删除数组中对应元素的方法
Mar 18 #Javascript
JavaScript从数组中删除指定值元素的方法
Mar 18 #Javascript
JavaScript通过字符串调用函数的实现方法
Mar 18 #Javascript
JS制作简单的三级联动
Mar 18 #Javascript
javascript实现ecshop搜索框键盘上下键切换控制
Mar 18 #Javascript
You might like
无线电广播与收音机发展的历史回眸
2021/03/02 无线电
php 方便水印和缩略图的图形类
2009/05/21 PHP
php操作redis中的hash和zset类型数据的方法和代码例子
2014/07/05 PHP
Docker配置PHP开发环境教程
2016/12/21 PHP
cakephp2.X多表联合查询join及使用分页查询的方法
2017/02/23 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
根据分辨率不同,调用不同的css文件
2006/08/25 Javascript
json2.js的初步学习与了解
2011/10/06 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
JavaScript控制Session操作方法
2013/01/17 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
jQuery基于ajax实现带动画效果无刷新柱状图投票代码
2015/08/10 Javascript
Bootstrap每天必学之媒体对象
2015/11/30 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
js删除数组中某几项的方法总结
2019/01/16 Javascript
在微信小程序中使用vant的方法
2019/06/07 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[00:11]战神迅矛
2019/03/06 DOTA
Python简单实现TCP包发送十六进制数据的方法
2016/04/16 Python
解决安装pycharm后不能执行python脚本的问题
2019/01/19 Python
Python中文编码知识点
2019/02/18 Python
如何使用python3获取当前路径及os.path.dirname的使用
2019/12/13 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python数据分析库pandas高级接口dt的使用详解
2020/12/11 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
加拿大户外探险购物网站:SAIL
2020/06/27 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
竟聘演讲稿范文
2013/12/31 职场文书
公司离职证明范本
2014/01/13 职场文书
小小商店教学反思
2014/04/27 职场文书
2014学校领导四风对照检查材料思想汇报
2014/09/23 职场文书
pytorch 运行一段时间后出现GPU OOM的问题
2021/06/02 Python
一定要知道的 25 个 Vue 技巧
2021/11/02 Vue.js
总结三种用 Python 作为小程序后端的方式
2022/05/02 Python