这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
漂亮的鼠标提示,带人性化缺口,在测试时候大家可改变浏览器窗口大小,可以看到缺口会根据网页的大小智能改变方向,以确保提示位置的正确性,其实由此大家可以学习到更多的 JavaScript 与 CSS 代码知识。
- <!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>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <title>鼠标提示符</title>
- <style>
- * { padding: 0; margin: 0; }
- li { }
- body { background: #fdf7f7; }
- #explain { height: 60px; border-bottom: 1px solid #999999; background: #eee; font-size: 14px; color: #666; text-align: center; line-height: 60px; }
- #explain a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }
- #explain a:hover { border-bottom: 2px solid #990000; }
- #explain strong { color: #990000; }
- ul { width: 716px; position: absolute; top: 260px; left: 50%; margin-left: -358px; }
- li { width: 160px; height: 100px; list-style: none; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; float: left; margin-right: 10px; cursor: pointer; }
- img { float: left; }
- #topic { width: 270px; background: #fff; padding: 3px; border-top: 1px solid #ddd; border-right: 2px solid #ddd; border-bottom: 2px solid #ddd; border-left: 1px solid #ddd; position: absolute; top: 100px; left: 200px; }
- #topic .adorn { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729602.gif); position: absolute; bottom: 15px; left: -7px; }
- #topic .adorn_r { width: 7px; height: 11px; overflow: hidden; background: url(/upload/201011/20101103150729137.gif); position: absolute; bottom: 15px; right: -7px; }
- #topic .inner_html { padding: 10px; line-height: 20px; font-size: 12px; color: #666; text-indent: 24px; font-family: arial; }
- #topic .inner_html a { color: #990000; font-weight: bold; text-decoration: none; border-bottom: 1px dotted #990000; }
- #topic .inner_html a:hover { border-bottom: 2px solid #990000; }
- </style>
- <script type="text/javascript">
- var g_aData=
- [
- '石川(blue)为大家分享了以下内容:新浪微博效果、DOM、闭包使用技巧、面向对象、高级拖拽、运动特效、AJax、官网导航效果等^_^!',
- '课程内容特别精选了JavaScript的高级DOM操作、AJAX技术应用、OOP思想、继承等知识进行深度剖析,力图为学员揭秘各种网站交互效果,并帮助学员建立正确而清晰的编程思路……',
- '高级页面架构师精品课程是为了让大家制作出较为规范的页面,例如:符合 W3C 标准、标签语义化、模块化布局、能熟练解决浏览器兼容性、能洞晰 CSS 代码性能等问题的朋友们而设。通过这门课程,你可以充分了解到标准带来的好处、页面代码的简洁与 CSS 样式的高重用性……',
- '零基础网页制作精品课程站在完全不懂的学员角度考虑,在 课程安排、课后辅导 等几个方面着手,力求为学员带来一门系统化极强、讲解风格却通俗易懂的 精品入门课程,欢迎朋友们来试听,一探究竟!'
- ];
- var g_oTimerHide=null;
- window.onload=function ()
- {
- var aLi=document.getElementById('content').getElementsByTagName('li');
- bindTopic(aLi);
- };
- function bindTopic(aElement)
- {
- var i=0;
- for(i=0;i<aElement.length;i++)
- {
- aElement[i].miaovIndex=i;
- aElement[i].onmouseover=function (ev){showTopic(this.miaovIndex, window.event || ev);};
- aElement[i].onmouseout=function (){hideTopic();};
- aElement[i].onmousemove=function (ev)
- {
- var oEvent=window.event || ev;
- setPosition(oEvent.clientX, oEvent.clientY);
- };
- }
- }
- function showTopic(index, oEvent)
- {
- var oTopic=document.getElementById('topic');
- if(g_oTimerHide)
- {
- clearTimeout(g_oTimerHide);
- }
- oTopic.getElementsByTagName('div')[1].innerHTML=g_aData[index];
- oTopic.style.display='block';
- setPosition(oEvent.clientX, oEvent.clientY);
- }
- function hideTopic()
- {
- var oTopic=document.getElementById('topic');
- if(g_oTimerHide)
- {
- clearTimeout(g_oTimerHide);
- }
- g_oTimerHide=setTimeout
- (
- function ()
- {
- oTopic.style.display='none';
- },50
- );
- }
- function setPosition(x, y)
- {
- var top=document.body.scrollTop || document.documentElement.scrollTop;
- var left=document.body.scrollLeft || document.documentElement.scrollLeft;
- x+=left;
- y+=top;
- var oTopic=document.getElementById('topic');
- var l=x+20;
- var t=y-(oTopic.offsetHeight-20);
- var bRight=true;
- var iPageRight=left+document.documentElement.clientWidth;
- if(l+oTopic.offsetWidth>iPageRight)
- {
- bRight=false;
- l=x-(oTopic.offsetWidth+20);
- oTopic.getElementsByTagName('div')[0].className='adorn_r';
- }
- else
- {
- oTopic.getElementsByTagName('div')[0].className='adorn';
- }
- oTopic.style.left=l+'px';
- oTopic.style.top=t+'px';
- }
- </script>
- </head>
- <body>
- <div>可以调整窗口大小,再把鼠标移到图片上查看……</div>
- <div>
- <div></div>
- <div></div>
- </div>
- <ul id="content">
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_1/1490190370_4187.jpg" longdesc="#" data-src="" /></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_17/1490190371_4897.jpg" longdesc="#" data-src="" /></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_9/1490190373_6079.jpg" longdesc="#" data-src="" /></li>
- <li><img class="img-responsive" src="http://img.phperz.com/data/img/20170322_10/1490190374_5173.jpg" longdesc="#" data-src="" /></li>
- </ul>
- </body>
- </html>
(adsbygoogle = window.adsbygoogle || []).push({});
来源: http://www.phperz.com/article/17/0704/284009.html