jRumble是一个jQuery的插件,隆隆声,振动,震动,旋转你所选择的任何元素。这是伟大的使用作为一个悬停效果、让任何一个人都会把注意力放在上面!

他的官网是:http://jackrugile.com/jrumble/ 具体介绍就去百度吧~今天讲一下他的用法!

为了写这个教程我特地的搭建了一个百度云应用、为的就是方便!其实我很想写这篇教程、等到了现在!

jrumble新手使用教程:

我就拿WordPress为例子吧,因为他非常的广泛、而且我就是用WordPress工作的。

在文章的前两行已经分别引用了这两个JS,你也可以保存到你的主机(不过可能速度会慢并且耗流量)

<script type="text/javascript" src="http://code.zntec.cn/codex/jrumble/jquery-1.8.2.min_.js"></script>
<script type="text/javascript" src="http://code.zntec.cn/codex/jrumble/jquery.jrumble.1.3.min_.js"></script>
<script type="text/javascript">
$(function() {

		$('#iDivName').jrumble({
			x: 3,
			y: 3,
			rotation: 0
		});

		$('#iDivName').hover(function(){
			$(this).trigger('startRumble');
		}, function(){
			$(this).trigger('stopRumble');
		});
	});
</script>

首先复制以上的代码插入到你主题的“header.php”的第一个“<script>”标签上面、如下图:

先不要着急着更新文件、现在找到你需要“抖啊抖”的那个东西的ID,例如说LOGO、(需要使用Chrome)

使用谷歌(或Chrome内核的)浏览器、右键点击你要抖动的对象审查元素,找到他的ID!

修改刚刚代码里面的“#DivName”变成“#你的ID号”、看清楚有两个哦,修改好保存即可看到!

如果出现不能抖动可能是有两个原因:

1. 创智代码库连接出错或延时等等

2. 代码没有添加正确或者是太后面了

3. ID不正确、重新查看一下确认一下是不是那个ID


小结

只需要简单的几下就能让你的网站更有趣,本代码中包含的JS放在国内百度云机房、面向国外可能会缓慢

目前有41条回应
Comment
Trackback
Loading ....
  • 八度 回应于2014/05/15 10:19 回复TA

    那两个JS要去那里下载啊

  • 繁星点点 回应于2014/05/02 16:33 回复TA

    你的js源地址貌似失效了,

  • Faris 回应于2013/06/28 19:31 回复TA

    很牛~~标记一下~~备用

    • Tomas 回应于2013/06/29 00:07 回复TA

      标记一定要记得添加书签哇~

  • chenxiyi 回应于2013/04/20 15:57 回复TA

    以前见过通过css实现,但是不支持国产浏览器

    • Tomas 回应于2013/04/20 21:50 回复TA

      应该是不支持IE吧,其实HTML的扩展是无穷的~

  • 喇叭 回应于2012/12/24 17:43 回复TA

    我在haeder.php里面找不到 怎么办啊 我也想抖 啊

    • Tomas 回应于2012/12/24 19:54 回复TA

      没有的可以自己加一个ID上去,你那个主题LOGO的ID就是“site-logo-image”,把文章中代码说要更改的地方改成“#site-logo-image”

      • 喇叭 回应于2012/12/24 20:26 回复TA

        @Tomas: 是 这个 s c r i p t
        没有 找不到

        • Tomas 回应于2012/12/24 20:28 回复TA

          @喇叭: 👿 、亲,仔细看文章哦~“jrumble新手使用教程”的下面一点点就是代码了、不要把它看成了图片哦 。。。

  • Miracle 回应于2012/12/18 18:05 回复TA

    这个抖的。。。= =可以考虑有空弄个CSS版的=。=

    • Tomas 回应于2012/12/18 18:06 回复TA

      @Miracle: 😐 、等着你哦~~我现在的实力还不可以额 。。

      • Miracle 回应于2012/12/18 18:07 回复TA

        @Tomas: =。=我也是小菜鸟,还有好几篇CSS方面的文章开了个头没写呢,这得等到很久很久很久以后了。。。

        • Tomas 回应于2012/12/18 18:08 回复TA

          @Miracle: 😎 、等到放假了我就专门自己搞一个WordPress带超多特效的然后把所有文件合并啥的、

  • 花七七 回应于2012/12/16 20:21 回复TA

    直接把他合并到主题的JS去吧~

    • Tomas 回应于2012/12/16 20:33 回复TA

      直接远程引入了~一段代码就搞定了~

      • 花七七 回应于2012/12/16 22:47 回复TA

        @Tomas: 呵呵、远程的话要解释域名同样差不多的速度

        • Tomas 回应于2012/12/16 22:49 回复TA

          @花七七: 💡 ,百度云速度应该可以的吧 。。国内的 。。主要是放在本目录的话每次加载就几K、费流量,不过 。。。。我没一个月20G的流量只用2G。。。

  • skylong 回应于2012/12/16 16:30 回复TA

    呵呵,早就惦记这个了,等有空再折腾,有你这篇文章省我老大事了。

    • Tomas 回应于2012/12/16 16:31 回复TA

      嗯嗯、还望支持哈~~文件都为你们准备好了、加一串代码就好了~~

  • 云淡然 回应于2012/12/16 15:42 回复TA

    有点意思~

    • Tomas 回应于2012/12/16 20:37 回复TA

      这个很好玩的~不过你博客上面的导航条更好玩、那个光很好玩

  • teemo萌货 回应于2012/12/16 00:08 回复TA

    从百度大爷来到了这里。看着看着夜就深了,看你们调情来着。 ➡

    • Tomas 回应于2012/12/16 00:09 回复TA

      喔喔,百度找到我的?看来这个博客也做的差不多了,前几天更换固定连接一定K了很多收录 。。。

  • an9 回应于2012/12/15 23:38 回复TA

    不会玩这个.

    • Tomas 回应于2012/12/15 23:39 回复TA

      这个其实很简单,按照文章中的做就无压力了~

  • 山村野夫思密达 回应于2012/12/15 15:59 回复TA

    从“百度是傻逼”链入~~~

    • Tomas 回应于2012/12/15 16:00 回复TA

      哟哟~百度本来就是傻逼~

  • Mikeyzm 回应于2012/12/15 08:37 回复TA

    抖动可以用CSS吧?

    • Tomas 回应于2012/12/15 08:38 回复TA

      可以,不过会更复杂 。。。设计CSS是很烦的、

  • chengchen 回应于2012/12/15 02:20 回复TA

    😡

    噢、我的天 。。我讨厌代码

    • Tomas 回应于2012/12/15 08:38 回复TA

      你有人帮你搞肯定讨厌代码啦~

  • 东东博客 回应于2012/12/15 00:41 回复TA

    不错哦,支持了.

    • Tomas 回应于2012/12/15 08:38 回复TA

      嗯嗯,感谢支持~这个蛮好玩的哦~!

  • 本篇文章没有Trackback
你目前的身份是游客,请输入昵称和电邮!