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

来源：动视网责编：小采时间：2020-11-27 21:05:50

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

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

推荐度：

点击下载本文 文档为doc格式

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

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

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片提示效果</title> </ script> <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> $(function(){ var x = 10; var y = 20; $("a.tooltip").mouseover(function(e){ this.myTitle = this.title; this.title = ""; var imgTitle = this.myTitle?" "+ this.myTitle : ""; var tooltip = "<img src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\/div>"; //创建 div 元素 document.write(tooltip); $("body").append(tooltip); //把它追加到文档中 $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }).fadeIn(600); //设置x坐标和y坐标，并且显示 }).mouseout(function(){ this.title = this.myTitle; $("#tooltip").remove(); //移除 }).mousemove(function(e){ $("#tooltip").css({ "top": (e.pageY+y) + "px", "left": (e.pageX+x) + "px" }); }); }) </ script> </head> <body> <h3>效果</h3> <li><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s1.jpg" 苹果 iPod"></li> <li><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s2.jpg" 苹果 iPod nano"></li> <li><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s3.jpg" 苹果 iPone"></li> <li><img src="http://files.jb51.net/file_images/article/201212/picmove_2/wall_s4.jpg" 苹果 Mac"></li> </body> </html>
[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

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

推荐度：

点击下载本文 文档为doc格式

标签：显示的图片特效

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐