`
xiangqian0505
  • 浏览: 321665 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS实现显示倒影的图片横排居中放大展示特效

htmljavascript 
阅读更多
<!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>
<FCK:meta http-equiv="Content-Type" content="text/html; charset=gb2312"  />
<title>JS实现显示倒影的图片横排居中放大展示特效</title>
<FCK: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="/uploads/allimg/091028/up01.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up02.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up03.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up04.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up05.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up06.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up01.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up02.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up03.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up04.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up05.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up06.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up02.jpg" title="" href="#" _fcksavedurl="#">室内三维设计效果图</a>
<a rel="/uploads/allimg/091028/up01.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="/uploads/allimg/091028/tbl.jpg" _fcksavedurl="/uploads/allimg/091028/tbl.jpg" alt="">
<img class="arrow-right" src="/uploads/allimg/091028/tbr.jpg" _fcksavedurl="/uploads/allimg/091028/tbr.jpg" alt="">
<img class="bar" src="/uploads/allimg/091028/tbs.jpg" _fcksavedurl="/uploads/allimg/091028/tbs.jpg" alt=""> </div>
</div>
</body>
</html>
分享到：
| oracle 函数
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    javascript 图片倒影 图片倒影简单实现 简单图片倒影

    总结来说，这个JavaScript图片倒影实现是一个实用的前端技巧，它利用JavaScript的动态特性来创建视觉上吸引人的效果，同时保持代码的简洁性。对于网页设计师和开发者来说，了解并掌握这种方法有助于提升网站的用户...

    JS实现图片倒影功能

    本文将深入探讨如何使用JavaScript实现图片倒影的功能，让图像在不改变原始图片的基础上，产生逼真的倒影效果。 首先，我们要明白倒影的原理：倒影通常是物体在水平面如水面、镜面等的反射，而在数字领域，我们可以...

    JS实现图片倒影效果

    在JavaScript（JS）中实现图片倒影效果是一种常见的前端技术，可以为网页增添动态和美观的视觉体验。本文将深入探讨如何使用纯JS代码来创建一个动态的图片倒影效果，而无需借助像Photoshop这样的图像编辑软件进行...

    HTML5+three.js水面倒影太阳动画特效

    在这个特定的项目中，“HTML5+three.js水面倒影太阳动画特效”是利用HTML5的Canvas元素和three.js库来创建一个动态的、逼真的水面效果，其中包含太阳的倒影和波动的水面。 首先，Canvas是HTML5的一个核心特性，它...

    JS倒影图片轮播

    "JS倒影图片轮播"是一种利用JavaScript实现的特效，它不仅展示了图片轮播的功能，还增加了倒影效果，使得网页更加生动和专业。这种技术主要依赖于JavaScript库和CSS3来实现，下面我们将详细讲解其工作原理和实现步骤...

    js实现的图片倒影幻灯片切换特效源码.zip

    这个"js实现的图片倒影幻灯片切换特效源码.zip"就是一个很好的实例，它展示了如何利用JS技术来创建一个具有倒影效果的图片幻灯片切换功能。下面我们将深入探讨这个主题，解析其中涉及的关键知识点。 首先，我们需要...

    QtC++实现控件倒影特效的两种方法（按钮为例）

    在Qt编程环境中，实现控件倒影特效可以增强界面的视觉效果，使用户界面看起来更加现代化和专业。本文将详细讲解两种不同的方法来为Qt中的控件，特别是按钮，添加倒影效果。这两种方法分别是使用QGraphicsView和...

    JS 3D卷筒式倒影图片选择代码.zip

    总的来说，"JS 3D卷筒式倒影图片选择代码"是一个结合了JavaScript和CSS3技术的创新示例，它展示了前端开发中3D特效的实现方法，对于提升用户体验和网页设计的创意性具有积极的借鉴价值。通过深入理解和应用这个代码...

    网页特效：5个能用JavaScript实现的图片特效

    以上五个JavaScript图片特效都是网页设计师的常用工具，它们不仅可以提升网站的视觉吸引力，还能增强用户的交互体验。通过深入理解和实践这些技术，开发者可以创建出更多富有创新和个性化的网页交互元素。

    html5带倒影3D图片叠加轮播切换特效

    在本主题"html5带倒影3D图片叠加轮播切换特效"中，我们将探讨如何利用HTML5的特性实现一个具有3D效果、图片倒影和轮播切换功能的动态图像展示。 首先，HTML5的`&lt;canvas&gt;`元素是实现这种特效的关键。`&lt;canvas&gt;`允许...

    javascript图片倒影特效处理

    总结，创建JavaScript图片倒影特效涉及的知识点包括JavaScript基础、HTMLImageElement接口的使用、CSS样式控制（尤其是`transform`和`opacity`属性）、以及DOM操作。通过这些技术，我们可以为网页中的图片添加生动的...

    js进度条拖动倒影图片放大效果.zip

    这个效果主要用于展示一个带有倒影的图片，当用户在进度条上拖动时，图片会根据进度条的位置动态放大，同时倒影也会相应变化，创造出一种立体感和动态视觉体验。 首先，我们需要理解这个效果的核心组成部分： 1. *...

    js图片倒影显示幻灯片切换代码.zip

    在这个“js图片倒影显示幻灯片切换代码”压缩包中，我们主要讨论的是如何利用JavaScript来实现一个具有图片倒影效果的幻灯片切换功能。 首先，幻灯片切换是网页设计中常见的元素，通常用于展示一组图片或内容，并...

    js imageflow.js插件带进度条拖动倒影图片放大效果

    ImageFlow.js是一款强大的JavaScript插件，它为网页中的图片展示带来了一种独特且互动的体验。这个插件的核心特性在于其动态的拖动倒影和图片放大效果，同时结合了进度条显示，使得用户在浏览图片时能感受到更加流畅...

    HTML5 Canvas图片倒影波纹动画特效.zip

    标签中的“JS特效-图片相册”暗示这个特效可能被用于展示一组图片，比如在图片相册应用中。用户可以滚动或点击切换图片，而每张图片都会呈现出这种动态的倒影波纹效果，增加视觉吸引力。 在提供的压缩包中，“说明....

    js html5实现图片倒影效果代码.zip

    这个名为"js html5实现图片倒影效果代码.zip"的压缩包提供了实现这一目标的具体代码示例。 首先，我们来看HTML5的`&lt;img&gt;`标签，它是用来在网页中插入图像的基础元素。在描述中提到，只需给`&lt;img&gt;`标签添加一个特定...

    网站图片左右移动倒影超炫特效

    综上所述，"网站图片左右移动倒影超炫特效"是结合了CSS3、JavaScript和现代网页设计理念的创新技术，它能提升网站的视觉质量和用户体验。通过熟练掌握上述知识点，开发者可以创造出更多富有创意和互动性的网页元素。...

Magicbox
Global site tag (gtag.js) - Google Analytics