jquery实现音符波动

今天思鹏在浏览网站时发现一个有趣的效果，就是腾讯游戏官网的滑动banner图，这个特效激发了我的创作灵感，于是我在几个小时的时间里完成了这个特效的编写。

音符波动，想必大家在平时听音乐的时候会注意到在音乐播放器都会有一个类似于条形统计图的东东。而且这个长条会随着音乐的频率变化而变化，这个效果在如今的WEB应用中已经可以实现了，就是利用HTML5的技术完成，可惜思鹏的HTML5技术没有那么牛掰，就只好做一个简易版的音乐可视化的特效，虽然没有HTML5写的那么逼真，但是最基本的功能还是可以达到的。好了不在做过多的介绍了，这就上源码，走起~~~

             setInterval(function(){
   			var random = Math.floor(Math.random() * 22);//生成1-22之间的随机数
   			var val = Math.floor(Math.random() * 5);
   			$(".slideone"+random).animate({"width":val+"00"},300);//给元素添加动画
   				setTimeout(function(){
   					$(".slideone"+random).animate({"width":3},300);//清除元素动画
   				},300);
   		},50);

我想大家一定会纳闷“$(".slideone"+random)”这个地方是什么意思？其实是思鹏偷了一个懒，我是在元素中使用在class后面追加数字的方式来区分选中的元素。

真相大揭秘：

                <li class="slidenavli"><div class="slideone1 slidedom"></div></li>
  		<li class="slidenavli"><div class="slideone2 slidedom"></div></li>
  		<li class="slidenavli"><div class="slideone3 slidedom"></div></li>
  		<li class="slidenavli"><div class="slideone4 slidedom"></div></li>

可以看到“slideone”后面是直接跟数字来区分不同元素的，而在jquery选择器中拼接的random值正是这个数字，是不是觉得我好无聊。。。。

特效演示地址：

http://sipeng.net/yanshi/music/index.html 

为了大家更好的理解这个特效的运行原理，我在这里把特效的源代码安利给大家，希望大家。。。。。不喜欢的也不好打我。。。。

音乐可视化