鼠標(biāo)移動(dòng)到圖片名上,顯示圖片的簡(jiǎn)單實(shí)例
更新時(shí)間：2013年07月14日 15:40:51 作者：
鼠標(biāo)移動(dòng)到名(wait.gif)上，顯示圖片，鼠標(biāo)移開則不顯示圖片
做法：新建 a.html 和 一個(gè)待顯示圖片 wait.gif 放在同一目錄下，
a.html 代碼如下：
復(fù)制代碼 代碼如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript">
var path = './'; //圖片相對(duì)路徑
function show(obj) {
var name = obj.innerText;
var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判斷
if (!sDiv) {
sDiv = document.createElement("DIV");
sDiv.id = 'img_' + name.split('.')[0];
sDiv.style.position = 'absolute';
sDiv.style.top = obj.offsetTop + obj.offsetWidth + 'px';
sDiv.style.left = obj.offsetLeft +obj.offsetHeight + 'px';
sDiv.style.border = '1px red solid';
var img = document.createElement("img");
img.src = path + name;
sDiv.appendChild(img);
document.body.appendChild(sDiv);
}
sDiv.style.display = 'block';
}
function f(obj) {
var name = obj.innerText;
var sDiv = document.getElementById('img_' + name.split('.')[0]);//文件名自己判斷
if (sDiv) {
sDiv.style.display = 'none';
}
}
</script>
</head>
<body>
<div onmouseover="show(this)" onmouseout="f(this)" style="position:absolute;">
wait.gif
</div>
</body>
</html>
相關(guān)文章
這篇文章主要介紹了js仿百度貼吧驗(yàn)證碼特效實(shí)例代碼，有需要的朋友可以參考一下2014-01-01
這篇文章主要介紹了js控制多圖左右滾動(dòng)切換效果，很實(shí)用的代碼，推薦給大家，有需要的小伙伴可以參考下。2015-08-08
這篇文章主要介紹了js實(shí)現(xiàn)雙擊圖片放大單擊縮小的方法,涉及js操作圖片及onclick與ondblclick事件的使用技巧,需要的朋友可以參考下2015-02-02
這篇文章主要介紹了javascript自定義的addClass()方法，通過(guò)傳參就可以實(shí)現(xiàn)樣式的添加2014-05-05
layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法舉例
這篇文章主要給大家介紹了關(guān)于layer.open屬性詳解及l(fā)ayer.open彈出框使用post方法的相關(guān)資料,最近接觸到layer彈窗,感覺(jué)彈窗功能異常強(qiáng)大,真的很方便,所以記錄下來(lái),需要的朋友可以參考下2023-12-12
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多行文字滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了nodejs分離html文件里面的js和css的方法，本文需要分離出一個(gè)html 文件里面的script 和style 里面的內(nèi)容，然后單獨(dú)生成js文件和css 文件，感興趣的可以了解一下2019-04-04
今天小編就為大家分享一篇layui獲取多選框中的值方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
js實(shí)現(xiàn)超簡(jiǎn)單的展開、折疊目錄代碼
這篇文章主要介紹了js實(shí)現(xiàn)超簡(jiǎn)單的展開、折疊目錄代碼,通過(guò)javascript操作鼠標(biāo)點(diǎn)擊事件控制頁(yè)面元素樣式的動(dòng)態(tài)改變實(shí)現(xiàn)該功能,非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2015-08-08
這篇文章主要介紹了js獲取本機(jī)操作系統(tǒng)類型的方法,需要的朋友可以參考下2015-12-12