Slicebox - 3D Image Slider 实例四

最新推荐文章于 2024-06-26 14:03:25 发布
最新推荐文章于 2024-06-26 14:03:25 发布
阅读量148 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/zhaozzm/p/4140678.html
版权 
<!DOCTYPE html>
    <html lang="en">
    <head>
    <title>Slicebox - 3D Image Slider 实例四丨</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Slicebox - 3D Image Slider with Fallback" />
    <meta name="keywords" content="jquery, css3, 3d, webkit, fallback, slider, css3, 3d transforms, slices, rotate, box, automatic" />
    <meta name="author" content="Pedro Botelho for Codrops" />
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/demo.css" />
    <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/slicebox.css" />
    <link rel="stylesheet" type="text/css" href="/imagesforcode/201212/4480/custom.css" />
    <script type="text/javascript" src="/imagesforcode/201212/4480/modernizr.custom.46884.js"></script>
    </head>
    <body>
    <br><font color=black>▲　目前IE8及以前版本不兼容CSS3，请使用IE9/火狐/Chrome浏览器运行本效果。/font>
    <div class="container">
    Slicebox · A fresh 3D image slider with graceful fallback
    <div class="wrapper">
    <ul id="sb-slider" class="sb-slider">
    <li>
    <a href="#nogo" target="_blank"><img src="/images/1.jpg" alt="image1"/></a>
    <div class="sb-description">
    <h3>红叶传情</h3>
    </div>
    </li>
    <li>
    <a href="#nogo" target="_blank"><img src="/images/2.jpg" alt="image2"/></a>
    <div class="sb-description">
    <h3>野花绽放</h3>
    </div>
    </li>
    <li>
    <a href="#nogo" target="_blank"><img src="/images/3.jpg" alt="image1"/></a>
    <div class="sb-description">
    <h3>往事如茶</h3>
    </div>
    </li>
    <li>
    <a href="#nogo" target="_blank"><img src="/images/4.jpg" alt="image1"/></a>
    <div class="sb-description">
    <h3>油菜花开</h3>
    </div>
    </li>
    <li>
    <a href="#nogo" target="_blank"><img src="/images/5.jpg" alt="image1"/></a>
    <div class="sb-description">
    <h3>玫瑰情思1</h3>
    </div>
    </li>
    <li>
    <a href="#nogo" target="_blank"><img src="/images/6.jpg" alt="image1"/></a>
    <div class="sb-description">
    <h3>玫瑰情思2</h3>
    </div>
    </li>
    <li>
    <a href="#nogo" target="_blank"><img src="/images/7.jpg" alt="image1"/></a>
    <div class="sb-description">
    <h3>玫瑰情思3</h3>
    </div>
    </li>
    </ul>
    <div id="shadow" class="shadow"></div>
    <div id="nav-arrows" class="nav-arrows">
    <a href="#">Next</a>
    <a href="#">Previous</a>
    </div>
    </div><!-- /wrapper -->
    <p class="info"><strong>实例 4:</strong> Same like example example 3, with a higher disperse factor</p>
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="/imagesforcode/201212/4480/jquery.slicebox.js"></script>
    <script type="text/javascript">
    $(function() {
    var Page = (function() {
    var $navArrows = $( '#nav-arrows' ).hide(),
    $shadow = $( '#shadow' ).hide(),
    slicebox = $( '#sb-slider' ).slicebox( {
    onReady : function() {
    $navArrows.show();
    $shadow.show();
    },
    orientation : 'r',
    cuboidsRandom : true,
    disperseFactor : 30
    } ),
    init = function() {
    initEvents();
    },
    initEvents = function() {
    // add navigation events
    $navArrows.children( ':first' ).on( 'click', function() {
    slicebox.next();
    return false;
    } );
    $navArrows.children( ':last' ).on( 'click', function() {
    slicebox.previous();
    return false;
    } );
    };
    return { init : init };
    })();
    Page.init();
    });
    </script>
    </body>
    </html>

 

转载于:https://www.cnblogs.com/zhaozzm/p/4140678.html

weixin_30641999
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react-native-image-slider:一个快速简便的图像滑块，用于本地响应。 维护者想要的！
05-02
React本机图像滑块 ...import ImageSlider from 'react-native-image-slider' ; // ... render ( ) { return ( < ImageSlider xss=removed> ) } 自动播放/自定义按钮/自定义幻灯片/循环播放 class Examp
compare-image-slider：使用滑块比较两个图像
02-06
"compare-image-slider-master"压缩包文件很可能是项目的源码仓库，其中包含了组件的所有源代码、示例、文档等资源。开发者可以通过阅读源码学习其实现原理，或者直接使用提供的示例快速上手。在使用过程中，可以...
12款经典--jQuery --图片轮播插件
weixin_30915275的博客
01-11 414
图片轮播是网站中的常用功能，用于在有限的网页空间内展示一组产品图片或者照片，同时还有非常吸引人的动画效果。本文向大家推荐12款实用的jQuery图片轮播效果插件，帮助你在你的项目中加入一些效果精美的图片轮播效果，希望这些插件能够帮助到你。Nivo Slider首先推荐的这款插件号称世界上最棒的图片轮播插件，有独立的jQuery插件和WordPress插件两个版本。目前下载量...
Vue 学习 插件的使用方法
u014546017的博客
04-24 169
本质就是包含 install 方法的一个对象 install的第一个参数是Vue 第二个及以后的参数是使用插件者传递的数据​ 定义插件。
10 款精美的 HTML5 图片轮播动画 + 打包源码下载
最新发布
我们好像在哪见过~
06-26 605
PS：请你耐心看完，文末我提供了所有动画的源码打包下载链接，如果你喜欢这些动画，可以按需下载，希望对你有所帮助。
jQuery插件slicebox实现3D动画图片轮播切换
congshi3291的博客
04-12 226
漂亮jQuery 3D动画图片轮播切换特效插件jquery.slicebox.js，基于jQuery，插件采用CSS 3D 动画效果，支持事件Callback调用，支持参数自定义配置，如：speed：600 切换速度、au...
推荐开源项目：Slicebox - 3D图像滑动插件
gitblog_00032的博客
05-22 281
推荐开源项目：Slicebox - 3D图像滑动插件 项目地址:https://gitcode.com/codrops/Slicebox 1. 项目介绍 Slicebox是一款基于jQuery的3D图像滑块插件，它巧妙地利用了CSS 3D变换技术，为用户提供了一种新颖且富有视觉冲击力的展示方式。当遇到不支持这些新特性的老旧浏览器时， Slicebox 提供了一个优雅的回退方案，确保了在各种环境下的...
jquery-css3-3d-image-slider.zip
10-05
"jquery-css3-3d-image-slider.zip" 文件包含了一个利用这两种技术实现的3D图片轮播插件，下面将详细介绍其工作原理和关键知识点。 1. **jQuery**：jQuery 是一个广泛使用的 JavaScript 库，简化了DOM操作、事件...
img-comparison-slider:图像比较滑块。 比较之前和之后的图像。 支持React，Vue，Angular
03-28
img比较滑块 用于比较图像的滑块组件（之前和之后）。... src =" https://unpkg.com/img-comparison-slider@3/dist/component/component.esm.js " > </ script > < script nomodule =
react-native-slider:React Native组件，用于从一系列值中选择一个值
04-28
@react-native-community/slider React Native组件，用于从一系列值中选择一个值。 入门 yarn add @react-native-community/slider或npm install @react-native-community/slider --save 如果使用iOS，请安装...
jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果
04-16
jquery.slicebox酷炫的html5 3d图片轮播幻灯片切换效果
jQuery插件slicebox实现3D动画图片轮播切换特效
10-24
Slicebox是一款效果非常华丽的jquery和css3 3d幻灯片插件。Slicebox幻灯片插件能够将图片切片，然后做3d旋转。Slicebox幻灯片插件共有4种效果，视觉冲击感非常强。
3D切换效果slicebox焦点图，对于不支持css3 3D变换的旧式浏览器依然可以优雅降级运行，兼容主流浏览器
05-23
3D切换效果slicebox焦点图，对于不支持css3 3D变换的旧式浏览器依然可以优雅降级运行，兼容主流浏览器，使用chrome，firefox浏览可查看3D效果
3DSlicebox
01-02
3DSlicebox,Slicebox,3d
3D切换效果slicebox焦点图
10-08
3D切换效果slicebox焦点图
使用 CSS3 实现 3D 图片滑块效果
dechen6073的博客
07-05 189
Slicebox – A fresh 3D image slider with graceful fallback 英文原文地址：http://tympanus.NET/codrops/2011/09/05/slicebox-3d-image-slider/项目地址：https://github.com/codrops/Sliceboxdemo地址：http://tympanus.ne...
SliceBox
weixin_30726161的博客
09-27 141
SliceBox相当于一个轮播图插件，只不过是3D的。 先来查看它能实现的效果: 官网：http://tympanus.net/codrops/2011/09/05/slicebox-3d-image-slider/ 兼容性：由于该插件使用到了CSS3中的变换变形等属性，所以在不支持CSS3的浏览器中看不到3D效果， 　　　　但是图片切换的时候会是前一张图片淡入后一张图片淡出...
swiper炫酷_10款jQuery图片左右滚动插件
weixin_32304077的博客
01-16 479
在现代的网页设计中，图片和内容滑块是一种极为常见和重要的元素。你可以从头开始编写自己的滑动效果，但是这将浪费很多时间，因为网络上已经有众多的优秀的jQuery滑块插件。当然，如果要从大量的jQuerySlider 中挑选出适合自己的插件也是需要一些时间的。因此这篇文章给大家挑选了10款优秀的jQuerySlider 插件，希望能帮助到你。1.SlidesJSSlideJS带有CSS3过...
vue-concise-slider vue3 ts
09-21
vue-concise-slider是一个简单的滑动组件，支持自适应、全屏、按钮和分页。它是一个轻量级的组件，只有约24kB的压缩后文件大小。该组件兼容移动端和PC端，支持vue2.0版本。 在Vue3中使用vue-concise-slider，你需要...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值