js相册图片抖动放大展示效果
2019独角兽企业重金招聘Python工程师标准>>>
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();
转载于:https://my.oschina.net/u/200898/blog/184552
js相册图片抖动放大展示效果相关推荐
- 点击图片缩略图放大展示效果的实现
点击图片缩略图放大展示效果的实现 最近实现的easyUI查询数据列表中有展示图片的功能,为了能更好方便用户查看图片缩略图的内容,增加了点击图片放大的效果,下边是实现后的效果以及实现方法 点击放 ...
- CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...
- 仿淘宝商品放大展示效果制作(放大镜效果)
如果您觉得这篇文章有用,欢迎点赞收藏或有什么建议请在评论区留言,我看到后会第一时间回复的,谢谢! (分享时刻) mac上取色比较好用的小工具:啜色: 好用的截屏小工具:Snipaste (常用的一个功 ...
- 仿朋友圈相册图片选择以及画廊效果
仿朋友圈相册图片选择以及画廊效果 1.效果展示 2.导入相关第三方库依赖 3.编写选择图片页面 a.编写布局 b.编写Activity c.相册选择工具类部分代码 d.相册4宫图适配器 4.编写画廊页 ...
- html原生js实现图片轮播,原生JS实现图片轮播切换效果
原生JS实现图片轮播切换效果 2019-01-06 编程之家 https://www.jb51.cc 编程之家收集整理的这篇文章主要介绍了原生JS实现图片轮播切换效果,编程之家小编觉得挺不错的,现在分 ...
- 做出的一个图片的自动展示效果(JS版本)
在国外的网站看到一个很不错的图片自动展示效果,于是就自己做了起来,在查看代码时发现是一个JavaScript爱好者自己写了一个库文件来调用,确实看的不太懂,但效果是做出来了,页面的调用代码只需引用固定 ...
- 《JavaScript 实战》:实现图片幻滑动展示效果
滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...
- 通过css实现图片过渡放大的效果
通过css实现图片放大效果 css3当中有一个是过渡属性是transition,他要配和scale来使用,transition:scale(),这个括号里面填写数字,如果大于1,就是放大,如果小于1, ...
最新文章
- [MFC]多线程传参问题 [AfxBeginThread]
- Jeff Dean亲笔盘点谷歌AI 2019:日均2篇论文,纵横16大方向,一文汇集重要开源算法...
- ISC2015听会小计
- ci框架 反向代理配置_《网站建设》Nginx配置反向代理
- Web---JSP-EL表达式
- 如果你的sharepoint 2013很慢...
- 前端demo:实现背景半透明,div与文本正常显示
- android locknow,java – Android DevicePolicyManager lockNow()
- 星露谷服务器一直没有空闲位置,星露谷物语小镇地图全npc住址位置 经验告诉你该这样...
- AndroidUI 控件命名格式
- 印度打车软件Ola将登陆伦敦,或将取代被吊销伦敦执照的Uber
- Java 多线程 之 wait等待 线程实例
- android 多媒体文件信息,Android 获取多媒体信息
- 现代通信技术之SDH技术
- 单项选择题标准化考试系统
- 网页保存到mysql数据库_把网页数据保存到数据库
- [笔记] Golang小试实现神经网络框架
- BUUCTF-[网鼎杯 2020 青龙组]虚幻2
- 飞冰一个很不错的网站
- Visual Studio Code 代码显示空格等空白符的方法