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(AJAX)解析XML的代码(兼容FIREFOX/IE)
Jul 11 Javascript
jQuery 跨域访问解决原理案例详解
Jul 09 Javascript
基于bootstrap实现广告轮播带图片和文字效果
Jul 22 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
Node.js发送HTTP客户端请求并显示响应结果的方法示例
Apr 12 Javascript
从零开始学习Node.js系列教程四:多页面实现数学运算的client端和server端示例
Apr 13 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
小程序实现长按保存图片的方法
Dec 31 Javascript
如何使用JS console.log()技巧提高工作效率
Oct 14 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目录遍历函数opendir用法实例
2014/11/20 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
JSONP 跨域访问代理API-yahooapis实现代码
2012/12/02 Javascript
JS动态获取当前时间,并写到特定的区域
2013/05/03 Javascript
js函数中onmousedown和onclick的区别和联系探讨
2013/05/19 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
ECMAScript 6即将带给我们新的数组操作方法前瞻
2015/01/06 Javascript
jQuery实现点击小图显示大图代码分享
2015/08/25 Javascript
老生常谈javascript的类型转换
2016/10/12 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
AngularJS实现根据不同条件显示不同控件
2017/04/20 Javascript
详解用函数式编程对JavaScript进行断舍离
2017/09/18 Javascript
微信小程序 input输入及动态设置按钮的实现
2017/10/27 Javascript
Nodejs中使用puppeteer控制浏览器中视频播放功能
2019/08/26 NodeJs
Layui表格行工具事件与数据回填方法
2019/09/13 Javascript
用vue 实现手机触屏滑动功能
2020/05/28 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
在Vue中使用Viser说明(基于AntV-G2可视化引擎)
2020/10/28 Javascript
jQuery实现全选按钮
2021/01/01 jQuery
python得到电脑的开机时间方法
2018/10/15 Python
Python切片操作去除字符串首尾的空格
2019/04/22 Python
教你一步步利用python实现贪吃蛇游戏
2019/06/27 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
python双向链表原理与实现方法详解
2019/12/03 Python
Django models filter筛选条件详解
2020/03/16 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
如何为DataGridView添加一个定制的Column Type
2014/01/21 面试题
餐饮业经理竞聘演讲稿
2014/01/14 职场文书
厨房管理计划书
2014/04/27 职场文书
我是一名护士演讲稿
2014/08/28 职场文书
中共广东省委常委会党的群众路线教育实践活动整改方案
2014/09/23 职场文书
优秀教师工作总结2015
2015/07/22 职场文书
护士医德医风心得体会
2016/01/25 职场文书
利用Matlab绘制各类特殊图形的实例代码
2021/07/16 Python