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

最新推荐文章于 2024-01-27 20:29:14 发布

balidui8328

最新推荐文章于 2024-01-27 20:29:14 发布

阅读量753

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/yyy251/p/6866339.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> 
<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>

转载于:https://www.cnblogs.com/yyy251/p/6866339.html

balidui8328

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
鼠标放在图片上图片跟随鼠标移动放大。鼠标放在图片上图片放大

跟随鼠标移动放大<!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"> &...
复制链接

扫一扫