鼠标放在图片上图片跟随鼠标移动放大。 鼠标放在图片上图片放大

跟随鼠标移动放大

<!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="file:///F|/phpStudy/WWW/fengzhuang/jquery-1.11.2.min.js"></script> 
<script language="javascript"> 
$(function(){ 
var offsetX=20-$("#imgtest").offset().left; 
var offsetY=20-$("#imgtest").offset().top; 
var size=1.2*$('#imgtest img').width(); 
$("#imgtest").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{ position:absolute;} 
#imgtest{ height:auto;width:840px; margin:0 auto; position:absolute; }
</style> 
</head> 
<body> 
<div id="imgtest"> 
<img src="FENDER芬达 011-3000.png"/>
</div> 
</body> 
</html>

 

鼠标放在图片上图片放大

<!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>
</head>

<body>

<img id="img" onmouseover="bigger()" onmouseout="smaller()" src="1.jpg" style="cursor:pointer;width:100px;height:100px;" />
<script type="text/javascript">
 var img = document.getElementById('img');
 function bigger(){
  img.style.width = '400px';
  img.style.height = '400px';
 }
 
 function smaller(){
  img.style.width = '100px';
  img.style.height = '100px';
 }

</script>

</body>
</html>

 

posted @ 2017-05-17 10:44  ▍凉城空巷°  阅读(324)  评论(0)    收藏  举报