特效描述:jquery 3D文字动画 上下滚动标签云。 jquery 3D文字动画上下滚动标签云效果
代码结构
1. 引入JS
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
2. HTML代码
<div id="list"> <ul> <li><a href="http://www.51qianduan.com//">PhP</a></li> <li><a href="http://www.51qianduan.com//">jQuery</a></li> <li><a href="http://www.51qianduan.com//">Magento</a></li> <li><a href="http://www.51qianduan.com//">MySql</a></li> <li><a href="http://www.51qianduan.com//">Js</a></li> <li><a href="http://www.51qianduan.com//">HTML</a></li> <li><a href="http://www.51qianduan.com//">CSS</a></li> <li><a href="http://www.51qianduan.com//">Ajax</a></li> <li><a href="http://www.51qianduan.com//">ThinkPHP</a></li> <li><a href="http://www.51qianduan.com//">Apache</a></li> <li><a href="http://www.51qianduan.com//">Linux</a></li> <li><a href="http://www.51qianduan.com//">Python</a></li> <li><a href="http://www.51qianduan.com//">web</a></li> <li><a href="http://www.51qianduan.com//">xhtml</a></li> </ul> </div> <script type="text/javascript"> $(document).ready(function(){ var element = $('#list a'); var offset = 0; var stepping = 0.03; var list = $('#list'); var $list = $(list) $list.mousemove(function(e){ var topOfList = $list.eq(0).offset().top var listHeight = $list.height() stepping = (e.clientY - topOfList) / listHeight * 0.2 - 0.1; }); for (var i = element.length - 1; i >= 0; i--){ element[i].elemAngle = i * Math.PI * 2 / element.length; } setInterval(render, 20); function render(){ for (var i = element.length - 1; i >= 0; i--){ var angle = element[i].elemAngle + offset; x = 120 + Math.sin(angle) * 30; y = 45 + Math.cos(angle) * 40; size = Math.round(40 - Math.sin(angle) * 40); var elementCenter = $(element[i]).width() / 2; var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px" $(element[i]).css("fontSize", size + "pt"); $(element[i]).css("opacity",size/100); $(element[i]).css("zIndex" ,size); $(element[i]).css("left" ,leftValue); $(element[i]).css("top", y + "%"); } offset += stepping; } }); </script>