JS相册图片抖动放大展示效果的示例代码


Posted in Javascript onJanuary 29, 2021

上篇文章给大家介绍了JS实现简单抖动效果,感兴趣的朋友点击查看。

今天给大家分享JS相册图片抖动放大展示效果,效果图如下所示:

JS相册图片抖动放大展示效果的示例代码

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<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();
	}
}
 
/* ==== start script ==== */
function dom_onload() {
	if(document.getElementById("diapoContainer")) diapo.init(); else setTimeout("dom_onload();", 128);
}
dom_onload();

到此这篇关于JS相册图片抖动放大展示效果的示例代码的文章就介绍到这了,更多相关js图片放大抖动内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jquery 屏蔽一个区域内的所有元素,禁止输入
Oct 22 Javascript
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
ExtJs事件机制基本代码模型和流程解析
Oct 24 Javascript
写JQuery插件的基本知识
Nov 25 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
运用jQuery定时器的原理实现banner图片切换
Oct 22 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
Aug 07 Javascript
基于jquery实现表格无刷新分页
Jan 07 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
jQuery常用选择器详解
Jul 17 jQuery
详解解决使用axios发送json后台接收不到的问题
Jun 27 Javascript
vue实现点击隐藏与显示实例分享
Feb 13 Javascript
vue监听键盘事件的相关总结
Jan 29 #Vue.js
javascript实现拼图游戏
Jan 29 #Javascript
JS hasOwnProperty()方法检测一个属性是否是对象的自有属性的方法
Jan 29 #Javascript
Javascript实现打鼓效果
Jan 29 #Javascript
JS实现点击掉落特效
Jan 29 #Javascript
Javascript实现关闭广告效果
Jan 29 #Javascript
Vue 实例中使用$refs的注意事项
Jan 29 #Vue.js
You might like
PHP中each与list用法分析
2016/01/08 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
PHP切割汉字的常用方法实例总结
2019/04/27 PHP
ThinkPHP 5.1 跨域配置方法
2019/10/11 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
JQUERY获取form表单值的代码
2010/07/17 Javascript
jquery文字上下滚动的实现方法
2013/03/22 Javascript
封装html的select标签的js操作实例
2013/07/02 Javascript
js 距离某一时间点时间是多少实现代码
2013/10/14 Javascript
js 数组去重的四种实用方法
2014/09/09 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
javascript字符串循环匹配实例分析
2015/07/17 Javascript
JavaScript操作select元素和option的实例代码
2016/01/29 Javascript
JavaScript与ActionScript3两者的同性与差异性
2016/09/22 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
详解微信第三方小程序代开发
2017/06/23 Javascript
Swiper 4.x 使用方法(移动端网站的内容触摸滑动)
2018/05/17 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
如何利用vue+vue-router+elementUI实现简易通讯录
2019/05/13 Javascript
netbeans7安装python插件的方法图解
2013/12/24 Python
Python代码的打包与发布详解
2014/07/30 Python
python reverse反转部分数组的实例
2018/12/13 Python
Python django框架输入汉字,数字,字符生成二维码实现详解
2019/09/24 Python
基于keras 模型、结构、权重保存的实现
2020/01/24 Python
零基础小白多久能学会python
2020/06/22 Python
职称自我鉴定
2013/10/15 职场文书
小学校园文化建设汇报材料
2014/08/19 职场文书
专题组织生活会发言材料
2014/10/17 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
运动会加油稿50字
2015/07/21 职场文书
用Python写一个简易版弹球游戏
2021/04/13 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server