JavaScript 生成弹性透明的图片放大代码

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JS弹性图片放大代码</title>
<style type="text/css">
	html {
		overflow: hidden;
	}

body {
		margin: 0px;
		padding: 0px;
		background: #000;
		position: absolute;
		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;
document.onmousemove = function(e){
	if(window.event) e=window.event;
	xm = (e.x || e.clientX);
	ym = (e.y || e.clientY);
}

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

setOpacity = function(o, alpha){
	if(o.filters)o.filters.alpha.opacity = alpha * 100; else o.style.opacity = alpha;
}
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,
	attraction : 2,
	acceleration : .9,
	dampening : .1,
	zoomOver : 2,
	zoomClick : 6,
	transparency : .8,
	font_size: 18,
	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;
		}
	},

CDiapo : function(o){
		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;
		this.spa = document.createElement("span");
		this.spa.className = "spaDC";
		diapo.DC.appendChild(this.spa);
		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);
		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;
			}
		}
		this.resize = function (){
			with (this) {
				x_origin = o.offsetLeft;
				y_origin = o.offsetTop;
				w_origin = o.offsetWidth;
				h_origin = o.offsetHeight;
			}
		}

this.position = function (){
			with (this) {
				w_target = w_origin;
				h_target = h_origin;
				if(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 {
					x_target = x_origin;
					y_target = y_origin;
				}
				if(click){
					w_target = w_origin * diapo.zoomClick;
					h_target = h_origin * diapo.zoomClick;
				}
				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));
				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);
				}
			}
		}
	},
	run : function(){
		diapo.xm = xm - diapo.nx;
		diapo.ym = ym - diapo.ny;
		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";
		for(var i in diapo.O) diapo.O[i].position();
		setTimeout("diapo.run();", 16);
	},

images_load : function(){
		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 : 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<diapo.N; 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="//ku.shouce.ren/files/images/201601/56a33fbcb1115.jpg">
	<img class="imgsrc" src="//ku.shouce.ren/files/images/201601/56a33fbe26525.jpg">
	<img class="imgsrc" src="//ku.shouce.ren/files/images/201601/56a33fc11173d.jpg">
	<div id="bkgcaption"></div>
	<div id="caption"></div>
</div>
<script type="text/javascript">
function dom_onload() {
	if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();
</script>
</div>
</body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

JavaScript 生成弹性透明的图片放大代码

分类

图片代码

描述

JavaScript 算法生成弹性透明的图片放大效果，代码值得看一下哦，弹性和缓冲是一个意思，JS缓冲效果在网页中使用很频繁，使用缓冲技术可以制作出超多的精美特效来。