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 >
现在您将创建一个微型太阳能系统在你面前,不需要科学。:)
canvas 雨滴
这款动画主要是模拟了下雨的场景，雨滴从空中飘落，落在地上溅起水花，整个过程模拟得相当逼真。更重要的是，这款HTML5下雨动画还可以通过鼠标控制风向和雨水强度，鼠标左右滑动控制雨滴方向，鼠标上下滑动控制雨滴密度。
讨论这个项目（3）回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
- 😀
- 😉
- 😥
- 😵
- 😫
- 😘
- 😡
- 👍
- 🌹
- 👏
- 🍺
- 🍉
- 🌙
- ⭐
- 💖
- 💔
