JS实现显示带倒影的图片横排居中放大展示特效实例【测试可用】


Posted in Javascript onAugust 23, 2016

本文实例讲述了JS实现显示带倒影的图片横排居中放大展示功能。分享给大家供大家参考,具体如下:

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS实现显示倒影的图片横排居中放大展示特效</title>
<meta http-equiv="imagetoolbar" content="no" />
<style type="text/css">
html {
overflow: hidden;
}
body {
margin: 0px;
padding: 0px;
background: #000;
width: 100%;
height: 100%;
}
#imageFlow {
position: absolute;
width: 100%;
height: 80%;
left: 0%;
top: 10%;
background: #000;
}
#imageFlow .diapo {
position: absolute;
left: -1000px;
cursor: pointer;
-ms-interpolation-mode: nearest-neighbor;
}
#imageFlow .link {
border: dotted #fff 1px;
margin-left: -1px;
margin-bottom: -1px;
}
#imageFlow .bank {
visibility: hidden;
}
#imageFlow .top {
position: absolute;
width: 100%;
height: 2%;
background: #003366;
}
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: -12px;
text-align: center;
color: #FFF;
font-family: verdana, arial, Helvetica, sans-serif;
z-index: 1000;
}
#imageFlow .title {
font-size: 0.9em;
font-weight: bold;
}
#imageFlow .legend {
font-size: 0.8em;
}
#imageFlow .scrollbar {
position: absolute;
left: 10%;
bottom: 10%;
width: 80%;
height: 16px;
z-index: 1000;
}
#imageFlow .track {
position: absolute;
left: 0.5%;
width: 98%;
height: 16px;
filter: alpha(opacity=30);
opacity: 0.3;
}
#imageFlow .arrow-left {
position: absolute;
}
#imageFlow .arrow-right {
position: absolute;
right: 0px;
}
#imageFlow .bar {
position: absolute;
height: 16px;
left: 25px;
}
</style>
<script type="text/javascript">
var imf = function () {
var lf = 0;
var instances = [];
function getElementsByClass (object, tag, className) {
var o = object.getElementsByTagName(tag);
for ( var i = 0, n = o.length, ret = []; i < n; i++)
if (o[i].className == className) ret.push(o[i]);
if (ret.length == 1) ret = ret[0];
return ret;
}
function addEvent (o, e, f) {
if (window.addEventListener) o.addEventListener(e, f, false);
else if (window.attachEvent) r = o.attachEvent('on' + e, f);
}
function createReflexion (cont, img) {
var flx = false;
if (document.createElement("canvas").getContext) {
flx = document.createElement("canvas");
flx.width = img.width;
flx.height = img.height;
var context = flx.getContext("2d");
context.translate(0, img.height);
context.scale(1, -1);
context.drawImage(img, 0, 0, img.width, img.height);
context.globalCompositeOperation = "destination-out";
var gradient = context.createLinearGradient(0, 0, 0, img.height * 2);
gradient.addColorStop(1, "rgba(255, 255, 255, 0)");
gradient.addColorStop(0, "rgba(255, 255, 255, 1)");
context.fillStyle = gradient;
context.fillRect(0, 0, img.width, img.height * 2);
} else {
/* ---- DXImageTransform ---- */
flx   = document.createElement('img');
flx.src = img.src;
flx.style.filter = 'flipv progid:DXImageTransform.Microsoft.Alpha(' +
'opacity=50, style=1, finishOpacity=0, startx=0, starty=0, finishx=0, finishy=' +
(img.height * .25) + ')';
}
/* ---- insert Reflexion ---- */
flx.style.position = 'absolute';
flx.style.left   = '-1000px';
cont.appendChild(flx);
return flx;
}
function ImageFlow(oCont, size, zoom, border) {
this.diapos   = [];
this.scr    = false;
this.size    = size;
this.zoom    = zoom;
this.bdw    = border;
this.oCont   = oCont;
this.oc     = document.getElementById(oCont);
this.scrollbar = getElementsByClass(this.oc,  'div', 'scrollbar');
this.text    = getElementsByClass(this.oc,  'div', 'text');
this.title   = getElementsByClass(this.text, 'div', 'title');
this.legend   = getElementsByClass(this.text, 'div', 'legend');
this.bar    = getElementsByClass(this.oc,  'img', 'bar');
this.arL    = getElementsByClass(this.oc,  'img', 'arrow-left');
this.arR    = getElementsByClass(this.oc,  'img', 'arrow-right');
this.bw     = this.bar.width;
this.alw    = this.arL.width - 5;
this.arw    = this.arR.width - 5;
this.bar.parent = this.oc.parent = this;
this.arL.parent = this.arR.parent = this;
this.view    = this.back    = -1;
this.resize();
this.oc.onselectstart = function () { return false; }
/* ---- create images ---- */
var img  = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img[i]; i++) {
this.diapos[i] = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}
/* ==== add mouse wheel events ==== */
if (window.addEventListener)
this.oc.addEventListener('DOMMouseScroll', function(e) {
this.parent.scroll(-e.detail);
}, false);
else this.oc.onmousewheel = function () {
this.parent.scroll(event.wheelDelta);
}
/* ==== scrollbar drag N drop ==== */
this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;
/* ---- move bar ---- */
this.parent.oc.onmousemove = function (e) {
if (!e) e = window.event;
self.bar.style.left = Math.round(Math.min((self.ws - self.arw - self.bw), Math.max(self.alw, e.screenX - scl))) + 'px';
self.view = Math.round(((e.screenX - scl) ) / (self.ws - self.alw - self.arw - self.bw) * self.NF);
if (self.view != self.back) self.calc();
return false;
}
/* ---- release scrollbar ---- */
this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}
/* ==== right arrow ==== */
this.arR.onclick = this.arR.ondblclick = function () {
if (this.parent.view < this.parent.NF - 1)
this.parent.calc(1);
}
/* ==== Left arrow ==== */
this.arL.onclick = this.arL.ondblclick = function () {
if (this.parent.view > 0)
this.parent.calc(-1);
}
}
ImageFlow.prototype = {
/* ==== targets ==== */
calc : function (inc) {
if (inc) this.view += inc;
var tw = 0;
var lw = 0;
var o = this.diapos[this.view];
if (o && o.loaded) {
/* ---- reset ---- */
var ob = this.diapos[this.back];
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}
/* ---- update legend ---- */
this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);
/* ---- update hyperlink ---- */
if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}
/* ---- calculate target sizes & positions ---- */
o.w1 = Math.min(o.iw, this.wh * .5) * o.z1;
var x0 = o.x1 = (this.wh * .5) - (o.w1 * .5);
var x = x0 + o.w1 + this.bdw;
for (var i = this.view + 1, o; o = this.diapos[i]; i++) {
if (o.loaded) {
o.x1 = x;
o.w1 = (this.ht / o.r) * this.size;
x  += o.w1 + this.bdw;
tw += o.w1 + this.bdw;
}
}
x = x0 - this.bdw;
for (var i = this.view - 1, o; o = this.diapos[i]; i--) {
if (o.loaded) {
o.w1 = (this.ht / o.r) * this.size;
o.x1 = x - o.w1;
x  -= o.w1 + this.bdw;
tw += o.w1 + this.bdw;
lw += o.w1 + this.bdw;
}
}
/* ---- move scrollbar ---- */
if (!this.scr && tw) {
var r = (this.ws - this.alw - this.arw - this.bw) / tw;
this.bar.style.left = Math.round(this.alw + lw * r) + 'px';
}
/* ---- save preview view ---- */
this.back = this.view;
}
},
/* ==== mousewheel scrolling ==== */
scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},
/* ==== resize ==== */
resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},
/* ==== move all images ==== */
run : function (res) {
var i = this.NF;
while (i--) this.diapos[i].move(res);
}
}
Diapo = function (parent, N, src, title, text, url, target) {
this.parent    = parent;
this.loaded    = false;
this.title     = title;
this.text     = text;
this.url      = url;
this.target    = target;
this.N       = N;
this.img      = document.createElement('img');
this.img.src    = src;
this.img.parent  = this;
this.img.className = 'diapo';
this.x0      = this.parent.oc.clientWidth;
this.x1      = this.x0;
this.w0      = 0;
this.w1      = 0;
this.z1      = 1;
this.img.parent  = this;
this.img.onclick  = function() { this.parent.click(); }
this.parent.oc.appendChild(this.img);
/* ---- display external link ---- */
if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout = function () { this.className = 'diapo'; }
}
}
Diapo.prototype = {
/* ==== HTML rendering ==== */
move : function (res) {
if (this.loaded) {
var sx = this.x1 - this.x0;
var sw = this.w1 - this.w0;
if (Math.abs(sx) > 2 || Math.abs(sw) > 2 || res) {
/* ---- paint only when moving ---- */
this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {
/* ---- paint only visible images ---- */
this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;
/* ---- diapo ---- */
o.left  = Math.round(this.x0) + 'px';
o.bottom = Math.floor(this.parent.ht * .25) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
/* ---- reflexion ---- */
if (this.flx) {
var o = this.flx.style;
o.left  = Math.round(this.x0) + 'px';
o.top  = Math.ceil(this.parent.ht * .75 + 1) + 'px';
o.width = Math.round(this.w0) + 'px';
o.height = Math.round(h) + 'px';
}
} else {
/* ---- disable invisible images ---- */
if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {
/* ==== image onload ==== */
if (this.img.complete && this.img.width) {
/* ---- get size image ---- */
this.iw   = this.img.width;
this.ih   = this.img.height;
this.r   = this.ih / this.iw;
this.loaded = true;
/* ---- create reflexion ---- */
this.flx  = createReflexion(this.parent.oc, this.img);
if (this.parent.view < 0) this.parent.view = this.N;
this.parent.calc();
}
}
},
/* ==== diapo onclick ==== */
click : function () {
if (this.parent.view == this.N) {
/* ---- click on zoomed diapo ---- */
if (this.url) {
/* ---- open hyperlink ---- */
window.open(this.url, this.target);
} else {
/* ---- zoom in/out ---- */
this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {
/* ---- select diapo ---- */
this.parent.view = this.N;
this.parent.calc();
}
return false;
}
}
return {
/* ==== initialize script ==== */
create : function (div, size, zoom, border) {
/* ---- instanciate imageFlow ---- */
var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances[i].oCont == div) loaded = true;
if (!loaded) {
/* ---- push new imageFlow instance ---- */
instances.push(
new ImageFlow(div, size, zoom, border)
);
/* ---- init script (once) ---- */
if (!imf.initialized) {
imf.initialized = true;
/* ---- window resize event ---- */
addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances[i].resize();
});
/* ---- stop drag N drop ---- */
addEvent(document.getElementById(div), 'mouseout', function (e) {
if (!e) e = window.event;
var tg = e.relatedTarget || e.toElement;
if (tg && tg.tagName == 'HTML') {
var i = instances.length;
while (i--) instances[i].oc.onmousemove = null;
}
return false;
});
/* ---- set interval loop ---- */
setInterval(function () {
var i = instances.length;
while (i--) instances[i].run();
}, 16);
}
}
}
/* ---- window onload event ---- */
addEvent(window, 'load', function () { load(); });
}
}
}();
//     div ID  , size, zoom, border
imf.create("imageFlow", 0.15, 1.5, 10);
</script>
</head>
<body>
<div id="imageFlow">
<div class="top">
</div>
<div class="bank">
<a rel="images/1.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/2.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/3.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/4.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/5.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/6.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/1.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/2.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/3.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/4.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/5.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/6.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/2.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="images/1.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a></div>
<div class="text">
<div class="title">
Loading</div>
<div class="legend">
Please wait...</div>
</div>
<div class="scrollbar">
<img class="track" src="" _fcksavedurl="" alt="">
<img class="arrow-left" src="images/l.jpg" _fcksavedurl="images/l.jpg" alt="">
<img class="arrow-right" src="images/r.jpg" _fcksavedurl="images/r.jpg" alt="">
<img class="bar" src="images/s.png" _fcksavedurl="images/s.png" alt=""> </div>
</div>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用Javascript实现锚点(Anchor)间平滑跳转
Sep 08 Javascript
探讨在JQuery和Js中,如何让ajax执行完后再继续往下执行
Jul 09 Javascript
使用jQuery解决IE与FireFox下createElement方法的差异
Nov 14 Javascript
jquery prop的使用介绍及与attr的区别
Dec 19 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
javascript实现下雨效果
Mar 27 Javascript
JavaScript 日期时间选择器一些小结
Apr 02 Javascript
Vue 动态组件components和v-once指令的实现
Aug 30 Javascript
详解Vue的watch中的immediate与watch是什么意思
Dec 30 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
JS求解两数之和算法详解
Apr 28 Javascript
node.js 基于 STMP 协议和 EWS 协议发送邮件
Feb 14 Javascript
JavaScript数据操作_浅谈原始值和引用值的操作本质
Aug 23 #Javascript
JavaScript DOM节点操作方法总结
Aug 23 #Javascript
EasyUI创建对话框的两种方式
Aug 23 #Javascript
ES6所改良的javascript“缺陷”问题
Aug 23 #Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 #Javascript
如何利用JSHint减少JavaScript的错误
Aug 23 #Javascript
jQuery事件处理的特征(事件命名机制)
Aug 23 #Javascript
You might like
PHP的cURL库功能简介 抓取网页、POST数据及其他
2011/04/07 PHP
php返回json数据函数实例
2014/10/09 PHP
PHP PDOStatement::bindParam讲解
2019/01/30 PHP
另类调用flash无须激活的方法
2006/12/27 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
使用jquery读取html5 localstorage的值的方法
2013/01/04 Javascript
JavaScript设计模式之外观模式介绍
2014/12/28 Javascript
javascript中使用未定义变量或值的情况分析
2016/07/19 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
AngularJS深入探讨scope,继承结构,事件系统和生命周期
2016/11/02 Javascript
JS识别浏览器类型(电脑浏览器和手机浏览器)
2016/11/18 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
2016/12/26 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
Jquery中attr与prop的区别详解
2017/05/27 jQuery
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
2019/02/21 Javascript
vue实现商城秒杀倒计时功能
2019/12/12 Javascript
解决vue-cli@3.xx安装不成功的问题及搭建ts-vue项目
2020/02/09 Javascript
[45:25]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
python中函数默认值使用注意点详解
2016/06/01 Python
python并发编程 Process对象的其他属性方法join方法详解
2019/08/20 Python
基于Python爬取爱奇艺资源过程解析
2020/03/02 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
Python如何优雅删除字符列表空字符及None元素
2020/06/25 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
使用HTML5 Canvas API控制字体的显示与渲染的方法
2016/03/24 HTML / CSS
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
奶茶店创业计划书范文
2014/01/17 职场文书
酒店营销策划方案
2014/02/07 职场文书
中学生自我评价2015
2015/03/03 职场文书
毕业生自荐信范文
2015/03/05 职场文书
汽车销售合同文本
2019/08/08 职场文书
如何利用STAR法则制作留学文书?
2019/08/26 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书