JavaScript 제목, 소스 코드 해석_javascript 기술 달성을 위한 대체 프롬프트(팁)

이미지 태그 img에도 비슷한 역할을 할 수 있는 alt 속성이 있습니다. 그러나 이러한 종류의 프롬프트 상자는 너무 단조롭기 때문에 누군가 JavaScript를 사용하여 아름다운 프롬프트 상자 효과를 얻었습니다. 이 효과는 웹 게임에서 일반적으로 사용됩니다. 아래 그림에서는 이 효과를 사용합니다. 서로 구현 효과에는 약간의 차이가 있지만 전체적인 구현 아이디어는 변경되지 않습니다. 모든 사람이 구현 세부 사항을 쉽게 이해하고 원하는 효과를 사용자 정의할 수 있도록 온라인에서 좋은 소스 코드를 찾아 자세히 설명했습니다. 모든 사람에게 도움이 되기를 바랍니다.

　

댓글 달린 코드:

코드 복사 코드는 다음과 같습니다. 다음과 같습니다:

/***********************************************
　　一个JavaScript Title、alt提示（Tips）源码解读
代码注释：唐国辉
作者博客：http://webflash.cnblogs.com
***********************************************/

//定义getElementById快捷方式
function $(obj)
{
if(typeof(obj)=='object')
{
return obj;
}
else
{
return document.getElementById(obj);
}
}
//定义document.write快捷方式,代替复杂的DOM操作
function $P(str)
{
document.write(str);
}
//脚本错误屏蔽
window.onerror=function ()
{
return true;
};
/*
定义变量：
pltsPop（提示内容文字，来自对象的alt或title属性，不包含HTML）
toolTip（提示内容DOM对象，即后面定义的content变量）
pltsPoptop（上方提示标题DOM对象）
pltsPopbot（下方提示标题DOM对象）
topLeft（左上角提示标题DOM对象）
botLeft（左下方提示标题DOM对象）
topRight（右上角提示标题DOM对象）
botRight（右下方提示标题DOM对象）
*/
var pltsPop,toolTip,pltsPoptop,pltsPopbot,topLeft,botLeft,topRight,botRight;
//设置提示窗口相对提示对象的位置偏移量
var pltsoffsetX=10;
var pltsoffsetY=15;
var pltsTitle="";
//创建一个绝对定位的隐藏图层
$P('

');
//把刚创建的层对象赋值给一个变量，此语句一定要出现在层创建之后
var pltsTipLayer=$('pltsTipLayer');
//定义鼠标移到对象上时处理函数，主要提取alt或title属性值，并初始化提示框HTML及样式
function PltsMouseOver(ev)
{
//兼容不同浏览器的事件和对象获取
var Event=window.event||ev;
var o=Event.srcElement||Event.target;
//如果对象alt属性存在并且不等于空，就把它的值存到dypop属性，并清空当前alt内容
if(o.alt!=null&&o.alt!="")
{
o.dypop=o.alt;
o.alt="";
}
//如上，对具有title属性的对象作同样的判断和处理，清空title属性值是让对象默认的提示效果失效
if(o.title!=null&&o.title!="")
{
o.dypop=o.title;
o.title="";
}
pltsPop=o.dypop;
if(pltsPop!=null&&pltsPop!=""&&typeof(pltsPop)!="undefined")
{
//把上面创建的提示层显示出来，暂时移到左边很远，虽然显示但用户看不到
pltsTipLayer.style.left=-1000;
pltsTipLayer.style.display='';
/*
格式化提示信息，把其中的\n换成
，比如像下面这样定义title值，显示出来会是作者和性别各一行，因为Tom和Sex之间有 ：

Article title...

*/
var Msg=pltsPop.replace(/n/g,"
")
Msg=Msg.replace(/
//종합 처리를 통해 얻은 프롬프트 상자의 최종 위치 값을 객체에 설정합니다. 여기서 scrollTop은 스크롤되는 웹 페이지의 높이입니다. style.top은 브라우저 창이 아닌 전체 문서에 상대적이므로, 스크롤 및 숨기기가 포함되어야 합니다.
pltsTipLayer.style.left=MouseX pltsoffsetX document.documentElement.scrollLeft popLeftAdjust "px";
pltsTipLayer.style.top=MouseY pltsoffsetY document.documentElement.scrollTop popTopAdjust "px"; 🎜 >return true;
}
//이벤트 바인딩 함수 정의
function PltsInit()
{
document.onmouseover=PltsMouseOver;
document.onmousemove
}
//이벤트 바인딩 함수 호출
PltsInit();

호출 방법: 위 코드를 외부 독립 JS 파일에 저장한 후 웹 페이지에 포함시킵니다. 이 JS 파일에서 마지막으로 메시지가 표시되어야 하는 개체에 title 속성을 추가하면 이미지에 alt 속성을 추가할 수 있습니다. 예: 약어 제목 또는

관련 링크:

1, http://www.cnblogs.com/czh-liyu/archive/2007/12/30/1021146.html
2. http://boxover.swazz.org
3. http://blog.csdn.net/lanmao100/archive/2008/10/31/3191767.aspx