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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
JS在TextArea光标位置插入文字并实现移动光标到文字末尾
Jun 21 Javascript
复制js对象方法(详解)
Jul 08 Javascript
用js判断是否为360浏览器的实现代码
Jan 15 Javascript
JS操作HTML自定义属性的方法
Feb 10 Javascript
JavaScript Length 属性的总结
Nov 02 Javascript
div实现自适应高度的textarea实现angular双向绑定
Jan 08 Javascript
简单实现IONIC购物车功能
Jan 10 Javascript
微信小程序page的生命周期和音频播放及监听实例详解
Apr 07 Javascript
vue bus全局事件中心简单Demo详解
Feb 26 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
Vue前端判断数据对象是否为空的实例
Sep 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
关于页面优化和伪静态
2009/10/11 PHP
php批量缩放图片的代码[ini参数控制]
2011/02/11 PHP
yii分页组件用法实例分析
2015/12/28 PHP
使用JavaScript库还是自己写代码?
2010/01/28 Javascript
借助script进行Http跨域请求:JSONP实现原理及代码
2013/03/19 Javascript
jquery退出each循环的写法
2014/02/26 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
用js代码和插件实现wordpress雪花飘落效果的四种方法
2014/12/15 Javascript
node.js中的fs.rename方法使用说明
2014/12/16 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
jQuery 常用代码集锦(必看篇)
2016/05/16 Javascript
jquery 属性选择器(匹配具有指定属性的元素)
2016/09/06 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
vue实现app页面切换动画效果实例
2017/05/23 Javascript
js数字滑动时钟的简单实现(示例讲解)
2017/08/14 Javascript
Node.js readline 逐行读取、写入文件内容的示例
2018/03/01 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
Pycharm设置utf-8自动显示方法
2019/01/17 Python
基于多进程中APScheduler重复运行的解决方法
2019/07/22 Python
python使用requests.session模拟登录
2019/08/09 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
python中return如何写
2020/06/18 Python
EJB的几种类型
2012/08/15 面试题
总经理岗位职责
2013/11/09 职场文书
五一家具促销方案
2014/01/10 职场文书
个人实习生的自我评价
2014/02/16 职场文书
意向书范文
2014/03/31 职场文书
群众路线教育实践活动民主生活会个人检查对照思想汇报
2014/10/04 职场文书
大班下学期幼儿评语
2014/12/30 职场文书
介绍信范文大全
2015/05/07 职场文书
致接力运动员加油稿
2015/07/21 职场文书
golang如何去除多余空白字符(含制表符)
2021/04/25 Golang