手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >jQuery实现360°全景拖动展示
jQuery实现360°全景拖动展示
摘要:CSS复制代码代码如下:html,body{background:#333;}#loading{left:0;top:0;width:100...

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"><img /></div>

<div id="loading"><span></span></div>

js

复制代码 代码如下:

<script src="scripts/jquery.js"></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);

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

【jQuery实现360°全景拖动展示】相关文章:

javascript实现炫酷的拖动分页

jQuery实现首页图片淡入淡出效果的方法

jQuery插件jRumble实现网页元素抖动

JavaScript实现鼠标拖动效果的方法

jQuery实现弹出窗口中切换登录与注册表单

jQuery实现div随意拖动的实例代码(通用代码)

javascript实现可拖动变色并关闭层窗口实例

jQuery实现表格行上下移动和置顶效果

jQuery实现html表格动态添加新行的方法

jquery实现用户打分评分特效

精品推荐
分类导航