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 进行输入框自动匹配字符的小例子
Jun 29 Javascript
JavaScript的setAttribute兼容性问题解决方法
Nov 11 Javascript
利用JS进行图片的切换即特效展示图片
Dec 03 Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 Javascript
jquery中validate与form插件提交的方式小结
Mar 26 Javascript
深入理解jQuery事件绑定
Jun 02 Javascript
Vue监听数据对象变化源码
Mar 09 Javascript
微信小程序调用PHP后台接口 解析纯html文本
Jun 13 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
Vue.js实现可配置的登录表单代码详解
Mar 29 Javascript
javascript实现文件拖拽事件
Mar 29 Javascript
关于vue编译版本引入的问题的解决
Sep 17 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
虫族 Zerg 历史背景
2020/03/14 星际争霸
一些需要禁用的PHP危险函数(disable_functions)
2012/02/23 PHP
php实现两表合并成新表并且有序排列的方法
2014/12/05 PHP
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
2010/10/20 Javascript
jquery星级插件、支持页面中多次使用
2012/03/25 Javascript
jquery之超简单的div显示和隐藏特效demo(分享)
2013/07/09 Javascript
jquery插件之定时查询待处理任务数量
2014/05/01 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
jquery select2的使用心得(推荐)
2016/12/04 Javascript
javascript中this关键字详解
2016/12/12 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
JavaScript之创意时钟项目(实例讲解)
2017/10/23 Javascript
基于jquery.page.js实现分页效果
2018/01/01 jQuery
深入理解vue-class-component源码阅读
2019/02/18 Javascript
优化Python代码使其加快作用域内的查找
2015/03/30 Python
Python爬虫之xlml解析库(全面了解)
2017/08/08 Python
浅谈django开发者模式中的autoreload是如何实现的
2017/08/18 Python
python数据分析数据标准化及离散化详解
2018/02/26 Python
python numpy 部分排序 寻找最大的前几个数的方法
2018/06/27 Python
Python3.8中使用f-strings调试
2019/05/22 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
Python内置数据类型list各方法的性能测试过程解析
2020/01/07 Python
基于python-pptx库中文文档及使用详解
2020/02/14 Python
Pycharm pyuic5实现将ui文件转为py文件,让UI界面成功显示
2020/04/08 Python
python 服务器运行代码报错ModuleNotFoundError的解决办法
2020/09/16 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
HTML5仿手机微信聊天界面
2016/03/18 HTML / CSS
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
异常和异常类的概念
2014/09/12 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
电气工程师岗位职责
2014/01/01 职场文书
杨善洲观后感
2015/06/04 职场文书
党校培训学习心得体会
2016/01/06 职场文书
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript