经验分享程序开发文档资料数据资源其它资源

星球旋转插件jquery.planetarium.js代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 星球旋转插件jquery.planetarium.js代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

星球旋转插件jquery.planetarium.js代码

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="gb2312">
<title>星球旋转插件jquery.planetarium.js</title>
<link href='planetarium.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.planetarium.js"></script>
<script>
  $(document).ready(function(){
   $(".planet").planetarium({
	  space: "html, body"
	});
	});
	
</script>
</head>
<body>
<div class="wrapper">	
	<div class="main">
		<div data-ptr-size="200x200" data-ptr-pattern="texture-saturn.jpg" data-ptr-ring="true" class="saturn planet"></div>
		<div data-ptr-autospin="5000ms" data-ptr-angle="20deg" data-ptr-glow="0 0 50px rgba(0,252,255,0.35), inset 33px 20px 50px rgba(0,0,0,0.5)" data-ptr-size="300x300" data-ptr-pattern="texture-earth.jpg" class="earth planet"></div>
		<div data-ptr-autospin="600ms" data-ptr-angle="40deg" data-ptr-glow="0 0 50px rgba(236,206,20,0.35), inset 33px 20px 50px rgba(0,0,0,0.5)" data-ptr-size="150x150" data-ptr-pattern="texture-jupiter.jpg" class="jupiter planet"></div>
	</div>
</div>
</body>
</html>

JS代码(jquery.planetarium.min.js):

!function(e){
	function n(e){
	var t=e.changedTouches,n=t[0],r="";
	switch(e.type){
	case"touchstart":r="mousedown";
	break;
	case"touchmove":r="mousemove";
	break;
	case"touchend":r="mouseup";
	break;
	default:return}
var i=document.createEvent("MouseEvent");
	var s=2;
	if(navigator.userAgent.match(/Android/i)){
	s=10}
i.initMouseEvent(r,true,true,window,1,n.screenX,n.screenY,n.clientX*s,n.clientY*s,false,false,false,false,0,null);
	n.target.dispatchEvent(i)}
var t={
	autospin:"1000ms",angle:"20deg",glow:"rgba(255,255,255,0.34902) 0px 0px 50px,inset 33px 20px 50px rgba(0,0,0,0.5)",pattern:"img/texture-earth.jpg",size:"100x100","float":true,space:"body",ring:false,ringColor:"#fff",ringAngle:"20deg"}
;
	e.fn.planetarium=function(r){
	var i=e.extend({
}
,t,r),s=e(this);
	document.addEventListener("touchstart",n,true);
	document.addEventListener("touchmove",n,true);
	document.addEventListener("touchend",n,true);
	document.addEventListener("touchcancel",n,true);
	s.each(function(t,n){
	function w(t){
	var n={
	x:false,y:false}
,r={
	x:y.x-(g.x-t.clientX),y:y.y-(g.y-t.clientY)}
;
	n.x=true;
	if(b&&n.x){
	y.x=r.x;
	y.y=0}
e(this).find(".ptr-planet").css("background-position",y.x+"px "+y.y+"px");
	g.x=t.clientX;
	g.y=t.clientY;
	t.stopPropagation();
	return false}
function E(t){
	b=false;
	v.unbind("mousemove",w);
	if(t.type=="mousedown"){
	v.parent().addClass("ptr-interacting");
	g.x=t.clientX;
	g.y=t.clientY;
	b=true;
	v.parent().bind("mousemove",w)}
else{
	v.parent().removeClass("ptr-interacting");
	e(document.body).focus()}
t.stopPropagation();
	return false}
function S(){
	y={
	x:0,y:0}
;
	e(this).css("backgroundPosition","0 0")}
var r=e(this);
	var s=r.data("ptr-autospin")||i.autospin,o=r.data("ptr-angle")||i.angle,u=r.data("ptr-glow")||i.glow,a=r.data("ptr-pattern")||i.pattern,f=r.data("ptr-size")||i.size,l=r.data("ptr-float")||i.float,c=r.data("ptr-ring")||i.ring,h=r.data("ptr-ringcolor")||i.ringColor,p=r.data("ptr-ringangle")||i.ringAngle,d=f.split("x");
	e(i.space).addClass("ptr-space");
	r.addClass("ptr-shape");
	r.wrapInner("<div class='ptr-planet'></div>");
	if(c==true){
	r.append("<div class='ptr-ring'></div>");
	r.find(".ptr-ring").css({
	background:h,height:"2px",width:d[0]*1.5,transform:"rotate("+p+")","-moz-transform":"rotate("+p+")","-webkit-transform":"rotate("+p+")","margin-left":d[0]*1.5/2*-1,"margin-top":-1.5}
)}
if(l==true)r.find(".ptr-planet").addClass("ptr-float");
	r.find(".ptr-planet").css({
	width:d[0],height:d[1],"box-shadow":u,background:"url("+a+") repeat","background-size":"cover","-moz-background-size":"cover","-webkit-background-size":"cover",transform:"rotate("+o+")","-moz-transform":"rotate("+o+")","-webkit-transform":"rotate("+o+")"}
);
	if(s!=false){
	r.find(".ptr-planet").css({
	animation:"rotate "+s+" infinite linear","-webkit-animation":"rotate "+s+" infinite linear","-moz-animation":"rotate "+s+" infinite linear"}
)}
var v=r.find(".ptr-planet"),m={
	w:parseInt(v.parent().width()),h:parseInt(v.parent().height())}
,g={
	x:0,y:0}
,y={
	x:0,y:0}
,b=false;
	v.parent().bind("mousedown mouseup mouseleave",E);
	v.parent().bind("dblclick",S)}
)}
}
(window.jQuery)

CSS代码(planetarium.css):

html{height:100%;}
body{padding:0;text-align:center;font-family:'open sans';position:relative;margin:0;height:100%;}
.ptr-space{background:url(stardust.jpg) repeat;}
.wrapper{height:auto !important;height:100%;margin:0 auto;overflow:hidden;}
a{text-decoration:none;}
h1,h2{width:100%;float:left;}
h1{margin-top:100px;color:#fff;margin-bottom:5px;font-size:70px;font-weight:100;}
h2{padding:00px 20px 30px 20px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;letter-spacing:0px;color:#ccc;font-size:20px;line-height:160%;font-weight:100;margin-top:10px;margin-bottom:0;}
.pointer{color:#00B0FF;font-family:'Pacifico';font-size:24px;margin-top:15px;position:absolute;top:130px;right:-40px;}
.pointer2{color:#00B0FF;font-family:'Pacifico';font-size:24px;margin-top:15px;position:absolute;top:130px;left:-40px;}
pre{margin:80px auto;}
pre code{padding:35px;border-radius:5px;font-size:15px;background:rgba(0,0,0,0.1);border:rgba(0,0,0,0.05) 5px solid;max-width:500px;}
.main{float:left;width:100%;margin:0 auto;}
.main h1{padding:20px 50px 10px;float:left;width:100%;font-size:60px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;font-weight:100;margin:0;padding-top:55px;font-family:'Open Sans';letter-spacing:-1px;text-transform:capitalize;}
.main h1.demo1{background:#1ABC9C;}
.reload.bell{font-size:12px;padding:20px;width:45px;text-align:center;height:47px;border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px;}
.reload.bell #notification{font-size:25px;line-height:140%;}
.reload,.btn{display:inline-block;border-radius:3px;-moz-border-radius:3px;-webkit-border-radius:3px;display:inline-block;line-height:100%;padding:0.7em;text-decoration:none;width:100px;line-height:140%;font-size:17px;font-family:Open Sans;font-weight:bold;-webkit-box-shadow:none;box-shadow:none;background-color:#4D90FE;background-image:-webkit-linear-gradient(top,#4D90FE,#4787ED);background-image:-webkit-moz-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4d90fe,#4787ed);border:1px solid #3079ED;color:#FFF;}
.reload:hover{background:#317af2;}
.btn{width:200px;-webkit-box-shadow:none;box-shadow:none;background-color:#4D90FE;background-image:-webkit-linear-gradient(top,#4D90FE,#4787ED);background-image:-moz-linear-gradient(top,#4D90FE,#4787ED);background-image:linear-gradient(top,#4d90fe,#4787ed);border:1px solid #3079ED;color:#FFF;}
.clear{width:auto;}
.btn:hover,.btn:hover{background:#317af2;}
.btns{float:left;width:100%;margin:50px auto;}
.credit{text-align:center;color:#ccc;padding:10px 10px;margin:0 0 0 0;background:rgba(0,0,0,0.5);float:left;width:100%;}
.credit a{text-decoration:none;font-weight:bold;color:white;}
.back{position:absolute;top:0;left:0;text-align:center;display:block;padding:7px;width:100%;box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;background:rgba(0,0,0,0.5);font-weight:bold;font-size:13px;color:#bbb;-webkit-transition:all 200ms ease-out;-moz-transition:all 200ms ease-out;-o-transition:all 200ms ease-out;transition:all 200ms ease-out;}
.back:hover{background:#eee;}
.page-container{float:left;width:100%;margin:0 auto 300px;position:relative;}
.header{overflow:hidden;clear:both;}
.ptr-shape{padding:50px;display:inline-block;}
.ptr-planet{border-radius:500px;-webkit-border-radius:500px;-moz-border-radius:500px;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;transform-origin:50% 50%;}
.ptr-interacting .ptr-planet{-webkit-animation:none !important;-moz-animation:none !important;animation:none !important;}
.ptr-space{background:url(img/stardust.jpg) repeat;}
.ptr-shape{-webkit-animation:float 3s infinite ease-in-out;-moz-animation:float 3s infinite ease-in-out;animation:float 3s infinite ease-in-out;}
.ptr-ring{left:50%;top:50%;position:absolute;}
@-webkit-keyframes float{from{-webkit-transform:translate(0,0px);}
65%{-webkit-transform:translate(0,15px);}
to{-webkit-transform:translate(0,-0px);}
}
@-moz-keyframes float{from{-moz-transform:translate(0,0px);}
65%{-moz-transform:translate(0,15px);}
to{-moz-transform:translate(0,-0px);}
}
@keyframes float{from{transform:translate(0,0px);}
65%{transform:translate(0,15px);}
to{transform:translate(0,-0px);}
}
@keyframes rotate{from{background-position:0;}
to{background-position:200%;}
}
@-webkit-keyframes rotate{from{background-position:0;}
to{background-position:200%;}
}
@-moz-keyframes rotate{from{background-position:0;}
to{background-position:200%;}
}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
987.63 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
987.63 KB
立即下载
武霭亚
了解
打赏作者 鼓励作者
Html 动画效果3
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章