js琴弦列表

啥都不说，上图为先！

初次实现效果没有进行配色，但不影响我对它炙热的喜欢。熟悉这些特效对于网站的用户体验可以提高一个档次，实现过程没有用到很复杂的数学公式，坚持多练几遍就自然会了，下面是该效果的实现过程。

html代码：

		<ul id="list">
			<li>1_妙味琴弦文字列表(1)11</li>
			<li>1_妙味琴弦文字列表(2)222</li>
			<li>1_妙味琴弦文字列表(3)3333</li>
			<li>1_妙味琴弦文字列表(4)44444</li>
			<li>1_妙味琴弦文字列表(5)555555</li>
			<li>1_妙味琴弦文字列表(6)6666666</li>
			<li>1_妙味琴弦文字列表(7)77777777</li>
		</ul>

css代码：

			#list{
				width: 300px;
				margin: 30px auto;
				padding: 0;
				list-style: none;
			}
			#list li{
				height: 40px;
				font: 12px/40px "宋体";
				border: 1px solid #000;
				position: relative;
				line-height: 40px;
				cursor: pointer;
			}
			#list span{
				width: 12px;
				height: 12px;
				line-height: 12px;
			}

JavaScript代码:

		<script src="js/tween.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload = function(){
				var listDom = document.getElementById("list");
				var liDoms = listDom.getElementsByTagName("li");
				//获取li高度，判断span的边界问题
				var liHeight = liDoms[0].offsetHeight;
				for(var i=0;i<liDoms.length;i++){
					var liHtml = liDoms[i].innerHTML;
					liDoms[i].innerHTML = "";
					for(var j=0;j<liHtml.length;j++){
						liDoms[i].innerHTML +="<span>"+liHtml[j]+"</span>";
					}
					var spanDoms = liDoms[i].children;
					for(var k = 0;k<spanDoms.length;k++){
						spanDoms[k].style.left = spanDoms[k].offsetLeft+"px";
						spanDoms[k].style.top = spanDoms[k].offsetTop+"px";
						//记录span的初始位置
						spanDoms[k].startTop = spanDoms[k].offsetTop;
//						console.log(spanDoms[k].startTop);//13
					}
					//给每个span加定位
					for(var k = 0;k<spanDoms.length;k++){
						spanDoms[k].style.position = "absolute";
						
						///num2 代表的是什么东西
						(function(spanDoms,num2){
							var iStart = 0;
							//获取每个span的高度
							var spanHeight = spanDoms[0].offsetHeight;
							spanDoms[num2].onmouseover = function(e){
								var ev = e || window.event;
								iStart = ev.clientY;//获取鼠标初始进来的位置
//								alert(spanDoms.length);
							}
							spanDoms[num2].onmousemove = function(e){
								var ev = e || window.event;
								//计算每个span应该走的位置
								var spanMoveY = ev.clientY - iStart;
								//正负判断
								var flag = spanMoveY>0?1:-1;
//								console.log(this.startTop+spanMoveY );
								
								//边界判断， 默认是13，向上移动的时候减小，小于0 的时候不允许上移
								if(this.startTop+spanMoveY >= 0 && this.startTop + spanMoveY<(liHeight - spanHeight)){
//									this.style.top = this.startTop+spanMoveY +"px";
									//当鼠标移上去的时候相邻的字体也会跟着移动
									for(var j=0;j<spanDoms.length;j++){
										//会出现一个问题，就是spanDoms.length的长度总是最后一个li的span长度，原因是上面循环完毕时候才进入这里，所以只获取到最后一个,所以外面传进一个spanDoms对象来解决
										//两边的文字依次减少偏移量
										if(Math.abs(spanMoveY) > Math.abs(num2 - j)){
											spanDoms[j].style.top = spanDoms[j].startTop+(Math.abs(spanMoveY) - Math.abs(num2 - j))*flag+"px";	
										}else{
											spanDoms[j].style.top = spanDoms[j].startTop+"px";
										}
										
									}
								}
							}
<ul><li><span style="font-family: Arial, Helvetica, sans-serif;">			}</span></li></ul>							spanDoms[num2].onmouseout = function(){
								for(var j=0;j<spanDoms.length;j++){
//									spanDoms[j].style.top = spanDoms[j].startTop+"px";
									//添加弹性跳动
									starMove(spanDoms[j],{top:spanDoms[j].startTop},500,"elasticOut");
								}
							}
						})(spanDoms,k);
					}
				}

注：js中引用了加减速曲线的插件，大家可以自行上网下载，一些运动函数也放在改插件中，以上代码为主要实现原理。