Javascript 鼠标移动上去小三角形滑块缓慢跟随效果


Posted in Javascript onApril 26, 2013

先来一张截图。
Javascript 鼠标移动上去小三角形滑块缓慢跟随效果 
鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随。
不管有多少个都可以。
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<obj.length;i++){ 
try{ 
var base=obj[i].getElementsByClassName('products-box-center-title')[0]; //取得每一项标题 
var elems=base.getElementsByClassName('products-items-title'); 
for(var j=0;j<elems.length;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<notes.length;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表达式循环下,多搞几个。。。
一个上午才做好。
Javascript 相关文章推荐
jqPlot 基于jquery的画图插件
Apr 26 Javascript
JS去除数组重复值的五种不同方法
Sep 06 Javascript
javascript 函数及作用域总结介绍
Nov 12 Javascript
jQuery动画效果相关方法实例分析
Dec 31 Javascript
jQuery的实例及必知重要的jQuery选择器详解
May 20 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
Mar 08 Javascript
基于JavaScript实现类名的添加与移除
Apr 23 Javascript
node.js使用express框架进行文件上传详解
Mar 03 Javascript
Vue中Table组件Select的勾选和取消勾选事件详解
Mar 19 Javascript
Ant Design的可编辑Tree的实现操作
Oct 31 Javascript
jquery 关于event.target使用的几点说明介绍
Apr 26 #Javascript
用示例说明filter()与find()的用法以及children()与find()的区别分析
Apr 26 #Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 #Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 #Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
Apr 26 #Javascript
用JQuery 判断某个属性是否存在hasAttr的解决方法
Apr 26 #Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 #Javascript
You might like
php判断两个浮点数是否相等的方法
2015/03/14 PHP
CodeIgniter开发实现支付宝接口调用的方法示例
2016/11/14 PHP
php生成word并下载代码实例
2019/03/15 PHP
php7性能提升的原因详解
2019/10/13 PHP
Laravel 微信小程序后端搭建步骤详解
2019/11/26 PHP
Some tips of wmi scripting in jscript (1)
2007/04/03 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
2015/07/05 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
jQuery position() 函数详解以及jQuery中position函数的应用
2015/12/14 Javascript
AJAX和jQuery动态加载数据的实现方法
2016/12/05 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
vue页面离开后执行函数的实例
2018/03/13 Javascript
vue的diff算法知识点总结
2018/03/29 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
手把手带你入门微信小程序新框架Kbone的使用
2020/02/25 Javascript
python统计文本文件内单词数量的方法
2015/05/30 Python
Python中第三方库Requests库的高级用法详解
2017/03/12 Python
python绘制简单折线图代码示例
2017/12/19 Python
zookeeper python接口实例详解
2018/01/18 Python
flask-restful使用总结
2018/12/04 Python
python统计中文字符数量的两种方法
2019/01/31 Python
Django获取该数据的上一条和下一条方法
2019/08/12 Python
2014两会学习心得:榜样精神伴我行
2014/03/17 职场文书
化工实习心得体会
2014/09/09 职场文书
村长反四风问题个人对照检查材料
2014/09/21 职场文书
法律专业大学生职业生涯规划书:向目标一步步迈进
2014/09/22 职场文书
工程安全生产协议书
2014/11/21 职场文书
齐云山导游词
2015/02/06 职场文书
2015年爱牙日活动总结
2015/03/23 职场文书
宾馆客房管理制度
2015/08/06 职场文书
文明礼貌主题班会
2015/08/14 职场文书
深入理解python协程
2021/06/15 Python