html 放大镜

最新推荐文章于 2024-07-12 21:49:18 发布
最新推荐文章于 2024-07-12 21:49:18 发布
阅读量172 收藏
点赞数
分类专栏： java实例空间 文章标签： xhtml javascript java ViewUI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iteye_7988/article/details/82279526
版权 

<!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> 
        <title>wujinjian </title> 
        <base href="http://dl.iteye.com/upload/picture/pic/107118/"> 
        <script type="text/javascript"> 

            /* 
            *特别注意: 
            *放大的倍数=原图的大小/小图片显示的大小 
            *自己查看原图片的大小，我这是 400*400 px 
            */ 

            //图片对象 
            var imgObj; 
            //放大镜div对象 
            var zoomDivObj; 
            //显示小图片的div 
            var mainDivObj; 
            //放大后显示图片的div 
            var showDivObj; 
            //放大镜的大小 
            var zoomSize=50; 
            //放大镜的倍数(不能随便填) 
            var zoomMultiple=2; 
            //图片的路径 
            var imgPath="f75ff49c-34c5-3e42-a4c5-81e1832b2c74.gif"; 
            //小图片显示的大小 
            var imgW=200; 
            var imgH=200; 
            //显示的位置 
            var left=100; 
            var top=10; 
            //放大镜div的透明度(0~100) 
            var opacity=50; 
            //放大镜div的颜色 
            var rgb="223,223,223"; 

            function load() 
            { 
                if(zoomDivObj==null) 
                    createZoomDivObj(); 
                if(mainDivObj==null) 
                    createMainDivObj(); 
                if(showDivObj==null) 
                    createShowDivObj(); 
                if(imgObj==null) 
                    createImgObj(); 

                zoomDivObj.style.width=zoomSize+"px"; 
                zoomDivObj.style.height=zoomSize+"px"; 

                showDivObj.style.width=zoomSize*zoomMultiple+"px"; 
                showDivObj.style.height=zoomSize*zoomMultiple+"px"; 

                showDivObj.style.backgroundImage="url("+imgPath+")"; 

                imgObj.src=imgPath; 
                imgObj.style.width=imgW+"px"; 
                imgObj.style.height=imgH+"px"; 

                mainDivObj.style.width=imgW+"px"; 
                mainDivObj.style.height=imgH+"px"; 
                mainDivObj.style.left=left+"px"; 
                mainDivObj.style.top=top+"px"; 

                showDivObj.style.left=left+imgW+50+"px"; 
                showDivObj.style.top=top+"px"; 

                zoomDivObj.style.backgroundColor="rgb("+rgb+")"; 
                
                //两个都要写，为了IE 和 火狐 的通用 
                zoomDivObj.style.filter="alpha(opacity="+opacity+")"; 
                zoomDivObj.style.opacity=opacity/100; 
            } 

            function showZoomDiv() 
            { 
                if(zoomDivObj==null) 
                    createZoomDivObj(); 

                zoomDivObj.style.visibility="visible"; 
            } 
            
            function moveZoomDiv(e) 
            { 
                if(zoomDivObj==null) 
                    createZoomDivObj(); 

                var w=zoomDivObj.style.width.replace("px","")-0; 
                var h=zoomDivObj.style.height.replace("px","")-0; 
                
                if(mainDivObj==null) 
                    createMainDivObj(); 

                var mouseX=e.clientX-(mainDivObj.style.left.replace("px","")-0); 
                var mouseY=e.clientY-(mainDivObj.style.top.replace("px","")-0); 
                
                window.status=mouseX+"    "+mouseY; 

                zoomDivObj.style.left=mouseX-(w/2)+"px"; 
                zoomDivObj.style.top=mouseY-(h/2)+"px"; 

                if(showDivObj==null) 
                    createShowDivObj(); 
                
                showDivObj.style.backgroundPosition=(-mouseX+w/2)*zoomMultiple+"px "+(-mouseY+h/2)*zoomMultiple+"px"; 
            } 

            function hiddenZoomDiv() 
            { 
                if(zoomDivObj==null) 
                    createZoomDivObj(); 

                //zoomDivObj.style.visibility="hidden"; 
            } 

            function createZoomDivObj() 
            { 
                zoomDivObj=document.getElementById("zoom_div_id"); 
            } 

            function createMainDivObj() 
            { 
                mainDivObj=document.getElementById("main_div_id"); 
            } 

            function createShowDivObj() 
            { 
                showDivObj=document.getElementById("show_div_id"); 
            } 

            function createImgObj() 
            { 
                imgObj=document.getElementById("img_id"); 
            } 
        </script> 
    </head> 
    <body onmousemove="moveZoomDiv(event)" onload="load()"> 
        <div id="main_div_id" style="position:absolute;overflow:hidden;background-color:cyan;border:gray solid 1px;" onmouseover="showZoomDiv()" onmouseout="hiddenZoomDiv()" > 
            <img id="img_id"> 

            <div id="zoom_div_id" style="position:absolute;left:0px;top:0px;overflow:hidden;visibility:hidden;"> </div> 
        </div> 

        <div id="show_div_id" style="position:absolute;overflow:hidden;background-color:cyan;background-repeat:no-repeat;border:gray solid 1px;" > </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>
<bgsound src="路径" loop="-1">/* ===== 背景音乐 ==== */
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片欣赏</title>
<style type="text/css">
	html {
		overflow: hidden;
	}

	body {
		margin: 0px;
		padding: 0px;
		background: #000;
		position: absolute;
		width: 100%;
		height: 100%;
		cursor: crosshair;
	}

	#diapoContainer {
		position: absolute;
		left: 10%;
		top: 10%;
		width: 80%;
		height: 80%;
		background: #222;
		overflow: hidden;
	}

	.imgDC {
		position: absolute;
		cursor: pointer;
		border: #000 solid 2px;
		filter: alpha(opacity=90);
		opacity: 0.9;
		visibility: hidden;
	}

	.spaDC {
		position: absolute;
		filter: alpha(opacity=20);
		opacity: 0.2;
		background: #000;
		visibility: hidden;
	}

	.imgsrc {
		position: absolute;
		width: 120px;
		height: 67px;
		visibility: hidden;
		margin: 4%;
	}

	#bkgcaption {
		position: absolute;
		bottom: 0px;
		left: 0px;
		width: 100%;
		height: 6%;
		background:#1a1a1a;
	}
	#caption {
		position: absolute;
		font-family: arial, helvetica, verdana, sans-serif;
		white-space: nowrap;
		color: #fff;
		bottom: 0px;
		width: 100%;
		left: -10000px;
		text-align: center;
	}

</style>
<script type="text/javascript">
var xm;
var ym;

/* ==== onmousemove event ==== */
document.onmousemove = function(e){
	if(window.event) e=window.event;
	xm = (e.x || e.clientX);
	ym = (e.y || e.clientY);
}

/* ==== window resize ==== */
function resize() {
	if(diapo)diapo.resize();
}
onresize = resize;

/* ==== opacity ==== */
setOpacity = function(o, alpha){
	if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}



/* ===== encapsulate script ==== */
diapo = {
	O : [],
	DC : 0,
	img : 0,
	txt : 0,
	N : 0,
	xm : 0,
	ym : 0,
	nx : 0,
	ny : 0,
	nw : 0,
	nh : 0,
	rs : 0,
	rsB : 0,
	zo : 0,
	tx_pos : 0,
	tx_var : 0,
	tx_target : 0,

	/// script parameters 
	attraction : 2,
	acceleration : .9,
	dampening : .1,
	zoomOver : 2,
	zoomClick : 6,
	transparency : .8,
	font_size: 18,
	//

	/* ==== diapo resize ==== */
	resize : function(){
		with(this){
			nx = DC.offsetLeft;
			ny = DC.offsetTop;
			nw = DC.offsetWidth;
			nh = DC.offsetHeight;
			txt.style.fontSize = Math.round(nh / font_size) + "px";
			if(Math.abs(rs-rsB)<100) for(var i=0; i<N; i++) O[i].resize();
			rsB = rs;
		}
	},

	/* ==== create diapo ==== */
	CDiapo : function(o){
		/* ==== init variables ==== */
		this.o        = o;
		this.x_pos    = this.y_pos    = 0;
		this.x_origin = this.y_origin = 0;
		this.x_var    = this.y_var    = 0;
		this.x_target = this.y_target = 0;
		this.w_pos    = this.h_pos    = 0;
		this.w_origin = this.h_origin = 0;
		this.w_var    = this.h_var    = 0;
		this.w_target = this.h_target = 0;
		this.over     = false;
		this.click    = false;

		/* ==== create shadow ==== */
		this.spa = document.createElement("span");
		this.spa.className = "spaDC";
		diapo.DC.appendChild(this.spa);

		/* ==== create thumbnail image ==== */
		this.img = document.createElement("img");
		this.img.className = "imgDC";
		this.img.src = o.src;
		this.img.O = this;
		diapo.DC.appendChild(this.img);
		setOpacity(this.img, diapo.transparency);

		/* ==== mouse events ==== */
		this.img.onselectstart = new Function("return false;");
		this.img.ondrag = new Function("return false;");
		this.img.onmouseover = function(){
			diapo.tx_target=0;
			diapo.txt.innerHTML=this.O.o.alt;
			this.O.over=true;
			setOpacity(this,this.O.click?diapo.transparency:1);
		}
		this.img.onmouseout = function(){
			diapo.tx_target=-diapo.nw;
			this.O.over=false;
			setOpacity(this,diapo.transparency);
		}
		this.img.onclick = function() {
			if(!this.O.click){
				if(diapo.zo && diapo.zo != this) diapo.zo.onclick();
				this.O.click = true;
				this.O.x_origin = (diapo.nw - (this.O.w_origin * diapo.zoomClick)) / 2;
				this.O.y_origin = (diapo.nh - (this.O.h_origin * diapo.zoomClick)) / 2;
				diapo.zo = this;
				setOpacity(this,diapo.transparency);
			} else {
				this.O.click = false;
				this.O.over = false;
				this.O.resize();
				diapo.zo = 0;
			}
		}

		/* ==== rearrange thumbnails based on "imgsrc" images position ==== */
		this.resize = function (){
			with (this) {
				x_origin = o.offsetLeft;
				y_origin = o.offsetTop;
				w_origin = o.offsetWidth;
				h_origin = o.offsetHeight;
			}
		}

		/* ==== animation function ==== */
		this.position = function (){
			with (this) {
				/* ==== set target position ==== */
				w_target = w_origin;
				h_target = h_origin;
				if(over){
					/* ==== mouse over ==== */
					w_target = w_origin * diapo.zoomOver;
					h_target = h_origin * diapo.zoomOver;
					x_target = diapo.xm - w_pos / 2 - (diapo.xm - (x_origin + w_pos / 2)) / (diapo.attraction*(click?10:1));
					y_target = diapo.ym - h_pos / 2 - (diapo.ym - (y_origin + h_pos / 2)) / (diapo.attraction*(click?10:1));
				} else {
					/* ==== mouse out ==== */
					x_target = x_origin;
					y_target = y_origin;
				}
				if(click){
					/* ==== clicked ==== */
					w_target = w_origin * diapo.zoomClick;
					h_target = h_origin * diapo.zoomClick;
				}

				/* ==== magic spring equations ==== */
				x_pos += x_var = x_var * diapo.acceleration + (x_target - x_pos) * diapo.dampening;
				y_pos += y_var = y_var * diapo.acceleration + (y_target - y_pos) * diapo.dampening;
				w_pos += w_var = w_var * (diapo.acceleration * .5) + (w_target - w_pos) * (diapo.dampening * .5);
				h_pos += h_var = h_var * (diapo.acceleration * .5) + (h_target - h_pos) * (diapo.dampening * .5);
				diapo.rs += (Math.abs(x_var) + Math.abs(y_var));

				/* ==== html animation ==== */
				with(img.style){
					left   = Math.round(x_pos) + "px";
					top    = Math.round(y_pos) + "px";
					width  = Math.round(Math.max(0, w_pos)) + "px";
					height = Math.round(Math.max(0, h_pos)) + "px";
					zIndex = Math.round(w_pos);
				}
				with(spa.style){
					left   = Math.round(x_pos + w_pos * .1) + "px";
					top    = Math.round(y_pos + h_pos * .1) + "px";
					width  = Math.round(Math.max(0, w_pos * 1.1)) + "px";
					height = Math.round(Math.max(0, h_pos * 1.1)) + "px";
					zIndex = Math.round(w_pos);
				}
			}
		}
	},

	/* ==== main loop ==== */
	run : function(){
		diapo.xm = xm - diapo.nx;
		diapo.ym = ym - diapo.ny;
		/* ==== caption anim ==== */
		diapo.tx_pos += diapo.tx_var = diapo.tx_var * .9 + (diapo.tx_target - diapo.tx_pos) * .02;
		diapo.txt.style.left = Math.round(diapo.tx_pos) + "px";
		/* ==== images anim ==== */
		for(var i in diapo.O) diapo.O[i].position();
		/* ==== loop ==== */
		setTimeout("diapo.run();", 16);
	},

	/* ==== load images ==== */
	images_load : function(){
		// ===== loop until all images are loaded =====
		var M = 0;
		for(var i=0; i<diapo.N; i++) {
			if(diapo.img[i].complete) {
				diapo.img[i].style.position = "relative";
				diapo.O[i].img.style.visibility = "visible";
				diapo.O[i].spa.style.visibility = "visible";
				M++;
			}
			resize();
		}
		if(M<diapo.N) setTimeout("diapo.images_load();", 128);
	},

	/* ==== init script ==== */
	init : function() {
		diapo.DC = document.getElementById("diapoContainer");
		diapo.img = diapo.DC.getElementsByTagName("img");
		diapo.txt = document.getElementById("caption");
		diapo.N = diapo.img.length;
		for(i=0; i<15; i++) diapo.O.push(new diapo.CDiapo(diapo.img[i]));
		diapo.resize();
		diapo.tx_pos = -diapo.nw;
		diapo.tx_target = -diapo.nw;
		diapo.images_load();
		diapo.run();
	}
}
</script>
</head>
<body>
<div id="diapoContainer">
	<img class="imgsrc" src="" alt="图片的注释（第一张）">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
       <img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
       <img class="imgsrc" src="" alt="同上">
	<img class="imgsrc" src="" alt="同上">
        <div id="bkgcaption">
	</div>
	<div id="caption">
	</div>
</div>
<script type="text/javascript">
/* ==== start script ==== */
function dom_onload() {
	if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</body>
</html>
iteye_7988
关注
专栏目录
html实现商品图片放大镜，html图片放大镜预览
weixin_43992507的博客
08-10 1388
html实现商品图片放大镜，html图片放大镜预览
HTML放大镜功能,简单易用
05-24
HTML放大镜功能是一种常见的网页交互设计，用于提升用户体验，特别是在展示细节丰富的图片时。这个功能让用户能够轻松查看图片的局部细节，而无需离开当前页面或打开新的窗口。它在电商网站、艺术画廊或者任何需要...
放大镜.html
06-11
一个简单的放大镜的demo，功能实现，代码较少。注意图片路径，有问题可以联系。
Web开发 —— 放大镜效果（HTML、CSS、JavaScript）
最新发布
m0_65029152的博客
07-12 2285
本文记录一下，使用HTML、CSS、JavaScript实现放大镜效果的过程，以及相关代码；
HTML放大镜实现
Tony6666_的博客
12-21 4422
        前天跟着b站的一个老师敲了大概两个小时左右，老师一直说很简单，但是实现的步骤对于接触js时间不太长，或者说连皮毛都不是特别懂的我来说，还是需要多多学习。模板是这个样子，其中参数需要根据添加图片的不同设置不同值，根据自己所需要的页面展示风格，也需要改动相应的margin、position参数，总的来说就是实现三个框架：原图片框、随鼠标移动的半透明矩形框、Details展示框。 &...
html中放大镜案列,HTML放大镜的一种实现及原理讲解（js）
weixin_36299472的博客
06-15 862
0.效果预览预览.png上下方的宽度和高度指的是图片内可移动滑块的长宽，下文以‘放大镜’来称呼该滑块。基本功能移动放大镜来选择需要放大的区域。可以根据需求调整放大镜尺寸和倍数，默认放大镜尺寸为50px*50px，放大倍数为2倍。上下滑动鼠标滚轮来放大(缩小)放大镜尺寸。下方实时显示放大镜当前尺寸和放大倍数。eg: 调整放大镜大小来显示一行英文image.png1.原理讲解HTML部分Setting...
HTML+css+JavaScript实现放大镜效果
09-07
HTML+css+JavaScript实现放大镜效果
html.rar_html放大镜案例
09-21
HTML放大镜功能是一种常见于电商网站的产品细节展示技术，它允许用户通过鼠标悬停在图片上，局部区域会以放大效果显示，以便更清晰地查看产品的细节。这个"html.rar_html放大镜案例"是一个实现此类功能的实例。下面...
jQuery html 放大镜效果
08-24
这里我们关注的是两个实现这一效果的jQuery插件：一个是基础的html放大镜效果，另一个是名为Cloud Zoom的高级放大镜插件。 首先，我们来了解基础的html放大镜效果。这个效果通常是通过JavaScript和CSS来实现的。...
HTML5 商品放大镜效果
07-31
HTML5商品放大镜效果是一种常见的电商网站交互设计，它能够为用户提供更加直观的商品细节查看体验。在本案例中，我们关注的是如何利用HTML5技术来实现这种效果，特别是在"Day3_Magnifier.zip"这个压缩包中所包含的...
可放大任何HTML元素的网页放大镜
04-11
可放大任何HTML元素的网页放大镜，定倍、变倍、旁置放大窗口功能
HTML放大镜 （商品放大镜）
花醉三千客
11-05 956
HTML放大镜 （商品放大镜）
HTML页面放大镜效果
雨燕的博客
06-07 1495
HTML5网页放大效果 .a { transition: All 0.4s ease-in-out; -webkit-transition: All 0.4s ease-in-out; -moz-transition: All 0.4s ease-in-out; -o-transition: All 0.4s ease-in-out; width: 200px; height:
[HTML/JS]用HTML、JS实现放大图片效果（放大镜）
GS119115的博客
01-12 2516
购物软件普遍自带的商品放大镜可以让卖家浏览商品细节，想要自己实现如下。
html静态网页：放大镜
全栈川川
08-01 602
功能分三个模块： 1-鼠标跟随 2-处理越界 3-方大 效果： 文件架构： 学习交流群：970353786 第一部分代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ width: 400p
js+html2canvas实现网页放大镜效果：放大镜图片使用css样式background背景图，鼠标移动使用样式background-position动态设置
Hi_MrXiao的博客
08-31 2138
鼠标移动到需要放大的网页上时，鼠标静止不动500毫秒后，一个长方形的放大镜框显示，放大镜中显示当前区域2.2倍的效果，并且这时候鼠标移动放大的区域也跟着变化。放大镜限制：放大镜只能在特定的区域内使用，即放大镜的移动范围有边界。
html放大镜效果代码,js实现简单放大镜效果
weixin_31269985的博客
06-04 741
用js实现简单放大镜效果，供大家参考，具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩，图片的一个区域就会被放大，然后展示在右边。当鼠标移动时右边的大图片也会局部移动。这里的放大并不是真正的放大，而是等比例移动。下面是实现的代码：css样式代码如下：.s_box{width:400px;height: 300px;position: absolute;left: 50px;to...
html放大镜js代码
12-23
以下是一个简单的HTML放大镜的JS代码示例： ```html <!DOCTYPE html> <html> .box { position: relative; width: 400px; height: 400px; overflow: hidden; } .mask { position: absolute; width: 100px; ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值