web: ปรับปรุงแสดงภาพแบบจางหาย
Submitted by wd on Wed, 2006-08-30 16:20
Topic:
เอาโค๊ดเดิมจาก http://javascript.internet.com และโค๊ดเพิ่มเติมจาก http://www.brainerror.net/scripts_js_blendtrans.php
หลักการคือใช้ฟังก์ชั่น setTimeout เหมือนเดิมในการกำหนดค่า opacity ของภาพ แล้วค่อย ๆ เพิ่มตามเวลาที่เรากำหนด
โค๊ดมีดังนี้
<script language="JavaScript"> <!-- Original: Robert Bui (astrogate@hotmail.com) --> <!-- Web Site: http://astrogate.virtualave.net --> <!-- This script and many more are available free online at --> <!-- The JavaScript Source!! http://javascript.internet.com --> <!-- Begin // ***** CHANGE TIMING HERE var interval = 10; var random_display = 1; // 0 = no, 1 = yes interval *= 1000; var image_index = 0; image_list = new Array(); // ***** INSERT IMAGE LIST HERE image_list[image_index++] = new imageItem("http://www.palapanyo.com/gal/random/w150/chwesigon.jpg"); image_list[image_index++] = new imageItem("http://www.palapanyo.com/gal/random/w150/chwedagon.jpg"); image_list[image_index++] = new imageItem("http://www.palapanyo.com/gal/random/w150/chaitiyo.jpg"); // END IMAGE LIST var number_of_image = image_list.length; // End --> function imageItem(image_location) { this.image_item = new Image(); this.image_item.src = image_location; } function get_ImageItemLocation(imageObj) { return(imageObj.image_item.src) } function generate(x, y) { var range = y - x + 1; return Math.floor(Math.random() * range) + x; } function getNextImage() { if (random_display) { image_index = generate(0, number_of_image-1); } else { image_index = (image_index+1) % number_of_image; } var new_image = get_ImageItemLocation(image_list[image_index]); return(new_image); } //change the opacity for different browsers function changeOpac(opacity, id) { var object = document.getElementById(id); opacity = (opacity == 100)?99.99:opacity; // New Firefox object.style.opacity = (opacity / 100); // Mozilla & Firefox object.style.MozOpacity = (opacity / 100); // Safari, Konqueror object.style.KhtmlOpacity = (opacity/100) ; // IE/Win object.style.filter = "alpha(opacity:" + opacity + ")"; } function rotateImage(place) { var divId = 'divgalid'; var divbg = document.getElementById(divId); var imageId = 'imggalid'; var image = document.getElementById(imageId); // set speed of fading var speed = Math.round(2500 / 100); // set background to old image document[place].backgroundImage=document[place].src; // make new image var new_image = getNextImage(); document[place].src = new_image; // set opac to 0 changeOpac(0, imageId); // fade image from 0 to 100 for (timer = 0; timer <= 100; timer++) { setTimeout("changeOpac(" + timer + ",'" + imageId + "')",(timer * speed)) } var recur_call = "rotateImage('"+place+"')"; setTimeout(recur_call, interval); } </script> <script> rotateImage('rImage'); </script>
ตรงที่จะแทรกโค๊ดใช้ html เหมือนเดิม ดังนี้
<div id="divgalid" style="width: 200px; height: 230px; text-align: center; float: right; background: #eee;"> <img name="rImage" src="http://www.palapanyo.com/gal/random/w150/chaitiyo.jpg" id="imggalid" /> </div>
Recent comments