您的位置: 首页 > IT文章 > 网页特效 > JS实现鼠标移动到缩略图显示大图的图片放大效果

JS实现鼠标移动到缩略图显示大图的图片放大效果

分类: IT文章 • 2022-07-18 23:55:06

一个网页上用的图片提示效果，当把鼠标移动到图片缩略图的时候，会显示图片大图，似乎在网上这是个很常见的效果，实现方法也比较多，有人用CSS，有人用JavaScript，有人用jQuery，总之，选择自己习惯的方式去实现，就是最棒的。

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>图片提示效果</title>
<style type="text/css"> body{margin:0 ;padding:40px;line-height:180%;} img{border:none;} ul,li{margin:0 ;padding:0;} li{list-style:none;display:inline; border:1px solid #999;float:left; margin-right:10px;} /*tooltip*/ #tooltip{position:absolute;border:1px solid #CCC;display:none;color:#FFF; padding:2px; background:#333;} </style>
<h3>效果</h3> <ul>
<li><a class="tooltip" title="苹果 iPod"><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcuamJ6ai5jb20vZmlsZV9pbWFnZXMvYXJ0aWNsZS8yMDEyMTIvcGljbW92ZV8yL3dhbGxfczEuanBn" alt="JS实现鼠标移动到缩略图显示大图的图片放大效果" title="JS实现鼠标移动到缩略图显示大图的图片放大效果"></a></li> <li><a class="tooltip" title="苹果 iPod nano"><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcuamJ6ai5jb20vZmlsZV9pbWFnZXMvYXJ0aWNsZS8yMDEyMTIvcGljbW92ZV8yL3dhbGxfczIuanBn" alt="JS实现鼠标移动到缩略图显示大图的图片放大效果" title="JS实现鼠标移动到缩略图显示大图的图片放大效果"></a></li> <li><a class="tooltip" title="苹果 iPone"><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcuamJ6ai5jb20vZmlsZV9pbWFnZXMvYXJ0aWNsZS8yMDEyMTIvcGljbW92ZV8yL3dhbGxfczMuanBn" alt="JS实现鼠标移动到缩略图显示大图的图片放大效果" title="JS实现鼠标移动到缩略图显示大图的图片放大效果"></a></li> <li><a class="tooltip" title="苹果 Mac"><img onerror="this.src='/statics/wangyeyixia/images/image_error.jpg'"src="/default/index/img?u=aHR0cHM6Ly9pbWcuamJ6ai5jb20vZmlsZV9pbWFnZXMvYXJ0aWNsZS8yMDEyMTIvcGljbW92ZV8yL3dhbGxfczQuanBn" alt="JS实现鼠标移动到缩略图显示大图的图片放大效果" title="JS实现鼠标移动到缩略图显示大图的图片放大效果"></a></li> </ul>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]