发布于 2017-04-19 12:48:07 | 116 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了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表达式循环下,多搞几个。。。
一个上午才做好。。。



最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务