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 相关文章推荐
javascript实现动态增加删除表格行(兼容IE/FF)
Apr 02 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
jQuery实现自动滚动到页面顶端的方法
May 22 Javascript
javascript中字体浮动效果的简单实例演示
Nov 18 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
字符串反转_JavaScript
Apr 28 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
JavaScript基本类型值-Number类型
Feb 24 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
详解.vue文件中监听input输入事件(oninput)
Sep 19 Javascript
微信小程序引用iconfont图标的方法
Oct 22 Javascript
Vue实现表格批量审核功能实例代码
May 28 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实现当前页面点击下载文件的简单方法
2016/09/22 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
JavaScript中的undefined学习总结
2013/11/30 Javascript
jquery遍历checkbox介绍
2014/02/21 Javascript
基于javascript实现页面加载loading效果
2020/09/15 Javascript
使用JavaScript实现ajax的实例代码
2016/05/11 Javascript
Bootstrap 过渡效果Transition 模态框(Modal)
2017/03/17 Javascript
jQuery用户头像裁剪插件cropbox.js使用详解
2017/06/07 jQuery
CSS3+JavaScript实现翻页幻灯片效果
2017/06/28 Javascript
基于rem的移动端响应式适配方案(详解)
2017/07/07 Javascript
关于vue.js组件数据流的问题
2017/07/26 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
解决angularjs WdatePicker ng-model的问题
2018/09/13 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
2019/09/30 Javascript
jQuery实现form表单基于ajax无刷新提交方法实例代码
2019/11/04 jQuery
js实现一款简单踩白块小游戏(曾经很火)
2019/12/02 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
2019/12/25 Javascript
Js利用正则表达式去除字符串的中括号
2020/11/23 Javascript
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
使用python 和 lint 删除项目无用资源的方法
2017/12/20 Python
Python实现的tcp端口检测操作示例
2018/07/24 Python
浅谈Python中的bs4基础
2018/10/21 Python
python射线法判断一个点在图形区域内外
2019/06/28 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Anaconda+Pycharm环境下的PyTorch配置方法
2020/03/13 Python
PyCharm 在Windows的有用快捷键详解
2020/04/07 Python
白俄罗斯在线大型超市:e-dostavka.by
2019/07/25 全球购物
领先的荷兰线上超市:荷兰之家Holland at Home(支持中文)
2021/01/21 全球购物
销售心得体会
2014/01/02 职场文书
幼儿园安全责任书
2014/04/14 职场文书
2014年销售工作总结范文
2014/12/01 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
SQLServer之常用函数总结详解
2021/08/30 SQL Server
Android studio 简单计算器的编写
2022/05/20 Java/Android