学习啦 > 学习电脑 > 电脑硬件知识 > 键盘鼠标 > css实现鼠标移动到图片上,显示图片

css实现鼠标移动到图片上,显示图片

时间: 沈迪豪908 分享

css实现鼠标移动到图片上,显示图片

  学习网页制作的你们知道怎么实现鼠标移动到名(wait.gif)上,显示图片,鼠标移开则不显示图片的效果吗?不知道的话跟着学习啦小编一起来学习实现鼠标移动图片上显示的效果吧。

  鼠标移动到名(wait.gif)上,显示图片,鼠标移开则不显示图片的实现方法

  做法:新建 a.html 和 一个待显示图片 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 = './'; //图片相对路径

  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>

猜你喜欢:

1.css鼠标样式

2.CSS怎么控制鼠标形状

3.互联网个人简历免费模板

4.css怎么设置鼠标沙漏形状

5.css怎么改变鼠标样式

6.css怎么设置鼠标形状

7.css怎么设置鼠标手势

1950530