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 相关文章推荐
js文件中调用js的实现方法小结
Oct 23 Javascript
javascript string字符串优化问题
Jul 31 Javascript
JS实现随机数生成算法示例代码
Aug 08 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
Oct 17 Javascript
JScript中的条件注释详解
Apr 24 Javascript
继续学习javascript闭包
Dec 03 Javascript
20分钟成功编写bootstrap响应式页面 就这么简单
May 12 Javascript
微信公众号  提示:Unauthorized API function 问题解决方法
Dec 05 Javascript
canvas简单快速的实现知乎登录页背景效果
May 08 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
浅谈vue首屏加载优化
Jun 28 Javascript
jQuery实现手风琴效果(蒙版)
Jan 11 jQuery
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
CI框架中集成CKEditor编辑器的教程
2014/06/09 PHP
浅谈PHP中Stream(流)
2015/06/08 PHP
curl和libcurl的区别简介
2015/07/01 PHP
初识ThinkPHP控制器
2016/04/07 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
Javascript UrlDecode函数代码
2010/01/09 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
JavaScript判断手机号运营商是移动、联通、电信还是其他(代码简单)
2015/09/25 Javascript
node.js实现端口转发
2016/04/14 Javascript
用js动态添加html元素,以及属性的简单实例
2016/07/19 Javascript
jQuery与JS加载事件用法分析
2016/09/04 Javascript
js内置对象处理_打印学生成绩单的简单实现
2016/09/24 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
layer子层给父层页面元素赋值,以达到向父层页面传值的效果实例
2017/09/22 Javascript
JS和JQuery实现雪花飘落效果
2017/11/30 jQuery
JavaScript 五大常见函数
2018/03/23 Javascript
详解Vue中数组和对象更改后视图不刷新的问题
2018/09/21 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
2019/03/08 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
[58:12]Ti4第二日主赛事败者组 LGD vs iG 3
2014/07/21 DOTA
Python enumerate索引迭代代码解析
2018/01/19 Python
Django 项目通过加载不同env文件来区分不同环境
2020/02/17 Python
查看已安装tensorflow版本的方法示例
2020/04/19 Python
如何教少儿学习Python编程
2020/07/10 Python
德国苹果商店:MacTrade
2020/05/18 全球购物
C语言面试题
2013/05/19 面试题
成绩单家长意见
2015/06/03 职场文书
法人代表证明书范本
2015/06/18 职场文书
公务员处分决定书
2015/06/25 职场文书
2015年酒店销售部工作总结
2015/07/24 职场文书
2016年国庆节新闻稿范文
2015/11/25 职场文书
详解分布式系统中如何用python实现Paxos
2021/05/18 Python
golang定时器
2022/04/14 Golang
python中redis包操作数据库的教程
2022/04/19 Python