jQuery转动的星球

所属分类:其他-动画效果

 38692  323  查看评论 (3)
分享到微信朋友圈
X
jQuery转动的星球 ie兼容10

PLANETARIUM这个插件将使你能够创建一个互动的星球

使用方法

你将有包括最新的jQuery库、jquery.planetarium.js和planetarium.css插入您的文档的<head>位置。


让我们开始这个HTML标记创建行星

<body>
  ..
  <div class="earth planet"></div>
  ..
</body>


下面你需要做的就是调用天文馆函数如下所示

$(".planet").planetarium({
   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"                                   
 });


HTML Markups

使用选项的问题上面所有的行星将会是一样的。指定你的每一个行星的风格,你可以使用我提供的HTML标记:


data-ptr-autospin

单独分配一个星球上有自己的autospin选择:

< div class = "earth plane”data-ptr-autospin = " 4000 ms " > < / div >

data-ptr-angle

单独分配一个星球上有自己的角度选择:

<div class="earth planet" data-ptr-angle="60deg"></div>

data-ptr-glow

单独分配一个星球上有自己的光亮和阴影选项:

<div class="earth planet" data-ptr-glow="0 0 50px #fff"></div>

data-ptr-size

Individually assign a planet with its own width and height options:

< div class = "earth plane”data-ptr-size = " 500 x500 " > < / div >

data-ptr-float

单独分配一个星球上有自己的浮动选择选项:

< div class = "earth plane”data-ptr-float = "false" > < / div >

data-ptr-ring

单独分配一个星球上有自己的戒指选择:

< div class = "earth plane”data-ptr-ring = " true " > < / div >

data-ptr-ringcolor

单独分配一个星球上有自己的戒指的颜色选择:

<div class="earth planet" data-ptr-ringcolor="#fff"></div>

data-ptr-ringangle

Individually assign a planet with its own ring's angle option:

< div class = "earth plane”data-ptr-ringangle = " 30deg" > < / div >

现在您将创建一个微型太阳能系统在你面前,不需要科学。:)


相关插件-动画效果

jQuery点赞+1动画效果

一款基于jQuery+CSS3实现的点赞+1动画效果,非常实用
  动画效果
 53400  521

很酷的jQuery文字切换动画

文字切换动画,很简单很实用,适合做SLOGAN
  动画效果
 31723  335

图片酷炫粒子动画效果

学习es6顺便写的 使用canvas粒子化图片 利用easying.js里面的公式计算粒子动态轨迹方程 x轴方向和y轴方向的公式均可以选择 可以设置粒子运动时间档
  动画效果
 53083  486

超级牛B的js效果

跟上一个心的形状用的类似的方法。不用我多说,看了就知道有多牛B了哦。可兼容手机。暂停之后一个手指拖动改变视角,两个手指可以调整视角的大小,三个手指可以移动。
  动画效果
 57998  331

讨论这个项目(3)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ?? 0
    2018/1/8 11:18:28
    作为使用者 我感觉 没有立体感 不像转动 很像传送带在传送的感觉 回复
    0
    2014/11/3 7:32:59
    作为使用者 我感觉 没有立体感 不像转动 很像传送带在传送的感觉
        H0
        2016/4/21 15:04:30
        确实是这样的
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复