鼠標(biāo)移動(dòng)到圖片名上,顯示圖片的簡(jiǎn)單實(shí)例
做法:新建 a.html 和 一個(gè)待顯示圖片 wait.gif 放在同一目錄下,
a.html 代碼如下:
<!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實(shí)現(xiàn)的格式化數(shù)字和金額功能簡(jiǎn)單示例
這篇文章主要介紹了js實(shí)現(xiàn)的格式化數(shù)字和金額功能,結(jié)合簡(jiǎn)單實(shí)例形式分析了javascript數(shù)字字符串轉(zhuǎn)換、運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2019-07-07JavaScript之Blob對(duì)象類型的具體使用方法
這篇文章主要介紹了JavaScript之Blob對(duì)象類型的具體使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11JavaScript獲得當(dāng)前網(wǎng)頁(yè)來(lái)源頁(yè)面(即上一頁(yè))的方法
這篇文章主要介紹了JavaScript獲得當(dāng)前網(wǎng)頁(yè)來(lái)源頁(yè)面(即上一頁(yè))的方法,涉及javascript中document.referrer方法的使用技巧,需要的朋友可以參考下2015-04-04微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏
這篇文章主要介紹了微信小程序分享功能之按鈕button 邊框隱藏和點(diǎn)擊隱藏,需要的朋友可以參考下2018-06-06javascript中Date format(js日期格式化)方法小結(jié)
這篇文章主要介紹了javascript中Date format,即js日期格式化的方法.實(shí)例總結(jié)了三種常見(jiàn)的JavaScript日期格式化技巧,需要的朋友可以參考下2015-12-12js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)鼠標(biāo)移入移出卡片切換內(nèi)容,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-10-10FireFox與IE 下js兼容觸發(fā)click事件的代碼
FireFox與IE 下js兼容觸發(fā)click事件 ,對(duì)于需要兼容這兩者的朋友,就需要參考下下面的代碼了2008-11-11