音画特效代码集

紫轩 · 发表于 2010-4-29 12:38

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？注册

x

波浪式图片展现：三峡情例

代码如下分割线下

*******************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD><TITLE>-SHERRY音画-</TITLE>
<META http-equiv=Content-Style-Type content=text/css>
<META content="MSHTML 6.00.2716.2200" name=GENERATOR>
<STYLE type=text/css>.time {
BEHAVIOR: url(#default#time2)
}
BODY {
BORDER-RIGHT: #5C3317  1px ridge; BORDER-TOP: #5C3317  1px ridge; MARGIN: 0px;

OVERFLOW: hidden; BORDER-LEFT: #5C3317  1px ridge; BORDER-BOTTOM: #5C3317  1px ridge
}
#layer1 {
SCROLLBAR-ARROW-COLOR: #5C3317 ; SCROLLBAR-BASE-COLOR: black
}

</STYLE>
<style type="text/css">
* {margin:0;padding:0;}
body {margin:0px auto;background:#000000;}
img {margin:0;border:0;padding:0;}
#jsF {position:relative;margin:0;width:1000px;height:482px;overflow:hidden;}
#jsF ul {position:absolute;top:0;left:-2;list-style-type:none;z-index:2;}
#jsF li {display:block;position:absolute;top:0;margin:0;padding:0;overflow:hidden;}
</style>
</head>

<body>
<div id="jsF"></div>
<div id="debug"></div>

<script>
//<[CDATA[
var jsF = document.getElementById('jsF');
var speed1 = 200, speed2 = 6000;
var iA = 0, iB = 0, iC = 0;
var bD = [];
var aImg = ['http://blog.newssc.org/UploadFiles/2010-4/271029905157.jpg','http://blog.newssc.org/UploadFiles/2010-4/271029256579.jpg','http://blog.newssc.org/UploadFiles/2010-4/271030430547.jpg','http://blog.newssc.org/UploadFiles/2010-4/271030367376.jpg','http://blog.newssc.org/UploadFiles/2010-4/271031559087.jpg','http://blog.newssc.org/UploadFiles/2010-4/271033451160.jpg' ];
var aLink = ['','','','','','',''];
var iImgWidth = 1000, iImgHeight = 482;
var iDivWidth = iImgWidth/10;
jsF.style.width = iImgWidth + 'px';
jsF.style.height = iImgHeight + 'px';
var oImg = [];
oImg[0] = new Image();
oImg[0].src = aImg[0];
oImg[1] = new Image();
oImg[1].src = aImg[1];
window.onload = function() {
jsF_create();
}
//
function jsF_create() {
if (aImg[iA+2] && !bD[iA+2]){
  oImg[iA+2] = new Image();
  oImg[iA+2].src = aImg[iA+2];
}
if (!bD[iA]) {
  var oUl = document.createElement('ul');
  /*oUl.style.position = 'absolute';
  oUl.style.top = '0';
  oUl.style.left = '0';*/
  oUl.style.width = iImgWidth + 'px';
  oUl.style.height = iImgHeight + 'px';
  var oUlLi = document.createElement('li');
  oUlLi.style.right = '0';
  oUlLi.style.width = iDivWidth +'px';
  oUlLi.style.height = iImgHeight + 'px';
  var oLiA = document.createElement('a');
  oLiA.href = aLink[iA];
  var oLiImg = document.createElement('img');
  oLiImg.src = oImg[iA].src;
  oLiImg.style.marginLeft = -6*iDivWidth + 'px';
  oLiA.appendChild(oLiImg);
  oUlLi.appendChild(oLiA);
  oUl.appendChild(oUlLi);
  for (var i=0; i<10; i++) {
oUlLi = document.createElement('li');
oUlLi.style.right = i*iDivWidth + 'px';
oUlLi.style.width = 1.5*iDivWidth +'px';
oUlLi.style.height = iImgHeight + 'px';
//oUlLi.style.background = color[i];
oLiA = document.createElement('a');
oLiA.href = aLink[iA];
oLiImg = document.createElement('img');
oLiImg.src = oImg[iA].src;
oLiImg.style.marginLeft = -6*iDivWidth + 'px';
oLiA.appendChild(oLiImg);
oUlLi.appendChild(oLiA);
//oUlLi.appendChild(document.createTextNode(i));
oUl.appendChild(oUlLi);
  }
  jsF.appendChild(oUl);
  bD[iA] = !bD[iA];
}
jsF_show();
//document.getElementById('debug').innerText = jsF.innerHTML;
}
//
function jsF_show(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
oUl[iA].style.zIndex = ++iC;
for (var i=1; i<11; i++){
  oImgs[i].style.marginLeft = -6*iDivWidth + 'px';
  oImgs[i].style.visibility = 'hidden';
}
jsF_move();
}
//
function jsF_move(){
var oUl = jsF.getElementsByTagName('ul');
var oLi = oUl[iA].getElementsByTagName('li');
var oImgs = oUl[iA].getElementsByTagName('img');
if (iB++<10)
  oImgs[iB].style.visibility = 'visible';
for (var i=1; i<oImgs.length; i++) {
  var iBgpx = parseInt(oImgs[i].style.marginLeft);
  if (iBgpx<(i+0.5)*iDivWidth-iImgWidth) {
var iMovePx = Math.floor((iImgWidth-(i+0.5)*iDivWidth+iBgpx)/15);
oImgs[i].style.marginLeft = iBgpx - iMovePx + 'px';
  } else {
oImgs[i].style.marginLeft = ((i+0.5)*iDivWidth-iImgWidth) + 'px';
  }
}
//document.getElementById('debug').innerText = jsF.innerHTML;
if (parseInt(oImgs[10].style.marginLeft)<0.5*iDivWidth) {
  setTimeout('jsF_move()',speed1);
} else {
  iB = 0;
  //document.getElementById('debug').innerText = oUl[iA].style.display;
  iA = ++iA==aImg.length ? 0 : iA;
  if (bD[iA]) {
setTimeout('jsF_show()',speed2);
  } else {
setTimeout('jsF_create()',speed2);
  }
}
}
//]]>
</script>

<OBJECT id=aboutplayer height=0 width=0
classid=clsid:6bf52a52-394a-11d3-b153-00c04f79faa6 ?><PARAM

NAME="AutoStart" VALUE="-1"><PARAM NAME="Balance" VALUE="-1"><PARAM

NAME="enabled" VALUE="-1"><PARAM NAME="EnableContextMenu" VALUE="-

1"><PARAM NAME="url"

VALUE="http://tg.6621.cn/201004/sherry1224/c611049ff6ce0f7e.wma"><PARAM

NAME="PlayCount" VALUE="1"><PARAM NAME="rate" VALUE="1"><PARAM

NAME="currentPosition" VALUE="-1"><PARAM NAME="currentMarker"

VALUE="-1"><PARAM NAME="defaultFrame" VALUE="-1"><PARAM

NAME="invokeURLs" VALUE="0"><PARAM NAME="baseURL" VALUE=""><PARAM

NAME="stretchToFit" VALUE="-1"><PARAM NAME="volume"

VALUE="100"><PARAM NAME="mute" VALUE="0"><PARAM NAME="uiMode"

VALUE="mini"><PARAM NAME="windowlessVideo" VALUE="0"><PARAM

NAME="fullScreen" VALUE="0"><PARAM NAME="enableErrorDialogs"

VALUE="-1"><PARAM NAME="SAMIStyle" VALUE=""><PARAM NAME="SAMILang"

VALUE=""><PARAM NAME="SAMIFilename"

VALUE="">

</body>

</html>

**********************

注明：自己只需要换图片就行

紫轩 · 发表于 2010-4-29 12:40

http://wycbbs.com/thread-154590-1-1.html

楼上效果链接

紫轩 · 发表于 2010-4-29 12:41

画面小图展播特效果：故事例

*************************

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HEAD><TITLE>SHERRY</TITLE>
<META http-equiv=Content-Style-Type content=text/css>
<META content="MSHTML 6.00.2716.2200" name=GENERATOR>
<STYLE type=text/css>.time {
BEHAVIOR: url(#default#time2)
}
BODY {
BORDER-RIGHT: #778899 1px ridge; BORDER-TOP: #778899 1px ridge; MARGIN: 0px;

OVERFLOW: hidden; BORDER-LEFT: #778899 1px ridge; BORDER-BOTTOM: #778899 1px ridge
}
#layer1 {
SCROLLBAR-ARROW-COLOR: #778899 ; SCROLLBAR-BASE-COLOR: black
}

</STYLE>
<BODY id=body1 background=http://blog.newssc.org/UploadFiles/2010-4/282056861376.jpg>
<embed src='http://files.17173.com/news/201001/12.mp3'width=0 height=0 volume="0">
</style>
<script type="text/javascript">

window.onerror = new Function("return true");

screen.bufferDepth = 5;

document.onselectstart = function () { return false; }

var NX = 3;

var NY = 3;

var SP = 20;

var DELAY = 150;

var object = new Array();

var nI = 0;

var run = false;

var xrun = 0;

var dR = 1;

var iW = 0;

var iH = 0;

var oH = 0;

var oW = 0;

function CObj(N,y,x){

this.obj = document.createElement("span");

this.obj.onclick = new Function("object["+N+"].GE1()");

this.obj.onmousedown = new Function("return false;");

this.obj.style.cursor = "pointer";

this.obj.style.position = "absolute";

this.img = document.createElement("img");

this.img.style.position = "absolute";

this.img.src = IMGSRC[N%nI].src;

this.obj.appendChild(this.img);

IMGBOX.appendChild(this.obj);

this.object = new Array();

this.x = x;

this.y = y;

this.N = N;

this.W = 0;

this.H = 0;

this.L = 0;

this.T = 0;

function CImg(Parent,y,x){

this.Parent = Parent;

this.obj = document.createElement("span");

this.obj.style.position="absolute";

this.obj.style.overflow="hidden";

this.obj.style.cursor = "pointer";

this.img = document.createElement("img");

this.img.style.position = "absolute";

this.img.src = IMGSRC[N%nI].src;

this.obj.appendChild(this.img);

this.Parent.obj.appendChild(this.obj);

this.N = Parent.N;

this.x = x;

this.y = y;

this.W = 0;

this.H = 0;

this.L = 0;

this.T = 0;

this.dx = 0;

this.dy = 0;

this.px = 0;

this.py = 0;

this.dw = 0;

this.dh = 0;

this.pw = 0;

this.ph = 0;

this.ipx = 0;

this.ipy = 0;

this.idx = 0;

this.idy = 0;

this.GE2 = function (){

with(this){

px -= dx * dR;

py -= dy * dR;

pw += dw * dR;

ph += dh * dR;

ipx -= idx * dR;

ipy -= idy * dR;

with(obj.style){

left = Math.round(px);

top = Math.round(py);

width = Math.round(pw)+1;

height = Math.round(ph)+1;

if(dR==-1)if(pw<=W+1)obj.style.visibility="hidden";

}

with(img.style){

left = Math.round(ipx-oW);

top = Math.round(ipy-oH);

}

if(++xrun>=NX*NY*SP){

xrun=0;

run=false;

if(dR==-1)Parent.obj.style.zIndex = 0;

dR = -dR;

}

}

}

this.GE1 = function (N1,N2){

with(this){

if(dR==1){

px = L;

py = T;

dx = ((Parent.L + L) - (x * Parent.W)) / SP;

dy = ((Parent.T + T) - (y * Parent.H)) / SP;

pw = W;

ph = H;

dw = (Parent.W - W) / SP;

dh = (Parent.H - H) / SP;

ipx = -L;

ipy = -T;

idx = ((x * Parent.W) - L) / SP;

idy = ((y * Parent.H) - T) / SP;

}

obj.style.visibility="visible";

if(img.height>document.body.offsetHeight)oH=(img.height-document.body.offsetHeight)/2; else oH = 0;

if(img.width>document.body.offsetWidth/2)oW=(img.width-(document.body.offsetWidth/2))/2; else oW = 0;

for(i=0;i<SP;i++) setTimeout("object["+N1+"].object["+N2+"].GE2()",16*i);

}

}

this.DOOT = function (){

with(this){

W = Parent.W / NX;

H = Parent.H / NY;

L = x * W;

T = y * H;

}

}

}

var k = 0;

for(var i=0;i<NY;i++)

for(var j=0;j<NX;j++)

this.object[k++] = new CImg(this,i,j);

this.GE1 = function (){

with(this){

if(!run){

TXTBOX.innerHTML = "<div style='margin:2%'>"+TXTSRC[N%nI].innerHTML+"</div>";

run = true;

obj.style.zIndex = 1;

for(var i=0;i<NX*NY;i++) setTimeout("object["+N+"].object["+i+"].GE1("+N+","+i+")",i*DELAY);

}

}

}

this.DOOT = function (){

with(this){

if(img.width<iW)iW=img.width;

if(img.height<iH)iH=img.height;

with(obj.style){

W = width = iW / NX;

H = height = iH / NY;

L = left = x * W;

T = top = y * H;

}

with(img.style){

width = W;

height = H;

}

for(var i in object) object[i].DOOT();

}

}

}

onload = function() {

IMGSRC = document.getElementById("imgsrc").getElementsByTagName("img");

TXTSRC = document.getElementById("txtsrc").getElementsByTagName("div");

IMGBOX = document.getElementById("imgbox");

TXTBOX = document.getElementById("txtbox");

CENTER = document.getElementById("center");

iH = document.body.offsetHeight;

iW = document.body.offsetWidth/2;

nI = IMGSRC.length;

var k = 0;

for(var i=0;i<NY;i++){

for(var j=0;j<NX;j++){

object[k] = new CObj(k,i,j);

object[k++].DOOT();

}

}

IMGBOX.style.width = iW;

IMGBOX.style.height = iH;

TXTBOX.style.width = iW;

TXTBOX.style.height = iH;

TXTBOX.style.left = iW;

TXTBOX.style.visibility="visible";

CENTER.style.left = -iW;

CENTER.style.top = -iH/2;

}

//-->

</script>

</head>

<body>

<div style="position:absolute;left:35%;top:52%;"><div id="center" style="position:absolute;">

<div id="imgbox" style="position:absolute;left:0;top:-100;overflow:hidden;"></div>

<div id="txtbox" style="position:absolute;left:0;top:-100;visibility:hidden;overflow:hidden;background:#295F29;color:#FFF;font-family:verdana;font-size:0.8em;">

<div style="margin:2%">

<h2>故事</h2>有一个故事一直在讲<br>

<br>

</div>

</div>

</div></div>

<div id="imgsrc" style="visibility:hidden">

<img src="http://blog.newssc.org/UploadFiles/2010-4/282058165887.jpg">

<img src="http://blog.newssc.org/UploadFiles/2010-4/282058930343.jpg">

<img src="http://blog.newssc.org/UploadFiles/2010-4/28213907615.jpg">

<img src="http://blog.newssc.org/UploadFiles/2010-4/28213562342.jpg">

<img src="http://blog.newssc.org/UploadFiles/2010-4/28214294248.jpg">

<img src="http://blog.newssc.org/UploadFiles/2010-4/28214829447.jpg">

</div>

<div id="txtsrc" style="visibility:hidden">

<div>

<h2>故事</h2><br>还是那片海

</div>

<div>

<h2>故事</h2><br>从来也没有停止过等待

</div>

<div>

<h2>还是故事</h2><br>她相信她的王子会来

</div>

<div>

<h2>故事继续</h2><br>她为他点亮灯火，照彻他到来的海洋

</div>

<div>

<h2>故事继续</h2><br>不怕风吹浪打

</div>

<div>

<h2>故事。。。。。</h2><br>如果这是美丽的结局，那么……

</div>

<div>

<h2>从前</h2><br>是不是还需要去讲一次

</div>

<div>

<h2>故事</h2><br>从前有个传说

</div>

<div>

<h2>依然是故事</h2><br>不知道还有多少人愿意听……

</div>

</div>



<span id=LB0 style="position:absolute;left:50%;top:50%;"><span style="position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50;top:-18">Loading...</span>

<span style="position:absolute;left:0;top:-5;font-size:1px;width:100;height:10px;background:#333"><span id=LB1 style="position:absolute;left:0;top:0;font-size:1px;width:0;height:10px;background:#FFFFFF"></span></span></span>

<script>m00=document.getElementById("imgsrc").getElementsByTagName("img");m01=m00.length;function images_loading_bar(){m02=0;for(i=0;i<m01;i++)m02+=(m00[i].complete)?1:0;document.getElementById("LB1").style.width=Math.round(m02/m01*100);if(m02==m01)setTimeout("document.getElementById('LB0').style.display='none'",128); else setTimeout("images_loading_bar()", 64);};images_loading_bar();</script>

</body>

</html>

紫轩 · 发表于 2010-4-29 12:42

楼上效果链接

http://wycbbs.com/thread-154668-1-1.html

紫轩 · 发表于 2010-5-2 21:53

窗口展播代码：母亲例

************************************

<HTML xmlns:t = "urn:schemas-microsoft-com:time">
<HEAD>
<TITLE>-音画-</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">

<STYLE>.time {
BEHAVIOR: url(#default#time2)
}
t\:* {
BEHAVIOR: url(#default#time2)
}
</STYLE>
</HEAD>
<EMBED src="http://www.jslskj.com/rs7caiZone/Mother.mp3" hidden=true type=audio/x-ms-wma AUTOSTART="1" autostart="true" loop="true">
<BODY id=body1 bgColor=#a46423 background="" scroll=no>

<t:SEQ repeatCount="indefinite">

<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22121903989.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Stretch(StretchStyle=PUSH)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22121806431.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Strips(motion='rightdown')" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22121549378.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Zigzag(sProperties)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22122155573.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Blinds(sProperties)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22122721809.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.GradientWipe(sProperties)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22122122971.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Pixelate(sProperties)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22121903989.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.RandomBars(sProperties)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>
<t:MEDIA style="FILTER: alpha;LEFT:52;TOP:95;WIDTH:450; POSITION: absolute;HEIGHT:334" src=http://blog.newssc.org/UploadFiles/2010-5/22121806431.jpg dur="5" fill="transition" timeContainer="par">
<t:TRANSITIONFILTER from="0" to="1" type="progid:DXImageTransform.Microsoft.Spiral(SProperties)" dur="2">

</t:TRANSITIONFILTER>
</t:MEDIA>

</t:SEQ>

</div>
<img src="http://blog.newssc.org/UploadFiles/2010-5/22117128313.gif" style="width:1010; height:600; position:absolute; left:0; top:0; " >

<EMBED style="LEFT: 450px; WIDTH: 250px; POSITION: absolute; TOP: 165px; HEIGHT: 250px" align=right src=http://xuanfei.cctv118.com/20081115/114123.swf type=application/octet-stream ;; quality="high" wmode="transparent"></EMBED>

</BODY>
</HTML>

紫轩 · 发表于 2010-5-2 21:54

楼上效果
http://wycbbs.com/viewthread.php ... p;extra=#pid2475777

朗州秋雨 · 发表于 2010-5-13 11:42

波浪式图片展现：三峡情例

代码如下分割线下

*******************

-SHERRY音画-

.time { ...
紫轩发表于 2010-4-29 12:38

登录/注册后可看大图

一换自己的图片就不显示了。晕死。。。

[发帖际遇]: 朗州秋雨从稻香村买月饼寄回衡阳，花了现金60元.

紫轩 · 发表于 2010-7-20 00:31

应该可以显示的

帐号		自动登录	找回密码
密码			注册

音画特效代码集 [复制链接] (7/627)

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。