`

类似淘宝放大镜代码

阅读更多
闲着无聊,自己做了一个关于淘宝放大镜的效果,方便自己和大家以后急需的时候直接拿过去就可以用。两种方法实现,第一种js,第二种jquery
JS实现
<!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>



JQ实现
<!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>

10
3
分享到:
评论
2 楼 nicegege 2012-06-28  
 
1 楼 coding1688 2012-06-28  
推荐jqZoom插件,下面是它的演示站点
http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

相关推荐

    JQuery 类似淘宝商品放大镜效果

    `js` 文件夹通常包含实现放大镜效果的 JavaScript 代码。在这个例子中,可能会有一个名为 `jquery.zoom.js` 的文件,它是基于 jQuery 的插件。这个插件负责监听鼠标移动事件,计算放大区域的位置,并实时更新放大镜...

    类似淘宝放大镜

    标题中的“类似淘宝放大镜”指的是在网页上实现的一种交互效果,它允许用户在鼠标悬停在商品图片上时,能看到一个放大版本的局部细节,从而更清晰地查看产品细节。这种效果在电商网站,尤其是淘宝这样的大型购物平台...

    类似淘宝图片放大镜 图片的缩放

    今天我们将探讨如何实现类似淘宝图片放大镜效果,以及如何使用jQuery库来简化这一过程。 首先,我们需要了解这种效果的基本原理。放大镜功能主要由两部分组成:一个较小的原图和一个可以放大的区域(通常是一个带有...

    电商网站jQuery放大镜代码.zip

    代码简介:电商网站jQuery放大镜代码是一款基于jquery.elevatezoom插件实现的类似淘宝放大镜代码,提供40多种参数,可自由配置多种效果,适合电商或图片类网站使用。

    jquery实现类似淘宝的图片放大镜效果

    本教程将详细介绍如何使用jQuery来实现类似淘宝的图片放大镜效果。 首先,我们需要理解基本原理。放大镜效果由两部分组成:主图(通常是原始大小的图片)和放大区域(显示放大后的细节)。当用户鼠标悬停在主图上时...

    淘宝放大镜效果

    淘宝放大镜效果是一种在电商网站上广泛使用的交互设计,它允许用户通过鼠标悬停在商品图片上时,局部放大图片的细节,以便更清晰地查看商品的纹理、颜色和其他特征。这种功能对于提升用户体验,尤其是在线购物体验,...

    js实现放大镜(类似淘宝可以切换图片).rar

    这个"js实现放大镜(类似淘宝可以切换图片).rar"压缩包文件包含了实现这一功能的代码示例。下面我们将深入探讨相关知识点。 首先,我们来了解JavaScript作为开发语言的基础。JavaScript是一种轻量级、解释型的脚本...

    vue3+vite+ts 仿淘宝放大镜效果

    在本项目中,我们主要探讨的是如何利用Vue3、Vite和TypeScript来实现一个类似于淘宝网站中的商品图片放大镜效果。这个效果通常用于增强用户的购物体验,让他们能更清晰地查看商品细节。以下是实现这一功能所涉及的...

    放大镜效果代码

    这个名为“放大镜效果代码”的资源,据描述所示,是一个与淘宝网站类似的设计,它强调了简约但功能强大的特性。 实现放大镜效果的核心技术主要包括JavaScript和CSS。JavaScript通常用于监听鼠标移动事件,动态调整...

    jqZoom放大镜,淘宝放大镜,jqZoom.js

    jqZoom是一种广泛应用于电商网站的产品图片展示技术,它模拟了淘宝等购物平台上的放大镜效果。这个技术基于JavaScript库jQuery,使得用户在鼠标悬浮在图片上时,能看到一个放大的图像细节,从而提供更好的视觉体验,...

    jQuery淘宝产品图片放大镜代码.zip

    这个名为"jQuery淘宝产品图片放大镜代码.zip"的压缩包提供了一种实现这一功能的解决方案,它基于jQuery库中的imagezoom插件。接下来,我们将深入探讨这个代码的工作原理、实现方法以及其在实际应用中的价值。 首先...

    仿东京,天猫,淘宝网商品放大镜效果

    通过以上技术,我们可以为电商网站构建出类似东京、天猫、淘宝网的商品放大镜效果,从而提升用户的购物体验,增加商品的吸引力。在实践中,开发者可以根据具体需求调整插件参数,或者自定义一些额外的交互功能,以...

    图片放大镜--模仿淘宝

    本项目“图片放大镜--模仿淘宝”旨在实现类似的功能,让用户能够无损地放大图片以观察细节,提升购物体验。 在网页或应用开发中,图片放大镜功能主要由以下几个关键知识点构成: 1. **JavaScript与jQuery**:通常...

    图片放大镜效果示例

    在IT领域,图片放大镜效果通常用于电商网站或者图像展示应用中,允许用户对细节部分进行查看,提高用户体验。这个示例项目就是针对这一需求设计的,它利用JavaScript技术实现了一个图片放大镜的功能。 首先,我们要...

    淘宝商品放大镜效果

    淘宝商品放大镜效果是一种常见的网页交互技术,主要应用于电商网站的商品展示页面,为用户提供更为细腻的商品细节查看体验。这种效果通常由JavaScript实现,利用CSS进行样式控制,有时也会结合HTML5的一些特性。以下...

    类似淘宝的放大镜效果

    以上就是关于“类似淘宝的放大镜效果”的详细解释,包括实现原理、技术实现、模板代码的修改以及可能的扩展和应用注意事项。通过理解这些知识点,你可以根据自己的项目需求定制出符合用户体验的放大镜效果。

    jquery图片放大镜插件.zip

    代码简介:jquery图片放大镜插件是一款简单实用的jQuery图片放大镜效果,点击缩略图可以切换大图,鼠标划过大图出现放大镜图片,可拖动放大镜区域查看图片细节,类似淘宝放大镜代码,适用于电子商务网站使用。

    android 图片的放大镜功能 源代码(正方形放大镜)

    在Android开发中,图片的放大镜功能是一种常见且实用的交互设计,特别是在电商应用中,如淘宝,用户可以通过放大镜查看商品细节。本教程将详细解释如何在Android中实现一个正方形的图片放大镜功能,并提供相关的源...

    安卓Gallery照片墙画廊图库相关-android图片的放大镜功能源代码正方形放大镜类似淘宝简单实现.zip

    本压缩包提供的"安卓Gallery照片墙画廊图库相关-android图片的放大镜功能源代码正方形放大镜类似淘宝简单实现.zip"主要关注的是图片的放大镜效果。以下是关于这个功能的详细解释: 1. **放大镜功能原理**: 放大镜...

Global site tag (gtag.js) - Google Analytics