360°全景拖动展示例子_JQuery360度全景展示Demo
2014-09-07 15:10:03  By: shinyuu

今天做了一个小Demo、通过推动鼠标全方位展示图片、非常棒、可以通过此功能来实现地图的滚动等

实现方法呢就是通过拍摄很多张图片来动态加载实现的、下载是html的代码 

<body>
<div id="demo" class="px hide"><img /></div>
<div id="loading" class="px"><span class="pa"></span></div>
<a href="http://dwtedx.com" target="_blank" id="back-home" 
	class="px back">dwtedx个人博客</a>
<a href="http://dwtedx.com" target="_blank" id="back-article" 
	class="px back">返回</a>
<a href="http://dwtedx.com/itshare_203.html" target="_blank" 
	id="back-download" class="px back">下载</a>
</body>
大家可以看到上面就放了两个 DIV，A标签可以忽略、那么下载就贴出来最重要的JS代码 

$(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);
	});
好了、通过以上代码就可以实现360度展现图片了、但是前提是你得准备很多张图片来切换

最后还是给大家贴出源代码链接: http://dwtedx.com/download.html?bdkey=s/1bnfDXeB 密码: aqlt

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛

点赞 (2) 打赏

猜你喜欢的

快速评论

Email必须输入

表情

评论

技术评论
DD记账
top
+