这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
还好网上什么都有,上网找了一个浏览器兼容性最佳的函数,经测试兼容 IE、FireFox、Chrome,并且不会有滚动条误差问题,存档下,以备后用 :)
下午想做个鼠标跟随的 JS 脚本,发现浏览器兼容问题还真是烦人,还有滚动条位置的问题。
- function mousePos(e){
- var x,y;
- var e = e||window.event;
- return {
- x:e.clientX+document.body.scrollLeft+document.documentElement.scrollLeft,
- y:e.clientY+document.body.scrollTop+document.documentElement.scrollTop
- };
- }
注:此函数配合 onmousemove 事件使用。 函数出处:鼠标跟随提示框 by nunumick
[Ctrl+A 全选 注:
- <!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>
- <title>
- 鼠标跟随提示框
- </title>
- <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
- <style type="text/CSS">
- body{font:12px/1.8 arial;} a,a:visited{color:#3366cc;text-decoration:none;}
- a:hover{color:#f60;text-decoration:underline;} .tip{width:200px;border:2px
- solid #ddd;padding:8px;background:#f1f1f1;color:#666;} img{border:none;}
- </style>
- <script type="text/javascript">
- var tip = {
- $: function(ele) {
- if (typeof(ele) == "object") return ele;
- else if (typeof(ele) == "string" || typeof(ele) == "number") return document.getElementById(ele.toString());
- return null;
- },
- mousePos: function(e) {
- var x, y;
- var e = e || window.event;
- return {
- x: e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
- y: e.clientY + document.body.scrollTop + document.documentElement.scrollTop
- };
- },
- start: function(obj) {
- var self = this;
- var t = self.$("mjs:tip");
- obj.onmousemove = function(e) {
- var mouse = self.mousePos(e);
- t.style.left = mouse.x + 10 + 'px';
- t.style.top = mouse.y + 10 + 'px';
- t.innerHTML = obj.getAttribute("tips");
- t.style.display = '';
- }
- obj.onmouseout = function() {
- t.style.display = 'none';
- }
- }
- }
- </script>
- </head>
- <body>
- <ol>
- <li>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_20/1490191948_2640.gif"
- onmouseover="tip.start(this)" tips="JQuery获取元素文档大小、偏移和位置和滚动条位置的 " />
- </li>
- <li>
- <a href="/article/16/0821/285780.html" target="_blank" onmouseover="tip.start(this)"
- tips="Javascript 实现TreeView CheckBox全选效果 ……">
- 关于用户研究的一点思考
- </a>
- </li>
- <li>
- <a href="/article/16/0821/285782.html" target="_blank" onmouseover="tip.start(this)"
- tips="JavaScript 学习笔记(九)call和apply方法 ……">
- web重构拾趣
- </a>
- </li>
- </ol>
- <div>
- </div>
- </body>
- </html>
如需引入外部 Js 需刷新才能执行
]来源: http://www.phperz.com/article/17/0414/285774.html