用Java Script实现网页摇晃效果

Author: 弈云 Date: 2001年 3期
    众所周知，要提高网站的访问量，增加人气值，不但网站的内容要精彩、更新的速度要快，网站的设计也是个重要因素，一般我们用Java Script语言来设计网页中的特效，往往用简单的手段，就能实现意想不到的效果。
　　    去年CLIO大奖的获得者是通用公司的雪弗兰汽车广告。这是一个很有创意的网上Banner，名为Shake（摇晃），旨在宣传通用雪弗兰型号为S-10 pickup的客货两用车。该车具有越野性好、马力强劲、驾驶及乘坐空间舒适的特点。该广告摒弃了一般汽车广告中汽车与美女、漂亮的外观、飞驰的车身等传统的宣传方式，而是采用了一个该车车头的大特写，车头剧烈地晃动和中间硕大的雪弗兰标志给人以强烈的视觉感受，更为赞不绝口的是，当你把鼠标移到这个flash banner上时，画面突然切换到了汽车内部，车子在继续地抖动，而且整个浏览器都跟着晃动了起来……。请注意，是整个浏览器在晃动。（^03040702a^）
　　    意想不到的效果给人以一种强烈地视觉冲击，使人有身临其境之感，广告的意境瞬间达到了高潮，达到了预期的效果。有兴趣的朋友可上网查看具体的效果（http://www.wisecast.com/review/clio_03.html）。
　　    其实，这个使整个浏览器晃动起来的特效，也是用Java Script语言来实现的，看上去很难，其实比较简单，我也制作了一个类似的效果，大家只要把下面的内容存成一个HTML文件，就可体会出个中奥秘了（后面是整个页面的源代码，给大家参考）。其中“1.jpg”为图片文件，大家也可用其他图片代替，浏览时，当把鼠标移到图片上时，整个浏览器也跟着晃动起来，而且不停地晃动，当鼠标离开图片时，晃动停止，浏览器逐渐平静下来。
　　    <html>
　　    <head>
　　    <title>晃动的网页</title>
　　    </head>
　　    <body>
　　    <script language=“JavaScript”>
　　    <!--
　　    function surfto （form）{
　　    var myindex=form.select1.selectedIndex
　　    if （form.select1.options[myindex].value!= null）{?? ??
　　    parent.main.location.href=form.select1.options[myindex].value;??
　　    }
　　    }
　　    // -->
　　    </script>
　　    <script language=“JavaScript1.2”>
　　    <!--
　　    function shake（n）{
　　    if （window.top.moveBy）{?? ??
　　    for（i = 10; i > 0; i--）{?? ??
　　    for（j = n; j > 0;j--）{?? ??
　　    window.top.moveBy（0，i）?牔?
　　    window.top.moveBy（i，0）?牔?
　　    window.top.moveBy（0，-i）?牔?
　　    window.top.moveBy（-i，0）?牔?
　　    ?爙
　　    ?爙
　　    ?爙
　　    ?爙
　　    // End -->
　　    </script>
　　    <script
　　    language=“JavaScript”>
　　    <!--
　　    function moyamoya（htmlfile）{?? ??
　　    parent.main.location.href=htmlfile;
　　    }??
　　    // -->
　　    </script>
　　    <p align=“center”><img border=“0”  onmousemove=shake（10）  src=“1.jpg” width=“150” height=“100”></p>
　　    </body>
　　    </html>