那些code我在试着,但是弄到怪怪的
sherlock_fai 发表于 28-11-2009 08:20 AM 
记得找 transition.js 和 slideout_effect.js
然后link去你放的server...
————————————————————————————————————
<SCRIPT src="./Image Transition Library_files/transition.js" type="text/javascript"></SCRIPT>
<SCRIPT src="./Image Transition Library_files/slideout_effect.js" type="text/javascript"></SCRIPT>
<SCRIPT type="text/javascript">
<!--
var m = null;
var timer = null;
function loaded() {
m = new codeplay.image.TransitionMgr(2000,20,40,800,170,true);
var effects = new Array(0);
var imgs = new Array(0);
var imagesUrls = new Array(0);
effects.push(codeplay.common.Utils.getEffect(new codeplay.image.SlideOutEffect(), m));
effects[0].effectViewTime = 3800; //change its view time to 1.8s instead of the default 1.5s
imgs.push(document.getElementById("img1"));
imagesUrls.push(["","_blank","紫色天空创作","UMS Banner 1"]);
imgs.push(document.getElementById("img2"));
imagesUrls.push(["", "_blank", "紫色天空创作", "UMS Banner 2"]);
imgs.push(document.getElementById("img3"));
imagesUrls.push(["", "_blank", "紫色天空创作", "UMS Banner 3"]);
imgs.push(document.getElementById("img4"));
imagesUrls.push(["", "_blank", "紫色天空创作", "UMS Banner 4"]);
m.addEffects(effects);
m.addImages(imgs);
m.addImageUrls(imagesUrls);
m.start();
codeplay.common.Utils.addEvent(document.getElementById('img1s'), 'mouseover', function() { displayStaticImg(0); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img1s'), 'mouseout', function() { resume(); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img2s'), 'mouseover', function() { displayStaticImg(1); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img2s'), 'mouseout', function() { resume(); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img3s'), 'mouseover', function() { displayStaticImg(2); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img3s'), 'mouseout', function() { resume(); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img4s'), 'mouseover', function() { displayStaticImg(3); }, false);
codeplay.common.Utils.addEvent(document.getElementById('img4s'), 'mouseout', function() { resume(); }, false);
codeplay.common.Utils.addEvent(m.imagesDiv, m.displayImgChangedEvent, displayImgChged, false);
}
function displayImgChged(evt){
for(var i = 1; i <= 6; ++i)
if(i!=evt.imgId+1||m.stopped) document.getElementById('img'+i+'s').className = 'no_img_border';
else document.getElementById('img'+i+'s').className = 'thick_img_border';
}
function displayStaticImg(imgId) {
codeplay.common.Utils.log("displayStaticImg(" + imgId+")");
if (timer != null) clearTimeout(timer);
if(!m.stopped) m.stop();
m.displayImg(imgId);
}
//TODO: test
function resume() {
if (timer != null) clearTimeout(timer);
if (!m.stopped) return;
timer = codeplay.common.Utils.setTimeout(m.resume, 3000, m);
}
codeplay.common.Utils.addEvent(window, 'load', loaded, false);
//-->
</SCRIPT>
<LINK rel="stylesheet" type="text/css" href="./Image Transition Library_files/css.css">
</HEAD><BODY>
<SCRIPT type="text/javascript">
<!--
if (document.all)//Remove this script section if none of chosen effects requires vml in IE
document.write('<style>v\\: * { behavior:url(#default#VML); display:inline-block }</style><xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />');
//-->
</SCRIPT>
<DIV id="info" style="background-color:Yellow"></DIV>
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner1.jpg" alt="image 1" id="img1" class="hidden">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner2.jpg" alt="image 2" id="img2" class="hidden">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner1.jpg" alt="image 3" id="img3" class="hidden">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner2.jpg" alt="image 4" id="img4" class="hidden">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner1-1.jpg" alt="image 1 small" id="img1s" style="top:250px; left:60px; position:absolute" class="no_img_border">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner2-1.jpg" alt="image 2 small" id="img2s" style="top:250px; left:230px; position:absolute" class="no_img_border">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner1-1.jpg" alt="image 3 small" id="img3s" style="top:250px; left:400px; position:absolute" class="no_img_border">
<IMG src="http://i857.photobucket.com/albums/ab136/yungchie/umsbanner2-1.jpg" alt="image 4 small" id="img4s" style="top:250px; left:570px; position:absolute" class="no_img_border"> |