代码音画：《纪念抗战胜利76周年》

红枫发表于 2021-9-4 14:03

<div style="POSITION: relative; WIDTH: 1650px; height: 900px; TOP: 0px; LEFT: -200px; overflow: hidden;">

<!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" />
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">

#imageFlow {
overflow: hidden;
position: absolute;
width: 100%;
height: 120%;
left: 0%;
top: 1%;
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: 50%;
background: #181818;

}
#imageFlow .text {
position: absolute;
left: 0px;
width: 100%;
bottom: 19%;
text-align: center;
font-size: 3.5em;
color: yellow;
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: 1%;
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>

<title>纪念抗战胜利76周年--深秋红枫</title>

<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.className == className) ret.push(o);
if (ret.length == 1) ret = ret;
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 {

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) + ')';
}

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; }

var img = getElementsByClass(this.oc, 'div', 'bank').getElementsByTagName('a');
this.NF = img.length;
for (var i = 0, o; o = img; i++) {
this.diapos = new Diapo(this, i,
o.rel,
o.title || '- ' + i + ' -',
o.innerHTML || o.rel,
o.href || '',
o.target || '_self'
);
}

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);
}

this.bar.onmousedown = function (e) {
if (!e) e = window.event;
var scl = e.screenX - this.offsetLeft;
var self = this.parent;

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;
}

this.parent.oc.onmouseup = function (e) {
self.oc.onmousemove = null;
return false;
}
return false;
}

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;
if (o && o.loaded) {

var ob = this.diapos;
if (ob && ob != o) {
ob.img.className = 'diapo';
ob.z1 = 1;
}

this.title.replaceChild(document.createTextNode(o.title), this.title.firstChild);
this.legend.replaceChild(document.createTextNode(o.text), this.legend.firstChild);

if (o.url) {
o.img.className = 'diapo link';
window.status = 'hyperlink: ' + o.url;
} else {
o.img.className = 'diapo';
window.status = '';
}

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++) {
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--) {
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;
}
}

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';
}

this.back = this.view;
}
},

scroll : function (sc) {
if (sc < 0) {
if (this.view < this.NF - 1) this.calc(1);
} else {
if (this.view > 0) this.calc(-1);
}
},

resize : function () {
this.wh = this.oc.clientWidth;
this.ht = this.oc.clientHeight;
this.ws = this.scrollbar.offsetWidth;
this.calc();
this.run(true);
},

run : function (res) {
var i = this.NF;
while (i--) this.diapos.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);

if (url) {
this.img.onmouseover = function () { this.className = 'diapo link'; }
this.img.onmouseout= function () { this.className = 'diapo'; }
}
}

Diapo.prototype = {

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) {

this.x0 += sx * .1;
this.w0 += sw * .1;
if (this.x0 < this.parent.wh && this.x0 + this.w0 > 0) {

this.visible = true;
var o = this.img.style;
var h = this.w0 * this.r;

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';

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 {

if (this.visible) {
this.visible = false;
this.img.style.width = '0px';
if (this.flx) this.flx.style.width = '0px';
}
}
}
} else {

if (this.img.complete && this.img.width) {

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();
}
}
},

click : function () {
if (this.parent.view == this.N) {

if (this.url) {

window.open(this.url, this.target);
} else {

this.z1 = this.z1 == 1 ? this.parent.zoom : 1;
this.parent.calc();
}
} else {

this.parent.view = this.N;
this.parent.calc();

}
return false;
}
}

return {

create : function (div, size, zoom, border) {

var load = function () {
var loaded = false;
var i = instances.length;
while (i--) if (instances.oCont == div) loaded = true;
if (!loaded) {

instances.push(
new ImageFlow(div, size, zoom, border)
);

if (!imf.initialized) {
imf.initialized = true;

addEvent(window, 'resize', function () {
var i = instances.length;
while (i--) instances.resize();
});

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.oc.onmousemove = null;
}
return false;
});

setInterval(function () {
var i = instances.length;
while (i--) instances.run();
}, 16);
}
}
}

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>
<divstyle="position:absolute; top:-100px;left:0px;"><img src="https://z3.ax1x.com/2021/09/04/hg9E4K.jpg" width=1650px height=850px /></div>

<divstyle="position:absolute; top:10px;left:0px;"width=1000px height=700px><img src="https://z3.ax1x.com/2021/09/04/hgC5Lj.gif" width=1000px height=700px /></div>

<div class="bank">
<a rel="https://z3.ax1x.com/2021/09/04/hg9e3D.gif"title=" " href=" ">
今年，是中国人民抗日战争胜利76周年</a>
<a rel="https://z3.ax1x.com/2021/09/04/hg9Z9O.gif" title=" " href="#">
也是世界人民反法西斯战争胜利76周年</a>
<a rel="https://z3.ax1x.com/2021/09/04/hg9AN6.gif" title=" " href="#">
为缅怀英烈，牢记历史，特作此音画纪念</a>
         <a rel="https://z3.ax1x.com/2021/09/04/hg9QHI.gif" title=" " href="#">
中华民族与世界各族人民一样，永远热爱和平</a>
<a rel="https://z3.ax1x.com/2021/09/04/hg9mge.gif" title=" " href="#">
         但我们从不惧霸权，更不害怕战争</a>
<a rel="https://z3.ax1x.com/2021/09/04/hg9Kud.gif" title=" " href="#">
我们有能力经过不懈奋斗，实现中华民族伟大复兴之中国梦</a>
            <a rel="https://z3.ax1x.com/2021/09/04/hg9MDA.gif" title=" " href="#">
素材及音效：网络</a>
<a rel="https://z3.ax1x.com/2021/09/04/hgClM4.gif" title=" " href="#">
   动画改编与网页编制：深秋红枫</a>
<a rel="https://z3.ax1x.com/2021/09/04/hgC0Qe.gif" title=" " href="#">
完成于 2021年9月3日上海</a>
</div>
<div class="text">
<div class="title">
Loading</div>
<div class="legend">
Please wait...</div>
</div>
</div>

<audio src="http://music.163.com/song/media/outer/url?id=419646049.mp3" autoplay="autoplay" loop="loop"</audio>
</body>
</html>

</div>
<BR><BR><BR><BR><BR><BR>

195400 发表于 2021-9-4 15:16

http://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif

红枫发表于 2021-9-4 16:20

谢谢老师欣赏和临帖鼓励！还得好好向您老虚心学习，争取更大进步！！

195400 发表于 2021-9-4 22:32

仿制个小号的:lol

<style type="text/css">
#picblk {
width:2460px;height:150px;position:absolute; left:322px; bottom:0px;
}
#picblk img {
width:250px;height:100px;
border:thin gray dotted;float:left;
overflow:hidden;border-radius:8px;
margin-right:6px;-webkit-box-reflect: below 2px
-webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.5)));
}

#picblk img:nth-child(1) {
width:375px;height:150px;margin-top:-36px;
}
#mainFrame {
width:1024px;height:800px;text-align:center;
border:thick brown groove;margin:100px 0px 32px -100px;
position:relative;overflow:hidden;
background:brown url(https://z3.ax1x.com/2021/09/04/hg9E4K.jpg) no-repeat 0 0 / 100%;
}
#txtDesc {
color:yellow;
display:block;
margin-top:772px;
font:bold 1.5em 仿宋;
}
</style>

<div id="mainFrame">
<img src="https://z3.ax1x.com/2021/09/04/hgC5Lj.gif" style="width:900px;position:absolute;top:0px;left:50px;" />
<div id="picblk" style="left:322px;">
<img src="https://z3.ax1x.com/2021/09/04/hg9e3D.gif" title="0今年，是中国人民抗日战争胜利76周年" >
<img src="https://z3.ax1x.com/2021/09/04/hg9Z9O.gif" title="1也是世界人民反法西斯战争胜利76周年" >
<img src="https://z3.ax1x.com/2021/09/04/hg9AN6.gif" title="2为缅怀英烈，牢记历史，特作此音画纪念" >
<img src="https://z3.ax1x.com/2021/09/04/hg9QHI.gif" title="3中华民族与世界各族人民一样，永远热爱和平" >
<img src="https://z3.ax1x.com/2021/09/04/hg9mge.gif" title="4但我们从不惧霸权，更不害怕战争" >
<img src="https://z3.ax1x.com/2021/09/04/hg9Kud.gif" title="5我们有能力经过不懈奋斗，实现中华民族伟大复兴之中国梦" >
<img src="https://z3.ax1x.com/2021/09/04/hg9MDA.gif" title="6素材及音效：网络" >
<img src="https://z3.ax1x.com/2021/09/04/hgClM4.gif" title="7动画改编与网页编制：深秋红枫" >
<img src="https://z3.ax1x.com/2021/09/04/hgC0Qe.gif" title="8完成于 2021年9月3日上海" >
</div>
<span id="txtDesc">今年，是中国人民抗日战争胜利76周年</span>
</div>

<script type="text/javascript">
var picMoveLeft = [{left: '322px'}, {left: '322px'}];
var pmlTiming = {
duration: 500,
fill:'forwards'
};

var picIdx = 0;
var curIdx = 0;
var fromPos = '322px';
var toPos = '322px';
var picblk = document.querySelector('#picblk');
var pics = document.querySelectorAll('#picblk img');
var txtDesc = document.querySelector('#txtDesc');
for(n = 0; n < pics.length; n++) {
pics.onclick = function() {
picIdx = parseInt(this.title.substr(0, 1));
if(picIdx != curIdx) {

pics.style.width = '250px' ;
pics.style.height = '100px' ;
pics.style.marginTop = '0px' ;

this.style.width = '375px' ;
this.style.height = '150px';
this.style.marginTop = '-36px';

txtDesc.innerHTML = this.title.substr(1);
// 缓慢移动转换
picMoveLeft.left = fromPos;

toPos = (322 - picIdx * 256) + 'px';
picMoveLeft.left = toPos;
picblk.animate(picMoveLeft, pmlTiming);
// 快速转换
//picblk.style.left = (322 - picIdx * 256) + 'px';

curIdx = picIdx; fromPos = toPos;

}
}
}
</script>

雄鹰翱翔 发表于 2021-9-5 05:40

欣赏老师佳作，赞一个！

红枫发表于 2021-9-5 19:06

195400 发表于 2021-9-4 22:32
仿制个小号的

观阅了您的代码，虽省略了下方小图的倒影设置，但代码简洁多了，且达到与原作效果基本一致，甚是敬服。谢谢您谢谢您的指导！

诺北发表于 2021-9-5 19:42

做的精彩，再往左一些居中就更好了

195400 发表于 2021-9-5 20:02

红枫发表于 2021-9-5 19:06
观阅了您的代码，虽省略了下方小图的倒影设置，但代码简洁多了，且达到与原作效果基本一致，甚是敬服。谢 ...

没注意有倒影，其实也就是个CSS设置，加上了。

您的代码没看懂，按自己想法模仿了一下。

红枫发表于 2021-9-5 20:51

诺北发表于 2021-9-5 19:42
做的精彩，再往左一些居中就更好了

谢谢你的赞赏！是可以再往左一些，但如此在手机里看或有些浏览器看就会少了左边一截的图片的。

红枫发表于 2021-9-6 06:25

雄鹰翱翔发表于 2021-9-5 05:40
欣赏老师佳作，赞一个！

谢谢雄鹰版主临帖赞赏鼓励！

页: [1] 2

中画网's Archiver

代码音画：《纪念抗战胜利76周年》