JS函数实现鼠标指向后带图片的提示效果

87年的老头

87年的老头

2016-02-19 19:37

下面图老师小编跟大家分享一个简单易学的JS函数实现鼠标指向后带图片的提示效果教程,get新技能是需要行动的,喜欢的朋友赶紧收藏起来学习下吧!

  当鼠标移到产品缩略图上时能弹出显示大图,用JS写两个函数即可实现:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  一个函数在鼠标移到图片上调用,显示隐藏层并将图片载入到层中;

  另一个函数在鼠标移出图片上调用,清空层的内容并隐藏层。使用时需将"this.src"改为产品大图地址。

以下是引用片段:
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
titleJS函数实现鼠标指向后带图片的提示效果/title
script language="javascript"
function showPic(sUrl){
 var x,y;
 x = event.clientX;
 y = event.clientY;
 document.getElementById("Layer1").style.left = x;
 document.getElementById("Layer1").style.top = y;
 document.getElementById("Layer1").innerHTML = "img src="" + sUrl + """;
 document.getElementById("Layer1").style.display = "block";
}
function hiddenPic(){
 document.getElementById("Layer1").innerHTML = "";
 document.getElementById("Layer1").style.display = "none";
}
/script
/head
body
div id="Layer1" style="display:none;position:absolute;z-index:1;"/div
img src="/images/Logo.gif" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /
p/p
img src="/img/200406301.jpg" onmouseout="hiddenPic();" onmousemove="showPic(this.src);" /
/body
/html

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)
展开更多 50%)
分享

猜你喜欢

JS函数实现鼠标指向后带图片的提示效果

Web开发
JS函数实现鼠标指向后带图片的提示效果

js实现图片显示局部鼠标经过显示全部的效果

Web开发
js实现图片显示局部鼠标经过显示全部的效果

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Word2010如何实现鼠标指向自动显示提示文字

电脑入门
Word2010如何实现鼠标指向自动显示提示文字

js实现的很酷的连接提示效果

Web开发
js实现的很酷的连接提示效果

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JS实现仿新浪信息提示效果

电脑网络
JS实现仿新浪信息提示效果

如何实现JS函数的重载

Web开发
如何实现JS函数的重载

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

解析SQL Server 2008中的新语句:MERGE

解析SQL Server 2008中的新语句:MERGE

Windows 7右下角网络图标异常

Windows 7右下角网络图标异常
下拉加载更多内容 ↓