`
zhc0822
  • 浏览: 230379 次
  • 性别: Icon_minigender_1
  • 来自: 宝仔的奇幻城堡
社区版块
存档分类
最新评论

伪3D效果图片走马灯

阅读更多
一个模拟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效果的走马灯了。
我此前还写过另外一个图片走马灯效果,如果你感兴趣的话,可以点击此处查看
分享到:
评论
8 楼 fehly 2010-09-17  
看着还不错...支持下
7 楼 zcq100 2010-09-16  
感觉不错!
6 楼 同学、木 2010-09-16  
ie6 上无效
5 楼 diferent 2010-09-16  
zhc0822 写道
diferent 写道
Chrome 无效~~

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



好用了~~ 明天晚上是由于网速问题 CSS没DOWN下来或是下出错了~
另说一句,CHROME 稳定版到6了
4 楼 zhc0822 2010-09-15  
diferent 写道
Chrome 无效~~

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


3 楼 diferent 2010-09-15  
Chrome 无效~~
2 楼 zhc0822 2010-09-15  
wxq594808632 写道
..我看到jp.我湿了

哇~好多新手帖~荣幸~
这是以前申请的一个WordPress的空间。
1 楼 wxq594808632 2010-09-15  
..我看到jp.我湿了

相关推荐

    HTML+CSS图片无缝走马灯效果.rar

    HTML+CSS图片无缝走马灯效果是网页设计中常见的动态展示方式,主要用于轮播或循环显示多张图片。这种效果可以提升用户体验,增加网站的视觉吸引力。以下将详细讲解如何利用HTML和CSS来实现这一功能。 首先,我们...

    css3 实现3d动态的走马灯效果

    本篇将深入探讨如何利用CSS3来实现3D动态走马灯效果,特别关注设置XYZ方向。 3D转换是CSS3的一个强大特性,它允许我们在3D空间内操作元素,从而创造出丰富的视觉效果。走马灯(Carousel)是一种常见的网页交互组件...

    纯css图片无缝走马灯效果源码

    【纯CSS图片无缝走马灯效果源码详解】 在网页设计中,动态的图片展示能够吸引用户的注意力,提升用户体验。"纯CSS图片无缝走马灯效果"是一种常见且实用的技术,它利用CSS3的动画(Animation)和过渡(Transition)...

    Delphi 走马灯效果(图片、字符串)

    本篇文章将深入探讨如何在 Delphi 中创建走马灯效果,包括图片和字符串的滚动展示,并结合数据库进行实际应用。 首先,我们要了解 Delphi 是一种基于对象的、事件驱动的编程语言,它提供了一个强大的集成开发环境...

    简单的走马灯效果(停顿/无缝滚动)

    走马灯效果是一种常见的网页动态展示技术,常用于制作轮播图、滚动公告或广告栏等,能够吸引用户的注意力并有效地展示多张图片或信息。在这个"简单的走马灯效果"项目中,我们主要探讨如何利用HTML语言实现一个基本的...

    flash走马灯效果flash+xml

    flash走马灯效果flash+xml,flash走马灯效果flash+xml,flash走马灯效果flash+xml

    vue实现图片滚动的示例代码(类似走马灯效果)

    Vue 实现图片滚动的示例代码(类似走马灯效果) 在本示例代码中,我们将学习如何使用 Vue 实现图片滚动的效果,类似于走马灯的效果。该示例代码具有很好的参考价值,对大家有所帮助。 知识点 1: Vue 组件的使用 ...

    WPF 走马灯特效

    在Windows Presentation Foundation(WPF)中,走马灯(Carousel)是一种常见的视觉效果,通常用于展示轮播图片、文本或其他元素。它以动态的方式循环展示内容,为用户界面增添生动性和吸引力。本篇文章将深入探讨...

    delphi走马灯效果示例

    走马灯效果示例 走马灯效果示例 走马灯效果示例 走马灯效果示例 走马灯效果示例

    JS图片滚动效果,走马灯

    总之,JS图片滚动效果(走马灯)是网页设计中常用的一种技术,它可以提高网页的视觉吸引力和互动性。通过学习和理解这两种不同的实现方式,你可以更好地掌握JS在动态效果上的应用,为你的网站增添更多魅力。无论是...

    图片视图ImageView走马灯效果源码.zip

    而“走马灯”效果,又称为轮播图或无限滚动效果,通常用于展示一系列连续的图片,常见于广告、推荐内容或者幻灯片展示等场景。这种效果能够自动循环播放一组图片,提供良好的用户体验。接下来,我们将深入探讨如何在...

    jQuery,图片走马灯,向上滚动

    如果你的压缩包文件名为“图片效果”,那么这些图片应该已经包含在这个文件夹中。 当然,这只是一个基础的实现,实际项目中可能需要考虑更多的细节,如图片加载优化、触摸设备的支持、自适应屏幕大小等。你还可以...

    走马灯效果.rar

    将需要实现走马灯效果的图片加载到TImage组件中。可以使用TImage的Picture属性加载本地图片资源,或者通过代码动态加载网络图片。 3. **实现滚动效果** 编写TTimer的OnTimer事件处理程序,这里我们将更新TImage...

    jquery+css图片走马灯

    本教程将深入探讨如何使用jQuery和CSS来实现一个基本的图片走马灯效果。 **jQuery 简介** jQuery 是一个轻量级的 JavaScript 库,它简化了 JavaScript 的操作,提供了一种更加简洁的语法来处理DOM操作、事件处理、...

    图片走马灯展示特效——ppt教程模板.rar

    在PPT设计中,走马灯展示特效是一种极具动态感且引人注目的效果,它能够让观众的注意力集中在一系列连续的图片上,从而增强演示文稿的视觉吸引力。本教程模板将详细介绍如何在PowerPoint中实现这样的效果,帮助你...

    走马灯 VHDL实现

    走马灯,又称为流水灯或滚动灯,是一种常见的电子设计技术,通常用于显示一系列连续变化的灯光效果。在数字电路设计中,走马灯的实现往往借助于硬件描述语言(如VHDL)来完成,以便在FPGA或ASIC等可编程逻辑器件上...

    走马灯效果

    走马灯效果,又称为轮播图或滑动展示效果,是网页设计中常见的动态展示方式,常用于网站 banner、产品展示、新闻滚动等场景。它通过定时切换图片或者内容,形成一种连续滚动的视觉效果,既节省空间,又能吸引用户的...

    3D电影走马灯风格图片轮播FlashXML

    【3D电影走马灯风格图片轮播FlashXML】是一种基于Adobe Flash技术的交互式多媒体展示方式,它结合了3D视觉效果和动态图片轮播的功能。这种设计风格深受网页设计师和开发者喜爱,用于创建吸引人的用户体验,尤其适用...

    Swiper走马灯资源压缩包

    Swiper走马灯资源压缩包是一个集合了Swiper组件及相关资源的压缩文件,主要用于实现网页上的轮播图或走马灯效果。Swiper是一款流行的、免费的JavaScript滑动插件,广泛应用于移动触摸设备和桌面浏览器,适用于创建高...

    时钟和日期走马灯 走马灯

    走马灯,通常在编程和数字电子领域中指的是滚动或循环显示信息的一种方式,它能够以动态的效果展示文本、图像或者时间等数据。在本文中,我们将深入探讨如何创建一个结合了时钟和日期功能的走马灯效果,以及相关的...

Global site tag (gtag.js) - Google Analytics