论坛首页 入门技术论坛

伪3D效果图片走马灯

浏览 5712 次
该帖已经被评为新手帖
作者 正文
   发表时间:2010-09-14  
一个模拟3D旋转效果的js走马灯。
混淆过的版本大小为3K。
点击预览效果
浏览器支持情况如下:
  • IE6 没有测试
  • IE7/8 通过
  • FF3.6 通过
  • Opera10 通过
  • Chrome5 通过


调用的方法非常简单,共需4步。
  • 第1步,你需要将以下html代码复制到你的html文件中去。图片的id请按照“fr_rawImg_n”的方式依次设置;

<div id="fr_3drotate"> 
        <div id="fr_cubeRotate"> 
            <img src="./oracle.png" id="fr_rawImg_1" /> 
            <img src="./google.png" id="fr_rawImg_2" /> 
            <img src="./ibm.png" id="fr_rawImg_3" /> 
            <img src="./intel.png" id="fr_rawImg_4" /> 
        </div> 
        <ul id="fr_control"> 
            <li>Oracle</li> 
            <li>Google</li> 
            <li>IBM</li> 
            <li>Intel</li>    
        </ul> 
    </div> 


  • 第2步,在html文件中引入fr.rotate.css,其中包含了对走马灯外观的简单设定,你可以自行修改;

  • 第3步,在html文件中引入fr.rotate.js。当然,你也可以根据自己的需要引入min和pack文件;

  • 第4步,在html文件的底部输入以下js代码。

<script> 
    FR.ThreeDRotate.start({
        time:1000,
        height:185,
        width:272,
        type:'horizontal'
    });
</script> 

参数一共有4个。
  • time为每次切换的花费的时间,以毫秒为单位。这个值不能大于8000(8s切换一张图片,应该没这种需求吧),建议设置在500-2000之间;
  • height为图片高度;
  • width为图片长度;
  • type可以取两个值。horizontal指3D旋转的方向为横向;vertical只3D旋转的方向为纵向。


好的,现在你就拥有一个“伪”3D效果的走马灯了。
我此前还写过另外一个图片走马灯效果,如果你感兴趣的话,可以点击此处查看
   发表时间:2010-09-15  
..我看到jp.我湿了
0 请登录后投票
   发表时间:2010-09-15  
wxq594808632 写道
..我看到jp.我湿了

哇~好多新手帖~荣幸~
这是以前申请的一个WordPress的空间。
0 请登录后投票
   发表时间:2010-09-15  
Chrome 无效~~
0 请登录后投票
   发表时间:2010-09-15   最后修改:2010-09-15
diferent 写道
Chrome 无效~~

你好,我使用chrome打开,效果正常。附上截图,请查看。


  • 大小: 17.3 KB
0 请登录后投票
   发表时间:2010-09-16  
zhc0822 写道
diferent 写道
Chrome 无效~~

你好,我使用chrome打开,效果正常。附上截图,请查看。



好用了~~ 明天晚上是由于网速问题 CSS没DOWN下来或是下出错了~
另说一句,CHROME 稳定版到6了
0 请登录后投票
   发表时间:2010-09-16  
ie6 上无效
  • 大小: 15.1 KB
0 请登录后投票
   发表时间:2010-09-16  
感觉不错!
0 请登录后投票
   发表时间:2010-09-17  
看着还不错...支持下
0 请登录后投票
论坛首页 入门技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics