Using JavaScript to realize the rotation effect of flash advertisement picture _javascript skill
Last Update:2017-01-19
Source: Internet
Author: User
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; charset=gb2312 "/>
<title> Imitation flash advertising Image rotation effect--from "echocardiography" </title>
<style type= "Text/css" >
<!--
. Image Border {
Text-align:center;
Vertical-align:middle;
padding:10px;
BORDER:3PX double #FF0000;
}
#loading {margin-top:100px;}
#explain {
font-size:12px;
Color: #00CC00;
Cursor:hand;
}
#img {
Cursor:hand;
border:1px solid #BEBEBE;
padding:5px;
}
#方框 {
height:100px;
width:100px;
border:1px solid #CCCCCC;
}
. span {
height:10px;
width:200px;
border:1px solid #CCCCCC;
padding:1px;
}
-->
</style>
<body>
<!--<div id= "box" >-->
<span id= "Cap" style= Font-size:12px;color: #00FF00 "></span><div class=" span "></div>
<script language= "JavaScript" type= "Text/javascript" src= "Jc/poto_link.js" ></script>
<script language= "JavaScript" type= "Text/javascript" src= "Jc/poto_bring.js" ></script>
<!--</div>-->
</body>
[JS part __poto_bring.js]
var filters=new Array ()
Filters[0]= "ProgidXImageTransform.Microsoft.Iris (duration=0.5,irisstyle=cross,motion=out)"//Split X expansion
Filters[1]= "ProgidXImageTransform.Microsoft.GradientWipe (Duration=0.5,gradientsize=0.25,motion=forward)"//trailing gradient
Filters[2]= "ProgidXImageTransform.Microsoft.Stretch (Duration=0.5,stretchstyle=push)"//Area Scale
Filters[3]= "Progid:DXImageTransform.Microsoft.Blinds (duration=0.5,bands=30,direction=left);"//Bar Hundred page
Filters[4]= "Progid:DXImageTransform.Microsoft.Fade (duration=2);"/Phantom
Filters[5]= "Progid:DXImageTransform.Microsoft.Slide (Duration=0.5,bands=1,slidestyle=swap)"//Up and down Twitch
Filters[6]= "Progid:DXImageTransform.Microsoft.Inset (duration=1)"//Bevel rotation
Filters[7]= "Progid:DXImageTransform.Microsoft.RandomDissolve (duration=1);" Snowflake Dot
Filters[8]= "Progid:DXImageTransform.Microsoft.RevealTrans (duration=0.5,transition=23)"//Random
Filters[9]= "Progid:DXImageTransform.Microsoft.Barn (duration=0.5,motion=out,orientation=vertical);" Left or right apart
Filters[10]= "Progid:DXImageTransform.Microsoft.CheckerBoard (duration=0.5,squaresx=1,squaresy=30,direction= right); "//Area Blinds
Filters[11]= "Progid:DXImageTransform.Microsoft.Pixelate (, enabled=false,duration=0.5,maxsquare=25)"//Mosaic
Filters[12]= "Progid:DXImageTransform.Microsoft.RadialWipe (Duration=1,wipestyle=wedge)"/fan
Filters[13]= "Progid:DXImageTransform.Microsoft.RandomBars (duration=1,orientation=vertical)"//Stripe segmentation
Filters[14]= "Filter:revealtrans (duration=2,transition=20);" Oblique saw
Filters[15]= "Progid:DXImageTransform.Microsoft.Spiral (duration=0.5,gridsizex=1,gridsizey=5)"//Wipe
Filters[16]= "Progid:DXImageTransform.Microsoft.Wheel (duration=0.5,spokes=16)"/fan-shaped blinds
Filters[17]= "Progid:DXImageTransform.Microsoft.Zigzag (Duration=0.25,gridsizex=10,gridsizey=1)"//Wipe Away
Filters[18]= "Progid:DXImageTransform.Microsoft.Strips (Duration=0.5,motion=rightup)"//Bevel Sawtooth
Filters[19]= "Blendtrans (duration=1)"//Phantom Gradient
var errors=0
var loads=0
function loading_img () {//pre-loading image functions
for (Var i=0;iImages[i]=new Image ()
Images[i].src=imgs[i];
Document.writeln (" ")}
}
function Err_ () {errors++;}
function Load_ () {loads++;
cap.innertext= "Completed:" +math.round ((loads/imgs.length) *100) + "%";
Loing.style.width= "" +math.round (loads/imgs.length) *100) + "%"}
Loading_img ()
function L_k () {if (i==0) {i=1;} Open (Urls[i-1], "", "", "")}
function Load_img (obj,s) {//Display load Picture
Obj.style.display= ""
Loading.style.display= "None"
Explain.innertext=explains[s]
Explain.style.display= "None"
SetTimeout ("Playes ()", p_t);//Perform AutoPlay
}
var i
var p_t=6000
function Playes () {
if (i>imgs.length-1) i=0
Img.style.filter=filters[i]
Img.filters (0). Apply ()
DOCUMENT.ALL.IMG.SRC=IMAGES[I].SRC;
Img.filters (0). Play ()
Explain.innertext=explains[i]
i++
}
function Show_ (s,w,h,t) {//w: Width H: Height T: time interval
Document.writeln ("<div class= ' image border ' >")
Document.writeln (" ')
Document.writeln ("<br '/>")
Document.writeln ("<span id= ' explain ' onclick= ' l_k ') ' > Loading ... </span> ")
Document.writeln ("</div>")
if (w!=0) img.width=w
if (h!=0) img.height=h
I=s+1
P_t=t
}
Show_ (4,200,0,3000)
[JS part __poto_link.js]
var images=new Array ()//Picture path
var imgs=new array ()//defines a preloaded array of pictures
var urls=new array ()//linked arrays
var explains=new Array ()//Picture description
imgs[0]= "Images/01.jpg"
imgs[1]= "Images/02.jpg"
imgs[2]= "Images/03.jpg"
imgs[3]= "Images/04.jpg"
imgs[4]= "Images/005.jpg"
imgs[5]= "Images/06.jpg"
urls[0]= "Images/01.jpg"
urls[1]= "Images/02.jpg"
urls[2]= "Images/03.jpg"
urls[3]= "Images/04.jpg"
urls[4]= "Images/05.jpg"
urls[5]= "Images/06.jpg"
explains[0]= "Photo Exhibition 1"
explains[1]= "Photo exhibition 2"
explains[2]= "Photo Exhibition 3"
explains[3]= "Photo Exhibition 4"
explains[4]= "Photo Exhibition 5"
explains[5]= "Photo exhibition 6"
Package download