发布于 2017-04-17 18:26:36 | 26 次阅读 | 评论: 0 | 来源: 网友投递

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

JavaScript客户端脚本语言

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


一个tab选项卡,当鼠标移动上去时红色滑块跟随,在布局过程中经常会使用到,本文提供了详细的实现代码,感兴趣的朋友可以参考下
先来一张截图。
 
鼠标移动到对应的分类,下面的红色小三角形就会自动跟随,缓慢的跟随。
不管有多少个都可以。
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 鼠标移动上去 滑块跟随效果代码分享
javascript鼠标滑过显示二级菜单特效
JavaScript简单实现鼠标移动切换图片的方法
javascript DIV跟随鼠标移动
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
JavaScript检测鼠标移动方向的方法
javascript实现图片跟随鼠标移动效果的方法
JavaScript实现鼠标滑过图片变换效果的方法
一个鼠标移动滑出层效果的实现代码
javascript学习笔记(二) 鼠标经过时,改变div块的背景色的代码
鼠标放上去触发一个javascript提示框效果代码
最新网友评论  共有(0)条评论 发布评论 返回顶部

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