注册    登录
最新消息: 本以为花钱买了那个amh的板面可以让网站更稳定,结果搞得整 个网站运行出错,真是赔了夫人又折兵,对不起大家了。最新版jquery-2.1.1下载  ,在线的 jquery API使用手册, 稳定版jquery.mobile-1.3.2下载

基于jQuery的转动星球插件planetarium

动画 fishcity 978浏览

要是在网页中建立一个宇宙,有几个星球在里面自转,还可以实现互动,那是多么的有个性的网站阿,嗯,这一切都不是梦了,planetarium这款基于jquery插件可以让您梦想成真,它可以非常轻松的实现你想要的功能,但planetarium插件需要现代浏览器支持,因为它用到了CSS3。下面来看下的用法吧。

引入核心库文件,要在head标签前哦

  <link href='planetarium.css' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.planetarium.js"></script>

写入html,这里放了三个星球

  <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>

写入JS,初始化效果

$(document).ready(function(){
       $(".planet").planetarium({
          space: "html, body"
        });
});

选项

星球的转速:data-ptr-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

< 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

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

现在您将可以创建一个微型太阳能系统在你的网页里了,不需要懂天文科学,嘻嘻!

转载请注明:jQ酷 » 基于jQuery的转动星球插件planetarium

下载地址:本站下载 | 百度云 | 官方下载
下载说明:
☉如果您发现本文件已经失效不能下载,请联系站长修正!
☉如果您下载的文件出现解压不了或文件受损等情况,请选择其他下载点重新下载。
☉下载本站资源,如果服务器暂不能下载请过一段时间重试!
☉有小部分资源需要解压密码,请输入:jqcool.net。
☉本站提供的所有资源仅供学习研究与参考,请勿用于商业用途。