教程集 > jQuery > jquery 教程 > 正文 javascript鼠标经过显示图片的提示效果

javascript鼠标经过显示图片的提示效果

发布时间：2023-12-20 编辑：jiaochengji.com

教程集为您提供javascript鼠标经过显示图片的提示效果等资源，欢迎您收藏本站，我们将为您提供最新的javascript鼠标经过显示图片的提示效果资源

经常可以看到很多网站有鼠标经过文字给一个图片提示效果，本实现就是利用js来实现鼠标经过显示图片的提示效果，有需要的朋友可参考一下。

提示：您可以先修改部分代码再运行

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>javascript鼠标经过显示图片的提示效果</title>  <meta http-equiv="content-type" content="text/html;charset=gb2312">    <style type="text/css">   body,div,h2,ul,li{margin:0;padding:0;}  body{font:12px/1.5 Tahoma;}  ul{list-style-type:none;}  #outer{width:560px;border:1px solid #333;margin:10px auto;padding:0 0 10px 10px;}  #outer h2{line-height:30px;text-align:center;margin-top:10px;}  #outer ul:after{content:".";display:block;height:0;clear:both;visibility:hidden;}  #outer ul{zoom:1;}  #outer ul li{position:relative;float:left;border:1px solid #333;margin:10px 10px 0 0;display:inline;}  #outer ul li img{position:absolute;top:-14px;left:-14px;display:none;border:2px solid #999;cursor:crosshair;}  #outer ul li a{color:#666;width:80px;height:80px;display:block;background:#f0f0f0;text-decoration:none;padding:10px;}  #outer ul li a strong{display:block;}  .zindex{z-index:1;}  </style>  <script type="text/javascript">   window.onload = function ()  {  	var oLi = document.getElementsByTagName("li");  	var oA = document.getElementsByTagName("a");  	var oImg = document.getElementsByTagName("img");  	for (var i = 0; i < oLi.length; i  )  	{  		oA[i].index = oImg[i].index = i;  		oA[i].onmouseover = function() {  			oLi[this.index].className = "zindex";  			oImg[this.index].style.display = "block"  		};  		oA[i].onmouseout = function ()  		{  			oLi[this.index].className = "";  			oImg[this.index].style.display = "none"  		};  		oImg[i].onmouseover = function()  		{  			oLi[this.index].className = "zindex";  			this.style.display = "block"  		};  		oImg[i].onmouseout = function()  		{  			oLi[this.index].className = "";  			this.style.display = "none"  		}  	}  }  </script>  </head>  <body>    <div id="outer">      <h2>名车车标展示-鼠标移过显示车标</h2>      <ul>          <li>              <strong>BMW</strong>宝马汽车              <img src="http://p1.jquerycn.cn/111cn/c/8/1474564775_8586.jpg" alt="BMW 宝马汽车">          </li>          <li>              <strong>Alfa Romeo</strong> 阿尔法-罗米欧              <img src="http://p1.jquerycn.cn/111cn/f/0/1474564775_8250.jpg" alt="Alfa Romeo 阿尔法-罗米欧">          </li>          <li>              <strong>Skoda</strong> 斯柯达              <img src="http://p1.jquerycn.cn/111cn/7/0/1474564775_6239.jpg" alt="Skoda 斯柯达">          </li>          <li>              <strong>Volkswagen</strong> 大众汽车              <img src="http://p1.jquerycn.cn/111cn/1/5/1474564775_1082.jpg" alt="Volkswagen 大众汽车">          </li>          <li>              <strong>Saab</strong> 萨布牌轿车              <img src="http://p1.jquerycn.cn/111cn/a/9/1474564776_4072.jpg" alt="Saab 萨布牌轿">          </li>          <li>              <strong>Lamborghini</strong> 兰博基尼              <img src="http://p1.jquerycn.cn/111cn/6/1/1474564776_6253.jpg" alt="Lamborghini 兰博基尼">          </li>          <li>              <strong>Porsche</strong> 保时捷              <img src="http://p1.jquerycn.cn/111cn/0/0/1474564776_6199.jpg" alt="Porsche 保时捷">          </li>          <li>              <strong>Peugeot</strong> 标致              <img src="http://p1.jquerycn.cn/111cn/b/5/1474564776_9786.jpg" alt="Peugeot 标致">          </li>          <li>              <strong>Mercedes1</strong> 梅赛德斯 奔驰              <img src="http://p1.jquerycn.cn/111cn/b/5/1474564777_8172.jpg" alt="Mercedes1 梅赛德斯 奔驰">          </li>          <li>              <strong>Buick</strong> 别克汽车              <img src="http://p1.jquerycn.cn/111cn/4/8/1474564777_6492.jpg" alt="Buick 别克汽车">          </li>      </ul>  </div>  </body>  </html></td>  	  </tr>  	</table>

提示：您可以先修改部分代码再运行

您可能感兴趣的文章：
jQuery图片效果切换 Adipoli
jQuery.jImageLink
jQuery当鼠标悬停时放大图片的效果实例
 jQuery图片放大插件 hoverpluse
jQuery图片预览插件 imgPreview
js 实用漂亮的图文并排列表效果
 jQuery图片幻灯手风琴效果插件 Slidorion
jQuery Lightbox 图片展示插件使用说明
 javascript特效-跟着鼠标飞的图片
 jquery插件实现鼠标经过图片右侧显示大图的效果(类似淘宝)

上一篇：javascript中鼠标移动到文本上弹出可移动可关闭窗口层的代码下一篇：状态栏显示标准时钟

[关闭]

javascript鼠标经过显示图片的提示效果

最近更新

浏览排行