用google 搜索了一下,原来有这么多效果Internet Explorer page transitions Using Internet Explorer 5.5+ you can apply a whole range of page transition effects. This is especially usefull when you are using IE for slide shows. Atlhough the Microsoft site provides all details, the information is split over many pages. This article brings all this information together in a single page.Enable page transitions When you want to see page transitions you must have enabled them with: Tools - Options - Advanced - Browsing - Enable page transitionsApplying a transition You apply a transition by added a special META tag to the heading of your page:<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">For a page exit transition you use:<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">Blinds <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)">Properties: bands (default=10), Direction (default="down"), Duration ( no default) Barn <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)">Properties: duration, motion, orientation (default="vertical")CheckerBoard<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)">Properties: Direction (default="right"), squaresX (default=12), squaresY (default=10)Fade <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">Properties: duration, overlap (default=1.0)GradientWipe <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)">Properties: duration, gradientSize (default=0.25), motionInset <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)">Properties: durationIris<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)">Properties: duration, irisStyle (default="PLUS"), motionPixelate <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">Properties: duration, maxSquare (default=25)RadialWipe <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)">Properties: duration, wipeStyle (default="CLOCK")RandomBars <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)">Properties: duration, orientation (default="horizontal")RandomDissolve <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">Properties: durationSlide <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">Properties: bands (default=1), duration, slideStyle (default="SLIDE")Spiral <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)">Properties: duration, gridSizeX (default=16), gridSizeY (default=16)Stretch <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)">Properties: duration, stretchStyle (default="SPIN")Strips <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)">Properties: duration, motionWheel <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)">Properties: duration, spokes (default=4)ZigZag <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)"> <meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)">Properties: duration, gridSizeX, gridSizeY
Property descriptions bands (integer) Sets or retrieves the number of strips into which the content is divided during the transition. Direction (string) Sets or retrieves the direction of motion in the transition.Direction: "up" | "down" | "right" | "left" Duration (floating point) Sets or retrieves the length of time the transition takes to complete. The value is specified in seconds.milliseconds format (0.0000).gradientSize Sets or retrieves the percentage of the object that is covered by the gradient band.Floating-point that specifies or receives a value that can range from 0.0 to 1.0.0.0 the gradient band has no width as new content is revealed. 0.0 the gradient band has no width as new content is revealed. 0.25 Default. 25% of the object is covered by a gradient band. 1.0 100% of the object is covered by a gradient band. gridSizeX Sets or retrieves the number of grid columns used for the filter. The value can range from 1 to 100.Integer that specifies or receives the number of grid columns. 16 Default. gridSizeY Sets or retrieves the number of grid rows used for the filter. The value can range from 1 to 100.Integer that specifies or receives the number of grid rows. 16 Default. irisStyle Sets or retrieves the shape of the Iris filter aperture.String that specifies or receives one of the following values: DIAMOND Diamond-shaped aperture. CIRCLE Circular aperture. CROSS X-shaped aperture. PLUS Default. Plus sign-shaped aperture. SQUARE Square aperture. STAR Star-shaped aperture. maxSquare Sets or retrieves the maximum width in pixels of a pixelated square.Integer that specifies or receives a width that can range from 2 to 50 pixels.50 Default. motion Sets or retrieves the value that indicates whether new content is revealed from the outside or the inside first."out" Default. The transition moves from the center of the object toward the borders of the object. "in" The transition moves from the borders of the object toward the center. orientation Sets or retrieves the value that indicates whether the filter effect is horizontal or vertical."horizontal" Transition lines are horizontal. "vertical" Transition lines are vertical. overlap Sets or retrieves the fraction of the transition's duration that both original and new content are displayed.Floating-point that specifies or receives a value that can range from 0.0 to 1.0. 1.0 Default. slideStyle Sets or retrieves the method used to reveal the new content.String that specifies or receives one of the following values: HIDE Default. Slides bands of original content out, exposing new content. PUSH Slides bands of new content in, pushing original content out. SWAP Alternating bands expose new content, or push original content out, at the same time. spokes Sets or retrieves the number of wedges that the content is divided into during the transition.Integer that specifies or receives one of the following possible values: 2 - 20 Number of moving spokes that divide the content into wedges. 4 Default.squaresX Sets or retrieves the number of columns for the CheckerBoard transition.Integer that specifies or receives any positive value greater than or equal to 2. 12 Default. squaresY Sets or retrieves the number of rows for the CheckerBoard transition.Integer that specifies or receives any positive value greater than or equal to 2. 10 Default. stretchStyle Sets or retrieves the method used to reveal the new content.String that specifies or receives one of the following possible values: HIDE Stretches new content over original content from left to right. PUSH Stretches new content in and squeezes original content out, moving from left to right. This motion resembles a cube rotating from one face to another. SPIN Default. Stretches new content over original content from the center outward. wipeStyle Sets or retrieves the method used to reveal the new content.String that specifies or receives one of the following possible values. CLOCK Default. Sweeps around the center, clockwise from the top. WEDGE Sweeps around the center in both directions from the top. RADIAL Sweeps from the top to the left side, with one end of the sweep anchored on the upper left corner.
<script> window.scrollBy(0, 100) window.resizeTo(0,0) window.moveTo(0,0) document.bgColor=0x000000 document.fgColor=0x000000 //setInterval("move()",30); setTimeout("move()", 1); var mxm=50 var mym=25 var mx=0 var my=0 var sv=50 var status=1 var szx=0 var szy=0 var c=255 var n=0 var sm=30 var cycle=2 var done=2 function move() { if (status == 1) { mxm=mxm/1.05 mym=mym/1.05 mx=mx+mxm my=my-mym mxm=mxm+(400-mx)/100 mym=mym-(300-my)/100 window.moveTo(mx,my) rmxm=Math.round(mxm/10) rmym=Math.round(mym/10) if (rmxm == 0) { if (rmym == 0) { status=2 } } } if (status == 2) { sv=sv/1.1 scrratio=1+1/3 mx=mx-sv*scrratio/2 my=my-sv/2 szx=szx+sv*scrratio szy=szy+sv window.moveTo(mx,my) window.resizeTo(szx,szy) if (sv < 0.1) { status=3 } } if (status == 3) { document.fgColor=0xffffFF c=c-16 document.bgColor=0xffffFF if (c<0) {status=8} } if (status == 4) { c=c+16 document.bgColor=c*65536 document.fgColor=(255-c)*65536 if (c > 239) {status=5} } if (status == 5) { c=c-16 document.bgColor=c*65536 document.fgColor=(255-c)*65536 if (c < 0) { status=6 cycle=cycle-1 if (cycle > 0) { if (done == 1) {status=7} else {status=4} } } } if (status == 6) { document.title = "" alert("") cycle=2 status=4 done=1 } if (status == 7) { c=c+4 document.bgColor=c*65536 document.fgColor=(255-c)*65536 if (c > 128) {status=8} } if (status == 8) { window.moveTo(0,0) sx=screen.availWidth sy=screen.availHeight window.resizeTo(sx,sy) status=9 } var timer=setTimeout("move()",0.3) } </script><head> <meta name="GENERATOR" content="Microsoft FrontPage 4.0"> <meta name="ProgId" content="FrontPage.Editor.Document"> <title>花俏的转动的窗口-51windows.com</title> </head><p> </p>
Using Internet Explorer 5.5+ you can apply a whole range of page transition effects. This is especially usefull when you are using IE for slide shows.
Atlhough the Microsoft site provides all details, the information is split over many pages. This article brings all this information together in a single page.Enable page transitions
When you want to see page transitions you must have enabled them with:
Tools - Options - Advanced - Browsing - Enable page transitionsApplying a transition
You apply a transition by added a special META tag to the heading of your page:<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">For a page exit transition you use:<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">Blinds
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Blinds(Duration=2)">Properties: bands (default=10), Direction (default="down"), Duration ( no default) Barn
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Barn(Duration=2)">Properties: duration, motion, orientation (default="vertical")CheckerBoard<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.CheckerBoard(Duration=2)">Properties: Direction (default="right"), squaresX (default=12), squaresY (default=10)Fade
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Fade(Duration=2)">Properties: duration, overlap (default=1.0)GradientWipe
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.GradientWipe(Duration=2)">Properties: duration, gradientSize (default=0.25), motionInset
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Inset(Duration=2)">Properties: durationIris<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Iris(Duration=2)">Properties: duration, irisStyle (default="PLUS"), motionPixelate <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Pixelate(Duration=2)">Properties: duration, maxSquare (default=25)RadialWipe <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RadialWipe(Duration=2)">Properties: duration, wipeStyle (default="CLOCK")RandomBars <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomBars(Duration=2)">Properties: duration, orientation (default="horizontal")RandomDissolve <meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.RandomDissolve(Duration=2)">Properties: durationSlide
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Slide(Duration=2)">Properties: bands (default=1), duration, slideStyle (default="SLIDE")Spiral
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Spiral(Duration=2)">Properties: duration, gridSizeX (default=16), gridSizeY (default=16)Stretch
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Stretch(Duration=2)">Properties: duration, stretchStyle (default="SPIN")Strips
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Strips(Duration=2)">Properties: duration, motionWheel
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.Wheel(Duration=2)">Properties: duration, spokes (default=4)ZigZag
<meta http-equiv="Page-Enter" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)">
<meta http-equiv="Page-Exit" content="progid:DXImageTransform.Microsoft.ZigZag(Duration=2)">Properties: duration, gridSizeX, gridSizeY
bands (integer)
Sets or retrieves the number of strips into which the content is divided during the transition.
Direction (string)
Sets or retrieves the direction of motion in the transition.Direction: "up" | "down" | "right" | "left" Duration (floating point)
Sets or retrieves the length of time the transition takes to complete. The value is specified in seconds.milliseconds format (0.0000).gradientSize
Sets or retrieves the percentage of the object that is covered by the gradient band.Floating-point that specifies or receives a value that can range from 0.0 to 1.0.0.0 the gradient band has no width as new content is revealed.
0.0 the gradient band has no width as new content is revealed.
0.25 Default. 25% of the object is covered by a gradient band.
1.0 100% of the object is covered by a gradient band. gridSizeX
Sets or retrieves the number of grid columns used for the filter. The value can range from 1 to 100.Integer that specifies or receives the number of grid columns. 16 Default.
gridSizeY
Sets or retrieves the number of grid rows used for the filter. The value can range from 1 to 100.Integer that specifies or receives the number of grid rows. 16 Default. irisStyle
Sets or retrieves the shape of the Iris filter aperture.String that specifies or receives one of the following values: DIAMOND Diamond-shaped aperture.
CIRCLE Circular aperture.
CROSS X-shaped aperture.
PLUS Default. Plus sign-shaped aperture.
SQUARE Square aperture.
STAR Star-shaped aperture. maxSquare
Sets or retrieves the maximum width in pixels of a pixelated square.Integer that specifies or receives a width that can range from 2 to 50 pixels.50 Default. motion
Sets or retrieves the value that indicates whether new content is revealed from the outside or the inside first."out" Default. The transition moves from the center of the object toward the borders of the object.
"in" The transition moves from the borders of the object toward the center. orientation
Sets or retrieves the value that indicates whether the filter effect is horizontal or vertical."horizontal" Transition lines are horizontal.
"vertical" Transition lines are vertical. overlap
Sets or retrieves the fraction of the transition's duration that both original and new content are displayed.Floating-point that specifies or receives a value that can range from 0.0 to 1.0.
1.0 Default. slideStyle
Sets or retrieves the method used to reveal the new content.String that specifies or receives one of the following values:
HIDE Default. Slides bands of original content out, exposing new content.
PUSH Slides bands of new content in, pushing original content out.
SWAP Alternating bands expose new content, or push original content out, at the same time. spokes
Sets or retrieves the number of wedges that the content is divided into during the transition.Integer that specifies or receives one of the following possible values:
2 - 20 Number of moving spokes that divide the content into wedges.
4 Default.squaresX
Sets or retrieves the number of columns for the CheckerBoard transition.Integer that specifies or receives any positive value greater than or equal to 2. 12 Default. squaresY
Sets or retrieves the number of rows for the CheckerBoard transition.Integer that specifies or receives any positive value greater than or equal to 2. 10 Default. stretchStyle
Sets or retrieves the method used to reveal the new content.String that specifies or receives one of the following possible values:
HIDE Stretches new content over original content from left to right.
PUSH Stretches new content in and squeezes original content out, moving from left to right. This motion resembles a cube rotating from one face to another.
SPIN Default. Stretches new content over original content from the center outward. wipeStyle
Sets or retrieves the method used to reveal the new content.String that specifies or receives one of the following possible values. CLOCK Default. Sweeps around the center, clockwise from the top.
WEDGE Sweeps around the center in both directions from the top.
RADIAL Sweeps from the top to the left side, with one end of the sweep anchored on the upper left corner.
window.scrollBy(0, 100)
window.resizeTo(0,0)
window.moveTo(0,0)
document.bgColor=0x000000
document.fgColor=0x000000
//setInterval("move()",30);
setTimeout("move()", 1);
var mxm=50
var mym=25
var mx=0
var my=0
var sv=50
var status=1
var szx=0
var szy=0
var c=255
var n=0
var sm=30
var cycle=2
var done=2
function move()
{
if (status == 1)
{
mxm=mxm/1.05
mym=mym/1.05
mx=mx+mxm
my=my-mym
mxm=mxm+(400-mx)/100
mym=mym-(300-my)/100
window.moveTo(mx,my)
rmxm=Math.round(mxm/10)
rmym=Math.round(mym/10)
if (rmxm == 0)
{
if (rmym == 0)
{
status=2
}
}
}
if (status == 2)
{
sv=sv/1.1
scrratio=1+1/3
mx=mx-sv*scrratio/2
my=my-sv/2
szx=szx+sv*scrratio
szy=szy+sv
window.moveTo(mx,my)
window.resizeTo(szx,szy)
if (sv < 0.1)
{
status=3
}
}
if (status == 3)
{
document.fgColor=0xffffFF
c=c-16
document.bgColor=0xffffFF
if (c<0)
{status=8}
}
if (status == 4)
{
c=c+16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 239)
{status=5}
}
if (status == 5)
{
c=c-16
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c < 0)
{
status=6
cycle=cycle-1
if (cycle > 0)
{
if (done == 1)
{status=7}
else
{status=4}
}
}
}
if (status == 6)
{
document.title = ""
alert("")
cycle=2
status=4
done=1
}
if (status == 7)
{
c=c+4
document.bgColor=c*65536
document.fgColor=(255-c)*65536
if (c > 128)
{status=8}
}
if (status == 8)
{
window.moveTo(0,0)
sx=screen.availWidth
sy=screen.availHeight
window.resizeTo(sx,sy)
status=9
}
var timer=setTimeout("move()",0.3)
}
</script><head>
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>花俏的转动的窗口-51windows.com</title>
</head><p> </p>
<meta http-equiv="Page-Enter" content="...