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 相关文章推荐
IE JS编程需注意的内存释放问题
Jun 23 Javascript
详谈 Jquery Ajax异步处理Json数据.
Sep 09 Javascript
JavaScript高级程序设计(第3版)学习笔记9 js函数(下)
Oct 11 Javascript
使用js对select动态添加和删除OPTION示例代码
Aug 12 Javascript
如何用js 实现依赖注入的思想,后端框架思想搬到前端来
Aug 03 Javascript
js验证真实姓名与身份证号是否匹配
Oct 13 Javascript
JavaScript 中 avalon绑定属性总结
Oct 19 Javascript
详解Angular中的自定义服务Service、Provider以及Factory
Apr 22 Javascript
使用Node.js搭建静态资源服务详细教程
Aug 02 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
js实现鼠标拖拽缩放div实例代码
Mar 25 Javascript
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
Feb 12 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
连接到txt文本的超链接,不直接打开而是点击后下载的处理方法
2009/07/01 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
浅谈PHP Cookie处理函数
2016/06/10 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
PHP7新特性之抽象语法树(AST)带来的变化详解
2018/07/17 PHP
php项目中类的自动加载实例讲解
2019/09/12 PHP
(转载)JavaScript中匿名函数,函数直接量和闭包
2007/05/08 Javascript
ASP SQL防注入的方法
2008/12/25 Javascript
jQuery 创建Dom元素
2010/05/07 Javascript
js自动下载文件到本地的实现代码
2013/04/28 Javascript
多个jQuery版本共存的处理方案
2015/03/17 Javascript
jquery插件格式实例分析
2016/06/16 Javascript
JavaScript两个变量交换值的实现方法
2017/03/01 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
纯javascript实现选择框的全选与反选功能
2019/04/08 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
2020/08/25 Javascript
vue自定义树状结构图的实现方法
2020/10/18 Javascript
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
django 环境变量配置过程详解
2019/08/06 Python
Python利用多线程同步锁实现多窗口订票系统(推荐)
2019/12/22 Python
Django之form组件自动校验数据实现
2020/01/14 Python
Python如何使用队列方式实现多线程爬虫
2020/05/12 Python
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
C#如何调用Word并打开一个Word文档
2013/05/08 面试题
静态成员和非静态成员的区别
2012/05/12 面试题
安全员岗位职责
2013/11/11 职场文书
中专生的个人自我评价
2013/12/11 职场文书
纠纷协议书
2014/04/16 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
蛋糕店创业计划书范文
2014/09/21 职场文书
2014年双拥工作总结
2014/11/21 职场文书
不服劳动仲裁起诉书
2015/05/20 职场文书
详解vue中v-for的key唯一性
2021/05/15 Vue.js