首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

xiangqian0505

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
Eval and new funciton not the same thing
Dec 27 Javascript
文本有关的样式和jQuery求对象的高宽问题分别说明
Aug 30 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
javascript实现简单的贪吃蛇游戏
Mar 31 Javascript
JS设置网页图片vspace和hspace属性的方法
Apr 01 Javascript
基于JavaScript实现 网页切出 网站title变化代码
Apr 03 Javascript
图文详解Heap Sort堆排序算法及JavaScript的代码实现
May 04 Javascript
Angular2中如何使用ngx-translate进行国际化
May 21 Javascript
Vue框架里使用Swiper的方法示例
Sep 20 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
layui表格内容溢出的解决方法
Sep 06 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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
ICOM(2) 胆机(1) WR-800F(1) DE1105(1) DE1107(3) DE1103(2) SONY600GR(1) DE1102(1) R9700(1) 239军机(1)
You might like
phpMyAdmin 链接表的附加功能尚未激活的问题
2010/08/01 PHP
ThinkPHP采用原生query实现关联查询left join实例
2014/12/02 PHP
php实现对两个数组进行减法操作的方法
2015/04/17 PHP
PHP中如何判断exec函数执行成功？
2016/08/04 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
php实现微信公众平台发红包功能
2018/06/14 PHP
javascript的事件描述
2006/09/08 Javascript
js的Prototype属性解释及常用方法
2014/05/08 Javascript
JQuery通过AJAX从后台获取信息显示在表格上并支持行选中
2015/09/15 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
使用Bootstrap打造特色进度条效果
2017/05/02 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
在vue-cli 3中给stylus、sass样式传入共享的全局变量
2019/08/12 Javascript
python杀死一个线程的方法
2015/09/06 Python
简单介绍Python中的几种数据类型
2016/01/02 Python
Python中多线程的创建及基本调用方法
2016/07/08 Python
查找python项目依赖并生成requirements.txt的方法
2018/07/10 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
python获取交互式ssh shell的方法
2019/02/14 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
美国最大婚纱连锁店运营商：David’s Bridal
2019/03/12 全球购物
Bloomingdale’s阿联酋：选购奢华时尚、美容及更多
2020/09/22 全球购物
售后主管岗位职责
2013/12/08 职场文书
运输服务质量承诺书
2014/03/27 职场文书
2014年督导工作总结
2014/11/19 职场文书
2015年征兵工作总结
2015/07/23 职场文书
如何利用python和DOS获取wifi密码
2021/03/31 Python
用Java实现简单计算器功能
2021/07/21 Java/Android
Nginx进程调度问题详解
2021/09/25 Servers
Win7/8.1用户可以免费升级到Windows 11系统吗?
2021/11/21 数码科技
Python中如何处理常见报错
2022/01/18 Python
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
人物搭配车车超萌联名预备中 【咒术迴战】 ⨯ 【天竺鼠车车】 展开合作
2022/04/11 日漫
Python中npy和mat文件的保存与读取
2022/04/24 Python