当鼠标移动到图片上时跟随鼠标显示放大的图片效果

2019/6/29 22:44:09

编程Tag： 图片放大鼠标滑过

本文主要是介绍当鼠标移动到图片上时跟随鼠标显示放大的图片效果，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

原始状态：

鼠标经过：

复制代码代码如下:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>无标题文档</title> 
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script language="javascript"> 
$(function(){ 
var offsetX=20-$("#imgtest").offset().left; 
var offsetY=20-$("#imgtest").offset().top; 
var size=1.2*$('#imgtest ul li img').width(); 
$("#imgtest ul li").mouseover(function(event) { 
var $target=$(event.target); 
if($target.is('img')) 
{ 
$("<img id='tip' src='"+$target.attr("src")+"'>").css({ 
"height":size, 
"width":size, 
"top":event.pageX+offsetX, 
"left":event.pageY+offsetY, 
}).appendTo($("#imgtest")); 
} 
}).mouseout(function() { 
$("#tip").remove(); 
}).mousemove(function(event) { 
$("#tip").css( 
{ 
"left":event.pageX+offsetX, 
"top":event.pageY+offsetY 
}); 
}); 
}) 
</script> 
<style type="text/css"> 
img{ height:262px; width:400px; position:absolute; border:5px solid #FFF;} 
#imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; } 
#imgtest ul{ position:relative;width:840px; height:auto; background:#00F;} 
#imgtest ul li{ position:relative; height:276px; width:410px; list-style:none; float:left; margin:3px; border:1px solid #999;} 
</style> 
</head> 
<body> 
<div id="imgtest"> 
<ul> 
<li><img src="img/photo1.jpg" /></li> 
<li><img src="img/photo2.jpg" /></li> 
<li><img src="img/photo3.jpg" /></li> 
<li><img src="img/photo4.jpg" /></li> 
</ul> 
</div> 
</body> 
</html> 

这篇关于当鼠标移动到图片上时跟随鼠标显示放大的图片效果的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

当鼠标移动到图片上时跟随鼠标显示放大的图片效果

相关编程文章