15JavaScript案例----鼠标移动到超链接上时显示图片 

 1 <html xmlns="http://www.w3.org/1999/xhtml">
 2 <head>
 3 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 4     <title></title>
 5     <script type="text/javascript">
 6         onload = function () {
 7 
 8             document.getElementById('al').onmouseenter = function () {
 9                 //创建单一的div
10                 if (!document.getElementById('dv')) {//不存在的时候才创建
11                     //alert('进来了么');
12                     //创建一个div层来放img
13                     var divObj = document.createElement('div');
14                     divObj.id = 'dv';
15 
16                     //创建一个img
17                     var imgObj = document.createElement('img');
18                     divObj.appendChild(imgObj);
19                     imgObj.src = '小赵.jpg';
20 
21                     //设置图片的位置
22                     divObj.style.position = 'absolute';//脱离文档流
23                     divObj.style.left = this.offsetLeft + 'px';
24                     divObj.style.top = this.offsetTop + this.offsetHeight + 'px';
25                     //body加入div层
26                     document.body.appendChild(divObj);
27                 };
28             };
29             document.getElementById('al').onmouseleave = function () {
30                 //alert('离开了么');
31                 //移除div元素
32                 if (document.getElementById('dv')) {
33                     document.body.removeChild(document.getElementById('dv'));
34                 };
35                 
36             };
37             
38         };
39 
40 
41     </script>
42 
43 </head>
44 <body>
45    <p>从前有座 <a id="al" href="http://www.baidu.com" target="_blank">山，山里有座庙，</a>庙里有对和尚尼姑。。。 </p>
46     
47 </body>
48 </html>

 

posted on 2016-01-08 11:00  努力的活着_在人间  阅读(587)  评论(0)    收藏  举报

导航