Javascript 鼠标移动上去 滑块跟随效果代码分享


Posted in Javascript onNovember 23, 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 异步方法队列链实现代码分析
Jun 05 Javascript
JQuery FlexiGrid的asp.net完美解决方案 dotNetFlexGrid-.Net原生的异步表格控件
Sep 12 Javascript
IE下window.onresize 多次调用与死循环bug处理方法介绍
Nov 12 Javascript
Node.js 学习笔记之简介、安装及配置
Mar 03 Javascript
JS判断图片是否加载完成方法汇总(最新版)
May 13 Javascript
总结js中的一些兼容性易错的问题
Dec 18 Javascript
Vue工程模板文件 webpack打包配置方法
Dec 26 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
layui的表单验证支持ajax判断用户名是否重复的实例
Sep 06 Javascript
JavaScript数组排序功能简单实现
May 14 Javascript
微信小程序实现星星评分效果
Nov 01 Javascript
vue中 this.$set的使用详解
Nov 17 Vue.js
jquery实现图片滚动效果的简单实例
Nov 23 #Javascript
js图片向右一张张滚动效果实例代码
Nov 23 #Javascript
JavaScript实现简单的时钟实例代码
Nov 23 #Javascript
JS控制日期显示的小例子
Nov 23 #Javascript
Jquery 动态循环输出表格具体方法
Nov 23 #Javascript
基于jquery异步传输json数据格式实例代码
Nov 23 #Javascript
JavaScript Ajax Json实现上下级下拉框联动效果实例代码
Nov 23 #Javascript
You might like
mysq GBKl乱码
2006/11/28 PHP
php图片缩放实现方法
2014/02/20 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
8个PHP数组面试题
2015/06/23 PHP
PHP使用Redis实现防止大并发下二次写入的方法
2017/10/09 PHP
php遍历目录下文件并按修改时间排序操作示例
2019/07/12 PHP
nginx 设置多个站跨域
2021/03/09 Servers
js验证表单大全
2006/11/25 Javascript
JQuery AJAX实现目录浏览与编辑的代码
2008/10/21 Javascript
解析js如何获取当前url中的参数值并复制给input
2013/06/23 Javascript
Extjs grid添加一个图片状态或者按钮的方法
2014/04/03 Javascript
修改jquery中dialog的title属性方法(推荐)
2016/08/26 Javascript
jquery实现图片列表鼠标移入微动
2016/12/01 Javascript
javascript闭包功能与用法实例分析
2017/04/06 Javascript
Angular.js中定时器循环的3种方法总结
2017/04/27 Javascript
webpack教程之webpack.config.js配置文件
2017/07/05 Javascript
Vue实现一个返回顶部backToTop组件
2017/07/25 Javascript
jQuery实现鼠标响应式淘宝动画效果示例
2018/02/13 jQuery
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
微信小程序 函数防抖 解决重复点击消耗性能问题实现代码
2019/09/12 Javascript
浅析vue-router实现原理及两种模式
2020/02/11 Javascript
vue计算属性+vue中class与style绑定(推荐)
2020/03/30 Javascript
vue axios请求成功却进入catch的原因分析
2020/09/08 Javascript
JavaScript实现原型封装轮播图
2020/12/27 Javascript
Python函数式编程指南(三):迭代器详解
2015/06/24 Python
Python实现字符串格式化的方法小结
2017/02/20 Python
对numpy中array和asarray的区别详解
2018/04/17 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
PyCharm 2020.2 安装详细教程
2020/09/25 Python
python生成word合同的实例方法
2021/01/12 Python
使用简单的CSS3属性实现炫酷读者墙效果
2014/01/08 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
入党介绍人评语
2014/05/06 职场文书
敬老院标语
2014/06/27 职场文书
2015新年寄语大全
2014/12/08 职场文书