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 相关文章推荐
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
跟我学习javascript的全局变量
Nov 16 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
May 13 Javascript
AngularJS基础 ng-hide 指令用法及示例代码
Aug 01 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
Bootstrap按钮组实例详解
Jul 03 Javascript
Node.js创建HTTP文件服务器的使用示例
May 11 Javascript
详解Vue SPA项目优化小记
Jul 03 Javascript
详解VUE单页应用骨架屏方案
Jan 17 Javascript
通过js实现压缩图片上传功能
Feb 25 Javascript
JS字符串和数组如何实现相互转化
Jul 02 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实现读取和编写XML DOM代码
2010/04/07 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
iframe 异步加载技术及性能分析
2011/07/19 Javascript
jquery 简短几句代码实现给元素动态添加及获取提示信息
2011/09/01 Javascript
JQuery for与each性能比较分析
2013/05/14 Javascript
使用GruntJS链接与压缩多个JavaScript文件过程详解
2013/08/02 Javascript
jQuery 属性选择器element[herf*='value']使用示例
2013/10/20 Javascript
理解JavaScript事件对象
2016/01/25 Javascript
Javascript实现苹果悬浮虚拟按钮
2016/04/10 Javascript
JS加载iFrame出现空白问题的解决办法
2016/05/13 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
jQuery插件HighCharts绘制2D带有Legend的饼图效果示例【附demo源码下载】
2017/03/10 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
利用JavaScript如何查询某个值是否数组内
2017/07/30 Javascript
Mongoose中document与object的区别示例详解
2017/09/18 Javascript
浅谈Vue-cli单文件组件引入less,sass,css样式的不同方法
2018/03/13 Javascript
js实现点击图片在屏幕中间弹出放大效果
2019/09/11 Javascript
vue-cli设置css不生效的解决方法
2020/02/07 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
python采用getopt解析命令行输入参数实例
2014/09/30 Python
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
Python OOP类中的几种函数或方法总结
2019/02/22 Python
python匿名函数用法实例分析
2019/08/03 Python
python中字典按键或键值排序的实现代码
2019/08/27 Python
python pip安装包出现:Failed building wheel for xxx错误的解决
2019/12/25 Python
python如何把字符串类型list转换成list
2020/02/18 Python
python实现密度聚类(模板代码+sklearn代码)
2020/04/27 Python
阿迪达斯希腊官方网上商店:adidas希腊
2019/04/06 全球购物
早会主持词
2014/03/17 职场文书
职务说明书范文
2014/05/07 职场文书
本科应届生求职信
2014/08/05 职场文书
作文评语集锦
2014/12/25 职场文书
苦儿流浪记读书笔记
2015/07/01 职场文书
2016大学军训通讯稿
2015/11/25 职场文书
vue-cli4.5.x快速搭建项目
2021/05/30 Vue.js
JavaScript最完整的深浅拷贝实现方式详解
2022/02/28 Javascript