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

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

收藏 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://cdn.zhanzhang360.cn/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://cdn.zhanzhang360.cn/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://cdn.zhanzhang360.cn/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://cdn.zhanzhang360.cn/imgupload/008689/wall_s4.jpg" alt="苹果 Mac"></a></li> </ul> </body> </html>

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

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

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

Vue组件选项props实例详解

javascript将url解析为json格式的两种方法

详解JS数组Reduce()方法详解及高级技巧

JS模拟超市简易收银台小程序代码解析

JavaScript 完成注册页面表单校验的实例

简单的网页广告特效实例

Vue内容分发slot(全面解析)

Vue自定义事件(详解)

Mui使用jquery并且使用点击跳转新窗口的实例

深入理解ES6的迭代器与生成器

网络赚钱

站长故事