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 firefox兼容ie的dom方法脚本
May 18 Javascript
JavaScript不刷新实现浏览器的前进后退功能
Nov 05 Javascript
jQuery实现点击图片翻页展示效果的方法
Feb 16 Javascript
在JavaScript中处理时间之getHours()方法的使用
Jun 10 Javascript
纯js实现无限空间大小的本地存储
Jun 18 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
利用Angularjs和Bootstrap前端开发案例实战
Aug 27 Javascript
Javascript下拉刷新的简单实现
Feb 14 Javascript
详解angularjs获取元素以及angular.element()用法
Jul 25 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
JS代码检查工具ESLint介绍与使用方法
Feb 04 Javascript
用vue写一个日历
Nov 02 Javascript
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
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
使用php实现下载生成某链接快捷方式的解决方法
2013/05/07 PHP
php实现执行某一操作时弹出确认、取消对话框
2013/12/30 PHP
从wamp到xampp的升级之路
2015/04/08 PHP
PHP封装curl的调用接口及常用函数详解
2018/05/31 PHP
phpfpm的作用和用法
2019/10/10 PHP
基于jquery的表格排序
2010/09/11 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
js数组的操作指南
2014/12/28 Javascript
javascript中定义类的方法汇总
2014/12/28 Javascript
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)
2015/12/13 Javascript
jQuery实现Select左右复制移动内容
2016/08/05 Javascript
微信小程序 swiper组件轮播图详解及实例
2016/11/16 Javascript
深入对Vue.js $watch方法的理解
2017/03/20 Javascript
NodeJs模拟登陆正方教务
2017/04/28 NodeJs
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
2017/06/26 jQuery
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
2018/09/02 Javascript
js实现固定区域内的不重叠随机圆
2019/10/24 Javascript
JS如何实现动态添加的元素绑定事件
2019/11/12 Javascript
vue-admin-template配置快捷导航的代码(标签导航栏)
2020/09/04 Javascript
Python入门_浅谈for循环、while循环
2017/05/16 Python
详解Django rest_framework实现RESTful API
2018/05/24 Python
python+numpy+matplotalib实现梯度下降法
2018/08/31 Python
python使用Pandas库提升项目的运行速度过程详解
2019/07/12 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
Python如何实现感知器的逻辑电路
2020/12/25 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
瑞士隐形眼镜和护理产品网上商店:Linsenklick
2019/10/21 全球购物
迪士尼西班牙官方网上商店:ShopDisney西班牙
2020/02/02 全球购物
高中生自我评语大全
2014/01/19 职场文书
公司聘任书模板
2014/03/29 职场文书
教师自我剖析材料范文
2014/09/30 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书
Golang标准库syscall详解(什么是系统调用)
2021/05/25 Golang