先来一张截图。
鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随。不管有多少个都可以。javascript code:
- function changeCoord(id, left) {
- $$(id).style.left = left;
- }
function $$(id) {return document.getElementById(id);}
function $$$(id) {return document.getElementsByClassName(id)[0];}
function indexOf(arry, obj) {for (var i = 0; i < arry.length; i++) {if (obj == arry[i]) {return i;} };}
window.onload = function() { // 给页面上所有的滑块注册事件 //products-box-center 父容器对象 var obj = document.getElementsByClassName('products-box-center'); for(var i=0;i try{ var base=obj[i].getElementsByClassName('products-box-center-title')[0]; // 取得每一项标题 var elems=base.getElementsByClassName('products-items-title'); for(var j=0;j var elem=elems[j]; elem.onmousemove=function(){ // 获得当前对象的父容器的父容器 var baseElem=this.parentElement.parentElement; var baseIndex=indexOf(obj,baseElem)+1; // 获得当前对象的坐标 var left = this.offsetLeft; // 获得对应的滑块对象 var slider=$$('products-triangle-'+baseIndex); // 改变滑块的坐标 slider.style.left = left + "px"; // 改变当前对象和其他对象的颜色 this.style.color = "red"; // 获取当前父容器下面的所有元素 var notes=this.parentElement.getElementsByClassName('products-items-title'); for(var k=0;k if(this!=notes[k]) notes[k].style.color="#666"; } }; } } catch(e){alert(e); } };
}
html code:
- <div class="products-box-center">
- <div class="products-box-center-title">
- <div class="products-items-title products-focus-text">
- <h3>
- 最新商品
- </h3>
- </div>
- <div class="products-items-title">
- <h3>
- 笔记本
- </h3>
- </div>
- <div class="products-items-title">
- <h3>
- 数码影音
- </h3>
- </div>
- <div class="products-items-title">
- <h3>
- 配件
- </h3>
- </div>
- <div class="products-items-title">
- <h3>
- 办公打印
- </h3>
- </div>
- <div class="products-bottom-triangle" id="products-triangle-${index.count}">
- <b class="triangle">
- </b>
- </div>
- </div>
- <div class="products-box-panel">
- <div class="products-item">
- <ul>
- <c:forEach begin="1" end="10">
- <li>
- <a href="#">
- <img src="img/pc.jpg" />
- </a>
- <div class="p-name">
- <a href="#">
- LG IPS237L-BN 23英寸IPS显示器
- </a>
- </div>
- <div class="p-price">
- <span>
- ¥1299.00
- </span>
- </div>
- </li>
- </c:forEach>
- </ul>
- </div>
- </div>
- </div>
上面的 html 是部分,可以用 el 表达式循环下,多搞几个。。。一个上午才做好。。。
来源: http://www.phperz.com/article/17/0419/278201.html