js鼠標(biāo)移動(dòng)在title中顯示圖片的效果代碼
更新時(shí)間:2009年11月29日 21:47:31 作者:
當(dāng)鼠標(biāo)移動(dòng)時(shí),在title提示框中,顯示出設(shè)定的圖片。
1.js代碼
//***********默認(rèn)設(shè)置定義.*********************
tPopWait=50;//停留tWait豪秒后顯示提示。
tPopShow=5000;//顯示tShow豪秒后關(guān)閉提示
showPopStep=20;
popOpacity=99;
//***************內(nèi)部變量定義*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css' id='defaultPopStyle'>");
document.write(".cPopText { line-break : normal;word-break : break-all ; background-color: #FEFCF3;color:#000000; border: 1px #E7B68C solid;padding-top: 2px; padding-right: 4px; padding-left: 4px; padding-bottom: 2px;font-size: 12px;width:468px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
2.html代碼包含js代碼即可,使用范例
具體的看腳本之家給出的測試代碼。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
復(fù)制代碼 代碼如下:
//***********默認(rèn)設(shè)置定義.*********************
tPopWait=50;//停留tWait豪秒后顯示提示。
tPopShow=5000;//顯示tShow豪秒后關(guān)閉提示
showPopStep=20;
popOpacity=99;
//***************內(nèi)部變量定義*****************
sPop=null;
curShow=null;
tFadeOut=null;
tFadeIn=null;
tFadeWaiting=null;
document.write("<style type='text/css' id='defaultPopStyle'>");
document.write(".cPopText { line-break : normal;word-break : break-all ; background-color: #FEFCF3;color:#000000; border: 1px #E7B68C solid;padding-top: 2px; padding-right: 4px; padding-left: 4px; padding-bottom: 2px;font-size: 12px;width:468px; filter: Alpha(Opacity=0)}");
document.write("</style>");
document.write("<div id='dypopLayer' style='position:absolute;z-index:1000;' class='cPopText'></div>");
function showPopupText(){
var o=event.srcElement;
MouseX=event.x;
MouseY=event.y;
if(o.alt!=null && o.alt!=""){o.dypop=o.alt;o.alt=""};
if(o.title!=null && o.title!=""){o.dypop=o.title;o.title=""};
if(o.dypop!=sPop) {
sPop=o.dypop;
clearTimeout(curShow);
clearTimeout(tFadeOut);
clearTimeout(tFadeIn);
clearTimeout(tFadeWaiting);
if(sPop==null || sPop=="") {
dypopLayer.innerHTML="";
dypopLayer.style.filter="Alpha()";
dypopLayer.filters.Alpha.opacity=0;
}
else {
if(o.dyclass!=null) popStyle=o.dyclass
else popStyle="cPopText";
curShow=setTimeout("showIt()",tPopWait);
}
}
}
function showIt(){
dypopLayer.className=popStyle;
dypopLayer.innerHTML=sPop;
popWidth=dypopLayer.clientWidth;
popHeight=dypopLayer.clientHeight;
if(MouseX+12+popWidth>document.body.clientWidth) popLeftAdjust=-popWidth-24
else popLeftAdjust=0;
if(MouseY+12+popHeight>document.body.clientHeight) popTopAdjust=-popHeight-24
else popTopAdjust=0;
dypopLayer.style.left=MouseX+12+document.body.scrollLeft+popLeftAdjust;
dypopLayer.style.top=MouseY+12+document.body.scrollTop+popTopAdjust;
dypopLayer.style.filter="Alpha(Opacity=0)";
fadeOut();
}
function fadeOut(){
if(dypopLayer.filters.Alpha.opacity<popOpacity) {
dypopLayer.filters.Alpha.opacity+=showPopStep;
tFadeOut=setTimeout("fadeOut()",1);
}
else {
dypopLayer.filters.Alpha.opacity=popOpacity;
tFadeWaiting=setTimeout("fadeIn()",tPopShow);
}
}
function fadeIn(){
if(dypopLayer.filters.Alpha.opacity>0) {
dypopLayer.filters.Alpha.opacity-=1;
tFadeIn=setTimeout("fadeIn()",1);
}
}
document.onmouseover=showPopupText;
2.html代碼包含js代碼即可,使用范例
具體的看腳本之家給出的測試代碼。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
您可能感興趣的文章:
- js控制鼠標(biāo)事件移動(dòng)及移出效果顯示
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)到縮略圖顯示大圖的圖片放大效果
- javascript實(shí)現(xiàn)圖片跟隨鼠標(biāo)移動(dòng)效果的方法
- js鼠標(biāo)移動(dòng)時(shí)禁止選中文字
- js+html+css實(shí)現(xiàn)鼠標(biāo)移動(dòng)div實(shí)例
- JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
- js實(shí)現(xiàn)鼠標(biāo)左右移動(dòng),圖片也跟著移動(dòng)效果
- js實(shí)現(xiàn)文字跟隨鼠標(biāo)移動(dòng)而移動(dòng)的方法
- js圖片跟隨鼠標(biāo)移動(dòng)代碼
- JS實(shí)現(xiàn)鼠標(biāo)移動(dòng)拖尾
相關(guān)文章
SuperSlide2實(shí)現(xiàn)圖片滾動(dòng)特效
SuperSlide2,實(shí)現(xiàn)圖片滾動(dòng),感覺很強(qiáng)大,這里只是簡單的演示其中一種類型,想看更多類型的話,可以去http://www.superslide2.com 查看,2014-06-06
ImageFlow可鼠標(biāo)控制圖片滾動(dòng)
大家以前看到的都是FLASH,現(xiàn)在看看JS也來做。 提示:支持鍵盤左右鍵。拉條可以快速瀏覽。2008-01-01
javascript 放大鏡效果js組件 qsoft.PopBigImage.v0.35 加入了chrome支持
一般頁面的的圖片為了布局考慮,顯示大小都小于實(shí)際大小。 鼠標(biāo)在圖片上移動(dòng)時(shí),在旁邊展示一個(gè)跟此圖片顯示大小一樣的層。并講鼠標(biāo)附近區(qū)域?qū)?yīng)的原始圖片的區(qū)域按原始大小顯示在這個(gè)層中。2009-04-04
簡單的實(shí)現(xiàn)點(diǎn)擊箭頭圖片切換的js代碼
這個(gè)是一個(gè)簡單的點(diǎn)擊箭頭圖片切換的例子。JS部分采用過的是jQuery2012-11-11
js實(shí)現(xiàn)運(yùn)動(dòng)logo圖片效果及運(yùn)動(dòng)元素對象sportBox使用方法
Js實(shí)現(xiàn)運(yùn)動(dòng)的圖片特效,兩個(gè)網(wǎng)站Logo快速運(yùn)動(dòng)類似顯示器屏保。借此練習(xí)運(yùn)動(dòng)元素對象sportBox的使用方法,需要了解的朋友可以參考下2012-12-12
在頁面預(yù)覽客戶端本地圖片的js代碼(兼容FF IE)
IE為了安全是不允許頁面預(yù)覽客戶端本地圖片的,也就是img元素的SRC是相對路徑 不可能是絕對路徑的 為了達(dá)成這一需求 需要使用濾鏡2012-05-05

