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

时间:2020-05-13 人气: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> 
<script type="text/javascript" src="http:/https://img.qb5200.com/download-x/demo.jb51.net/jslib/jquery/jquery1.3.2.js"></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> 
<script type="text/javascript"> 
$(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 = "<div><img onerror="javascript:this.src='/skin1/img/error.jpg';" src='"+ this.href +"' alt='产品预览图'/>"+imgTitle+"<\https://img.qb5200.com/download-x/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> 
<ul> 
<li><a class="tooltip" title="苹果 iPod" href="https://img.jbzj.com/file_images/article/201212/picmove_2/wall1.jpg"><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200513/33925.jpg" alt="苹果 iPod"></a></li> 
<li><a class="tooltip" title="苹果 iPod nano" href="https://img.jbzj.com/file_images/article/201212/picmove_2/wall2.jpg"><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200513/33926.jpg" alt="苹果 iPod nano"></a></li> 
<li><a class="tooltip" title="苹果 iPone" href="https://img.jbzj.com/file_images/article/201212/picmove_2/wall3.jpg"><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200513/33927.jpg" alt="苹果 iPone"></a></li> 
<li><a class="tooltip" title="苹果 Mac" href="https://img.jbzj.com/file_images/article/201212/picmove_2/wall4.jpg"><img onerror="javascript:this.src='/skin1/img/error.jpg';" src="https://img.qb5200.com/download-x/20200513/33928.jpg" alt="苹果 Mac"></a></li> 
</ul> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

加载全部内容