发布于 2017-01-11 17:38:09 | 24 次阅读 | 评论: 0 | 来源: 网友投递

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

JavaScript客户端脚本语言

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


下拉缓冲菜单效果想必大家都有见过吧,在本文使用JS轻松实现下,想学习的朋友可以参考下
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style> 
body,html,div,ul,li,span,img,a{ 
margin:0; 
padding:0; 
} 
a{ 
text-decoration:none; 
color:#000; 
font-weight:bold; 
width:150px; 
display:inline-block; 
text-align:center; 
} 
li{ 
list-style:none; 
} 
img{ 
width:0; 
height:0; 
outline:none; 
} 
#tab{ 
margin:200px 0 0 300px; 
} 
#tab li{ 
float:left; 
width:150px; 
height:50px; 
line-height:50px; 
position:relative; 
margin-right:30px; 
} 
#tab img.map,#tab span.content{ 
position:absolute; 
} 
#tab span.content{ 
background:#333; 
color:#FFF; 
font-size:14px; 
text-align:center; 
height:0; 
} 
#tab img.map{ 
left:50%; 
bottom:0; 
} 
</style> 
<title>JS下拉缓冲菜单_网页代码站()</title> 
</head> 

<body> 
<div id="tab"> 
<ul> 
<li style="background:url('/images/20130826/psb1.png')"> 
<a href="#">路飞</a> 
<img src="/jscss/demoimg/201210/psb1.jpg" class="map" /> 
<span class="content">草帽海贼团船长,特征是头戴草帽,天性乐观、热情、善良、天真、单纯。</span> 
</li> 
<li style="background:url('/images/20130826/psb1.png')"> 
<a href="#">索隆</a> 
<img src="/images/20130826/psb2.jpg" class="map" /> 
<span class="content">草帽海贼团剑士,绿色头发,左耳戴三只黄色露珠耳环,绿色的肚兜,路痴。</span> 
</li> 
<li style="background:url('/images/20130826/psb1.png')"> 
<a href="#">娜美</a> 
<img src="/jscss/demoimg/201210/psb3.jpg" class="map" /> 
<span class="content">精通气象学和航海术,擅长偷术、骗术、谈判及威胁恐吓,头脑聪明又机灵。</span> 
</li> 
<li style="background:url('/images/20130826/psb1.png')"> 
<a href="#">山治</a> 
<img src="/images/20130826/psb4.jpg" class="map" /> 
<span class="content">草帽海贼团厨师,金发,有着卷曲眉毛,永远遮住半边脸的家伙,海贼中的绅士。</span> 
</li> 
</ul> 
</div> 
<script type="text/javascript"> 
function kzxf_zoom(id) 
{ 
this.initialize.apply(this, arguments) 
} 

kzxf_zoom.prototype = 
{ 
initialize : function() 

{ 

var _this = this; 
this.wrapBox = document.getElementById('tab'); 
this.oLi = this.wrapBox.getElementsByTagName('li'); 
this.aImg = this.wrapBox.getElementsByTagName('img'); 
this.content = this.wrapBox.getElementsByTagName('span'); 
for(var i=0;i<this.oLi.length;i++) 
{ 
(function(i){ 
_this.oLi[i].onmouseover = function() 

{ 
_this.jump(_this.aImg[i], _this.content[i]); 

}; 
_this.oLi[i].onmouseout = function() 

{ 
_this.hidden(_this.aImg[i], _this.content[i]); 

}; 

})(i) 

} 

}, 
jump : function(obj1, obj2) 

{ 

var _this = this; 
_this.animation(obj1, {height:130, width:160, marginLeft:-78, marginTop:-128},function(){ 
_this.animation(obj1, {height:115, width:140, marginLeft:-70, marginTop:-115}, function(){ 
_this.animation(obj1, {height:120, width:150, marginLeft:-75, marginTop:-120}) 
}) 
}); 
_this.animation(obj2, {height:200}); 
}, 
hidden : function(obj1, obj2) 
{ 
var _this = this; 
_this.animation(obj1, {width:0, height:0, marginLeft:0, marginTop:0}); 
_this.animation(obj2, {height:0}); 
}, 
animation : function(obj, oAttr, fnCallBack) 
{ 
var _this = this; 
clearInterval(obj.timer); 
obj.timer = setInterval(function() 
{ 
var bStop = true; 
for(proper in oAttr) 
{ 

var iCur = parseFloat(_this.css(obj, proper)); 

proper == 'opacity' && (iCur = parseInt(iCur.toFixed(2) * 100)); 

var iSpeed = (oAttr[proper] - iCur) / 5; 

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); 

if(iCur != oAttr[proper]) 

{ 

bStop = false; 

_this.css(obj, proper, iCur + iSpeed); 

} 

} 

if(bStop) 

{ 

clearInterval(obj.timer); 

fnCallBack && fnCallBack.apply(_this, arguments); 

} 

},20); 

}, 

css : function(obj, attr, value) 

{ 

if(arguments.length == 2) 

{ 

return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle(obj, null)[attr] 

} 

if(arguments.length == 3) 

{ 

switch(attr) 

{ 

case 'width' : 

case 'height' : 

case 'top' : 

case 'bottom' : 

case 'left' : 

case 'marginLeft': 

case 'marginTop': 

obj.style[attr] = value + 'px'; 

break; 

case 'opacity' : 

obj.style.filter = 'alpha(opacity = '+value+' )'; 

obj.style.opacity = value / 100; 

break; 

default : 

obj.style[attr] = value; 

break; 

} 

} 

} 

}; 
window.onload = function() 
{ 
new kzxf_zoom('tab') 

}; 

</script> 
<br /> 
http://user.qzone.qq.com/1198772766 
</body> 
</html> 


相关阅读 :
JS下拉缓冲菜单示例代码
js+div+css下拉导航菜单完整代码分享
原生JavaScript实现动态省市县三级联动下拉框菜单实例代码
css结合js制作下拉菜单示例代码
js自动查找select下拉的菜单并选择(示例代码)
js下拉框二级关联菜单效果代码具体实现
js 下拉菜单实现代码
二级下拉式菜单之JS实现
原生js封装二级城市下拉列表的实现代码
js选择并转移导航菜单示例代码
js出生日期 年月日级联菜单示例代码
js下拉菜单语言选项简单实现
最新网友评论  共有(0)条评论 发布评论 返回顶部

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