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做flash做的事..才完成的一个类.Auntion Action var 0.1
Feb 23 Javascript
jQuery添加/改变/移除CSS类及判断是否已经存在CSS
Aug 20 Javascript
原创jQuery弹出层插件分享
Apr 02 Javascript
JS实现为排序好的字符串找出重复行的方法
Mar 02 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
酷! 不同风格页面布局幻灯片特效js实现
Feb 19 Javascript
JavaScript中利用for循环遍历数组
Jan 15 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
Vue 中的compile操作方法
Feb 26 Javascript
Postman模拟发送带token的请求方法
Mar 31 Javascript
JS数组求和的常用方法实例小结
Jan 07 Javascript
小程序测试后台服务的方法(ngrok)
Mar 08 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中的cookie
2006/11/26 PHP
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
从手册去理解分析PHP session机制
2011/07/17 PHP
谈谈关于php的优点与缺点
2013/04/11 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
详解PHP中的PDO类
2015/07/06 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
安装docker和docker-compose实例详解
2019/07/30 PHP
php redis setnx分布式锁简单原理解析
2020/10/23 PHP
jQuery autocomplete插件修改
2009/04/17 Javascript
AngularJS入门教程(二):AngularJS模板
2014/12/06 Javascript
jQuery实现图片与文字描述左右滑动自动切换的方法
2015/07/27 Javascript
JS简单限制textarea内输入字符数量的方法
2015/10/14 Javascript
分享几种比较简单实用的JavaScript tabel切换
2015/12/31 Javascript
JavaScript实现点击单元格改变背景色的方法
2016/02/12 Javascript
微信小程序 功能函数小结(手机号验证*、密码验证*、获取验证码*)
2017/12/08 Javascript
通过js动态创建标签,并设置属性方法
2018/02/24 Javascript
AngularJS实现的自定义过滤器简单示例
2019/02/02 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
Javascript ParentNode和ChildNode接口原理解析
2020/03/16 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
详解python并发获取snmp信息及性能测试
2017/03/27 Python
Python编程实现生成特定范围内不重复多个随机数的2种方法
2017/04/14 Python
pandas中遍历dataframe的每一个元素的实现
2019/10/23 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
static关键字的用法
2013/10/07 面试题
公司踏青活动方案
2014/08/16 职场文书
商铺租房协议书范本
2014/12/04 职场文书
公司员工辞职信范文
2015/05/12 职场文书
论文评审意见
2015/06/05 职场文书
生活委员竞选稿
2015/11/21 职场文书
党员心得体会范文2016
2016/01/23 职场文书
详解Go语言中配置文件使用与日志配置
2022/06/01 Golang