|
موضوع اسكريپت چرخش
اين اسكريپت به طور ذاتي ما بين دو تصوير بدون ناهمواري لبه هاي تصوير
چرخش ايجاد مي كند .
<!-- THREE STEPS TO INSTALL FLIPFLOP:
1. Copy the coding into the HEAD of your HTML document
2. Add the onLoad event handler into the BODY tag
3. Put the last coding into the BODY of your HTML document -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document
-->
<HEAD>
<SCRIPT language="JavaScript" type="text/javascript">
<!--hide
//STEP 1: PUT THIS CODE INTO THE HEAD OF YOUR DOCUMENT
var wdmax=120; //set maximum width of square image (px)
var wdmin=0; //set minimum thickness of edge-on image (px)
var inc=5; //set step change in px (wdmax-wdmin must be a multiple)
)These two variables
var rate = 50; //pause between steps (in millisec) )determine
flip-flop speed
var pause = 1000; //pause between flip and flop (in millisec)
var ff="flip"; //initialise whether movement starts with a "flip"
(sideways) or "flop" (vertical) change.
function flipflop() {
if (ff=="flip") {
var wd = document.getElementById("pic").getAttribute("width");
wd = wd - inc;
document.getElementById("pic").setAttribute("width",wd);
if (wd==wdmin) {
document.getElementById("pic").setAttribute("src","pic2.gif");
//substitute name of your second picture
inc=-inc;
}
if (wd==wdmax) {
ff="flop";
inc=-inc;
setTimeout("flipflop()",pause);
}
else {
setTimeout("flipflop()",rate);
}
}
else {
var ht = document.getElementById("pic").getAttribute("height");
ht = ht - inc;
document.getElementById("pic").setAttribute("height",ht);
if (ht==wdmin) {
document.getElementById("pic").setAttribute("src","pic1.gif");
//substitute name of your first picture
inc=-inc;
}
if (ht==wdmax) {
ff="flip";
inc=-inc;
setTimeout("flipflop()",pause);
}
else {
setTimeout("flipflop()",rate);
}
}
}
-->
</SCRIPT>
</HEAD>
<!-- STEP TWO: Insert the onLoad event handler into your BODY tag
-->
<BODY onLoad="javascript:flipflop()">
<!-- STEP THREE: Copy this code into the BODY of your HTML document
-->
<center>
<TABLE border="0">
<th width="160" height="160">
<IMG src="http://www.ostadonline.com/img/network/hub.jpg"
width="120" height="120" ID="pic">
</th></TABLE>
<p>This script alternately "flips" and "flops" between two images,
with adjustable smoothness, speed and pauses. It may be useful as an
alternative to a crossfade, where you want to create movement to
attract attention, or where you want to show two images with equal
prominence that don't necessarily look well together (I wrote it to
show two dissimilar corporate logos). Small images are less taxing
on system resources and will appear smoother in operation.
<p>It is important that:<ol><li>The two images are square and of the
same size, and<li>The difference between wdmax (maximum width of
square image) and wdmin (minimum thickness edge-on image) is an
exact multiple of inc (the step change); otherwise the image will
flip once and disappear.</ol>
<p>If only requiring movement in one direction, set the "ff"
variable to it, and delete or change the
subsequent resetting of this variable accordingly.</p>
</center>
<p><center>
<font face="arial, helvetica" size"-2">Free JavaScripts provided
by ostadonline
</p></center>
<!-- Script Size: 3.54 KB -->
|
