这个效果是怎么做出来的

wu_07 2003-01-08 01:38:22
当你由这个页面前进或者后退或者链接到别的页面时候,会发现是从右向左逐渐推出当前浏览器界面

http://www.satanbelanger.net/jojotime/

呵呵,我研究研究源码:)
...全文
48 8 打赏 收藏 转发到动态 举报
写回复
用AI写文章
8 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhigangxie 2003-01-08
  • 打赏
  • 举报
回复
没错:
<meta http-equiv="Page-Enter" content="...
tata_1980 2003-01-08
  • 打赏
  • 举报
回复
<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>
tata_1980 2003-01-08
  • 打赏
  • 举报
回复
好多呵
wu_07 2003-01-08
  • 打赏
  • 举报
回复
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.
wu_07 2003-01-08
  • 打赏
  • 举报
回复
用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 transitions

Applying 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), motion

Inset
<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: duration

Iris

<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"), motion

Pixelate

<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: duration

Slide
<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, motion

Wheel
<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



wu_07 2003-01-08
  • 打赏
  • 举报
回复
呵呵,我也发现了,原来这么简单
方工 2003-01-08
  • 打赏
  • 举报
回复
<META http-equiv="Page-Exit" CONTENT="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" />
ssm1226 2003-01-08
  • 打赏
  • 举报
回复
<META http-equiv="Page-Exit" CONTENT="progid:DXImageTransform.Microsoft.Slide(Duration=2.500,slidestyle='HIDE')" />

87,902

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧