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

所属分类：网络编程 / JavaScript 阅读数： 968

收藏 0赞 0分享

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片提示效果</title>    </head> <body> <h3>效果</h3> <ul> <li><a class="tooltip" title="苹果 iPod" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall1.jpg"><img src="https://zhanzhang360.qulang.net/imgupload/008689/wall_s1.jpg" alt="苹果 iPod"></a></li> <li><a class="tooltip" title="苹果 iPod nano" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall2.jpg"><img src="https://zhanzhang360.qulang.net/imgupload/008689/wall_s2.jpg" alt="苹果 iPod nano"></a></li> <li><a class="tooltip" title="苹果 iPone" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall3.jpg"><img src="https://zhanzhang360.qulang.net/imgupload/008689/wall_s3.jpg" alt="苹果 iPone"></a></li> <li><a class="tooltip" title="苹果 Mac" href="//img.jbzj.com/file_images/article/201212/picmove_2/wall4.jpg"><img src="https://zhanzhang360.qulang.net/imgupload/008689/wall_s4.jpg" alt="苹果 Mac"></a></li> </ul> </body> </html>

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

更多精彩内容其他人还在看

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

JavaScript this关键字指向常用情况解析

Vue-cli打包后如何本地查看的操作

vue cli 3.0通用打包配置代码,不分一二级目录

JavaScript事件循环及宏任务微任务原理解析

关于vue-cli3打包代码后白屏的解决方案

vue打包静态资源后显示空白及static文件路径报错的解决

vue-cli3访问public文件夹静态资源报错的解决方式

JS继承实现方法及优缺点详解

vue或react项目生产环境去掉console.log的操作

解决vue组件没显示,没起作用,没报错,但该显示的组件没显示问题

网络赚钱

站长故事