发布于 2017-01-09 13:24:39 | 12 次阅读 | 评论: 0 | 来源: 网友投递

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

JavaScript客户端脚本语言

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


本文章来给各位同学介绍一款不错的Js点击弹出下拉菜单效果代码,这种效果有点像支付宝的下拉菜单,有需要了解的朋友可参考。

<STYLE type=text/css> 
.menu { BORDER-RIGHT: #006080 2px solid; BORDER-TOP: #80e0ff 2px solid; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #80e0ff 2px solid; BORDER-BOTTOM: #006080 2px solid; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #40a0c0 } 
A.menuItem { BORDER-RIGHT: #000000 0px solid; PADDING-RIGHT: 12px; BORDER-TOP: #000000 0px solid; DISPLAY: block; PADDING-LEFT: 8px; FONT-WEIGHT: bold; FONT-SIZE: 8pt; PADDING-BOTTOM: 2px; BORDER-LEFT: #000000 0px solid; CURSOR: default; COLOR: #ffffff; PADDING-TOP: 2px; BORDER-BOTTOM: #000000 0px solid; FONT-FAMILY: MS Sans Serif, Arial, Tahoma, sans-serif; TEXT-DECORATION: none } 
A.menuItem:hover { COLOR: #ffff00; BACKGROUND-COLOR: #004060 } 
</STYLE> 
<DIV class=menu id=myMenu><A class=menuItem 
href="http://www.phperz.com">phperz</A> <A class=menuItem 
href="http://www.baidu.com">百度</A> <A class=menuItem 
href="">网 易</A> <A class=menuItem 
href="">江苏音符</A> <A class=menuItem 
href="">央视国际</A> </DIV> 
<P><font onclick="openMenu(event, 'myMenu');return false;">点击打开菜单</font></P> 
<SCRIPT type=text/javascript> 
document.getElementById("myMenu").onmouseout = closeMenu; 
function openMenu(event, id) { 
var el, x, y; 
el = document.getElementById(id); 
if (window.event) { 
x = window.event.clientX + document.documentElement.scrollLeft 
+ document.body.scrollLeft; 
y = window.event.clientY + document.documentElement.scrollTop + 
+ document.body.scrollTop; 
} 
else { 
x = event.clientX + window.scrollX; 
y = event.clientY + window.scrollY; 
} 
x -= 2; y -= 2; 
el.style.left = x + "px"; 
el.style.top = y + "px"; 
el.style.visibility = "visible"; 
} 
function closeMenu(event) { 
var current, related; 
if (window.event) { 
current = this; 
related = window.event.toElement; 
} 
else { 
current = event.currentTarget; 
related = event.relatedTarget; 
} 
if (current != related && !contains(current, related)) 
current.style.visibility = "hidden"; 
} 
function contains(a, b) { 
// Return true if node a contains node b. 
while (b.parentNode) 
if ((b = b.parentNode) == a) 
return true; 
return false; 
} 
</SCRIPT> </td>
   </tr>
 </table>


相关阅读 :
Js点击弹出下拉菜单效果实例
js 单击式的下拉菜单效果实例
js点击弹出div层实现可拖曳的弹窗效果
基于JavaScript实现图片点击弹出窗口而不是保存
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
javascript仿京东导航左侧分类导航下拉菜单效果
js实现点击左右按钮轮播图片效果实例
js点击更换背景颜色或图片的实例代码
中国地区三级联动下拉菜单效果分析
搜集了几个不错的下拉菜单效果
下拉菜单点击实现连接跳转功能的js代码
js点击文本框弹出可选择的checkbox复选框
最新网友评论  共有(0)条评论 发布评论 返回顶部

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