两种方法实现,第一种js,第二种jquery
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
body{padding:0px;margin:0px;background:#aaaaaa;}
#small_pic{
margin:10px 0 0 10px;width:375px;height:275px;cursor:crosshair;
}
#zoom{
border:1px solid red;width:120px;height:120px;background:#FFFFFF;position:absolute;top:20px;left:20px;
opacity:0.5;filter:alpha(opacity=50);
display:none;
}
#big_pic{
width:240px;height:240px;border:1px solid red;position:absolute;top:10px;left:500px;overflow:hidden;display:none;
}
</style>
<script type="text/javascript">
window.onload = function(){
var small_pic = document.getElementById('small_pic');
var big_pic = document.getElementById('big_pic');
var zoomer = document.getElementById('zoom');
var pic2 =document.getElementById('pic2');
//移动跟随
small_pic.onmousemove = mouseMove;
function mouseMove(ev){
ev = ev || window.event;
var l = ev.clientX-small_pic.offsetLeft-zoomer.offsetWidth/2;
var h = ev.clientY-small_pic.offsetTop-zoomer.offsetHeight/2;
if(l<0){l=0;}
else if(l>small_pic.offsetWidth-zoomer.offsetWidth){l=small_pic.offsetWidth-zoomer.offsetWidth+1;}
if(h<0){h=0;}
else if(h>small_pic.offsetHeight-zoomer.offsetHeight){h=small_pic.offsetHeight-zoomer.offsetHeight+1;}
document.getElementById("zoom").style.left = l+small_pic.offsetLeft+"px";
document.getElementById("zoom").style.top = h+small_pic.offsetTop+"px";
var percent = big_pic.clientWidth/zoomer.clientWidth;
pic2.style.left = big_pic.style.left-percent*l+'px';
pic2.style.top = big_pic.style.top-percent*h+'px';
}
small_pic.onmouseover = function(){
zoomer.style.display = 'block';
big_pic.style.display = 'block';
mouseMove();
};
small_pic.onmouseout = function(){
zoomer.style.display ='none';
big_pic.style.display='none';
};
};
</script>
</head>
<body>
<div id="small_pic">
<img id="pic1" src="images/00001.jpg" style="width:375px;height:275px;border:1px solid #aaaaaa;">
<span id="zoom">
</span>
</div>
<div id="big_pic">
<img id="pic2" src="images/00001.jpg" style="width:750px;height:550px;position:absolute;">
</div>
</body>
</html>
<!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=iso-8859-1">
<title>Untitled Document</title>
</head>
<style>
*{
padding:0px;
margin:0px;
border:0px;}
.all{
margin:0 auto;
width:960px;
}
.big{
float:left;
width:160px;
height:160px;
border:2px solid #CCC;
padding:3px;
margin-top:100px;}
.big .small{
width:50px;
height:50px;
position:absolute;
top:0px;
left:300px;
background:#CFF;
opacity:0.75;
display:none;}
.big .show{
width:275px;
height:150px;
padding:3px;
position:absolute;
top:100px;
left:500px;
display:none;
background:url(images/00001.jpg) no-repeat left top;
border:1px solid #666;}
</style>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script>
var topset=0;
var leftset=0;
$(document).ready(function(e) {
$(".big").mouseleave(function(){
$(".small").css({"top":LTY,"left":LTX,"display":"none"});
$(".show").css("display","none");
}).mousemove(function(e){
topset=$(this).offset().top;
leftset=$(this).offset().left;
if(e.pageX<185)
LTX=160;
else if(e.pageX>301)
LTX=276;
else
LTX=e.pageX-25;
if(e.pageY<125)
LTY=100;
else if(e.pageY>241)
LTY=221;
else
LTY=e.pageY-25;
$(".small").css({"top":LTY,"left":LTX,"display":"block"});
position_x="-"+Math.round((LTX-160)/160*550)+"px";
position_y="-"+Math.round((LTY-100)/160*375)+"px";
pl=position_x+" "+position_y;
$(".show").css({"display":"block","background-position":pl});
});
});
</script>
<body>
<div class="all">
<div class="big">
[img]images/00001.jpg" width="160px;" height="160px[/img]
<div class="small"></div>
<div class="show"></div>
</div>
</div>
</body>
</html>
分享到:
相关推荐
android 图片的放大镜功能 源代码(正方形放大镜) 类似淘宝 简单实现
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
js实现放大镜 (可以点击切换图片)
代码简介:电商网站jQuery放大镜代码是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。
jQuery实现类似淘宝商品图片展示、图片放大镜,鼠标移动至图片时放大该图片当前鼠标停留位置!
类似淘宝详情页的放大镜效果,模板代码,拿过来修改即可使用
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
android 图片的放大镜功能 源代码(正方形放大镜) 类似淘宝 简单实现.zip,太多无法一一验证是否可用,程序如果跑不起来需要自调,部分代码功能进行参考学习。
jQuery商品放大镜预览代码是一款类似淘宝商品主图放大显示特效下载。
jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。
类似与淘宝产品展示的放大图效果 点击小图展示大图,大图上有商品放大镜的js特效
jQuery商品放大镜预览代码是一款类似淘宝商品主图放大显示特效下载。
JS实现局部放大效果(类似于淘宝商品显示局部放大)
电商网站jQuery放大镜代码是一款基于jquery elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。
类似于淘宝宝贝描述详情页中,查看宝贝图片时,鼠标移上去出现的放大镜效果。
jQuery商品放大镜预览代码是一款类似淘宝商品主图放大显示特效下载。
电商网站jQuery放大镜代码是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。