分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

转载请标明出处：http://blog.csdn.net/lmj623565791/article/details/31015121

哈，首先感谢下w3cfuns的老师，嗯~

好了，这次给发夹分享一个CSS3+Javascript VCD包装盒个性幻灯片的一个案例。

效果图：

图片切换是不是很个性，效果也很不错，大家可以将其使用到自己的网站上。

先看下html：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"        "http://www.w3.org/TR/html4/loose.dtd"><html><head>    <title></title>    <meta content="text/html;charset=utf-8" http-equiv="content-type">    <link type="text/css" href="reset.css" rel="stylesheet">    <link type="text/css" href="main.css" rel="stylesheet">    <script type="text/javascript" src="../../jquery-1.8.3.js"></script>    <script type="text/javascript" src="vcd.js"></script>    <script type="text/javascript">        $(function ()        {            vcd.init();            vcd.autoPlay();        });    </script></head><body><div id="vcd">    <i id="cd"></i>    <ul>        <li class="active"><a><img alt="超人归来" src="ad/1.jpg"/></a></li>        <li><a><img alt="超凡蜘蛛侠" src="ad/2.jpg"/></a></li>        <li><a><img alt="黑暗骑士：蝙蝠侠" src="ad/3.jpg"/></a></li>        <li><a><img alt="美国队长" src="ad/4.jpg"/></a></li>        <li><a><img alt="雷神托儿" src="ad/5.jpg"/></a></li>        <li><a><img alt="金刚狼" src="ad/6.jpg"/></a></li>    </ul>    <a id="wrapPager" title="超人归来" target="_blank"></a>    <div id="indexBar">        <a class="active">0</a>        <a href="#">1</a>        <a href="#">2</a>        <a href="#">3</a>        <a href="#">4</a>        <a href="#">5</a>    </div></div></body></html>

可以看到div#vcd是最外层容器，给它设置了一个背景；ul li 分别设置图片元素；i#cd设置背景为光盘，然后设置显示位置；div#indexBar中显示图片的索引，供点击。

CSS：

#vcd, #vcd ul, #vcd #wrapPager{    width: 200px;    height: 272px;}#vcd, #vcd ul, #vcd #wrapPager, #cd{    background: url("images/disk.png") no-repeat 0 0;}#vcd{    position: relative;    margin: 20px auto 0;}#vcd ul, #vcd #wrapPager, #cd{    position: absolute;}#vcd ul{    background-position: -263px 3px;}#vcd ul li, #vcd ul li a, #vcd ul li a img{    display: block;    width: 178px;    height: 264px;    overflow: hidden;}#vcd ul li{    top: 5px;    left: 2px;    opacity: 0;    /*visibility: hidden;*/    -webkit-transition: opacity  linear .6s;    /*-webkit-transition: visibility  linear .6s;*/    -moz-transition: opacity  linear .6s;    -ms-transition: opacity  linear .6s;    transition: opacity  linear .6s;    position: absolute;}#vcd ul li.active{    opacity: 1;    /*visibility: visible;*/}#vcd #cd{    top: 64px;    left: 78px;    width: 146px;    height: 146px;    background-position: -510px 0;    -webkit-transition: left ease .4s, -webkit-transform ease 1.2s .44s;    -moz-transition: left ease .4s, -moz-transform ease 1.2s .44s;    -ms-transition: left ease .4s, -ms-transform ease 1.2s .44s;    transition: left ease .4s, transform ease 1.2s .44s;}#vcd #cd.switch{    left: 120px;    -webkit-transform: rotate(2520deg);    -moz-transform: rotate(2520deg);    -ms-transform: rotate(2520deg);    transform: rotate(2520deg);}#vcd #wrapPager{    display: block;    left: 0;    top: 2px;}#vcd #indexBar{    top: 235px;    left: 25px;    text-align: center;    overflow: hidden;    opacity: 0;    visibility: hidden;    -webkit-transition: opacity linear .6s;    -moz-transition: opacity linear .6s;    -ms-transition: opacity linear .6s;    transition: opacity linear .6s;    position: absolute;}#vcd:hover #indexBar{    opacity: 1;    visibility: visible;}#vcd #indexBar a{    display: inline-block;    margin: 0 4px;    height: 0;    width: 0;    border: 4px #9f9f9f solid;    border-radius: 100%;    text-indent: -200px;    overflow: hidden;}#vcd #indexBar a:hover, #vcd #indexBar a.active{    width: 4px;    height: 4px;    border-color: #05c7fe;    border-width: 2px;}

对于CSS大家可以照着敲一下，对于位置的布局主要就是依赖position:relative和position:absolute;然后大家会发现使用CSS3的过渡和变形：transition和transform 我简单提一下：

1、transition : left 1s ease 0s ;

参数1：需要过渡效果的属性，可以为单个属性：width,left等，也可以设置为all。

参数2：过渡的持续时间

参数3：过渡的速率动画，这个大家有兴趣可以查查，就是先慢后快，匀速之类的。

参数4：过渡开始的延时时间

transition也支持如下写法：

transition-property:border, color , text-shadow ;

transition-duration:2s , 3s , 3s ;

2、transform支持几种变形

transform:scale(0.5) 缩放

transform:rotate(90deg)旋转90度

transform:skew(10deg  2deg)斜切，矩形转化为平行四边形

transform:matrix() 这个矩阵变形  http://www.useragentman.com/matrix/ 这个网站提供在线设计矩阵

transform:translate(40px 20px)平移

例外提供了：transform-origin：20% 20%；用于修改变形效果的起点，默认为重点

当然我们这个例子用的是旋转，也就不用修改变形效果起点了。

最后是JS：

/** * Created with JetBrains WebStorm. * User: zhy * Date: 14-6-15 * Time: 下午6:26 * To change this template use File | Settings | File Templates. */var vcd = {        /**         * 常量         */        ID_VCD: "vcd",        ID_INDEXBAR: "indexBar",        ID_CD: "cd",        CLASS_ACTIVE: "active",        CLASS_CD_SWITCH: "switch",        currentIndex: 0,        isRunning: false,        timer: null,        init: function ()        {            /**             * 初始化数据与事件             */            vcd.vcd = $("#" + vcd.ID_VCD);            vcd.cd = $("#" + vcd.ID_CD);            vcd.imgs = $("li", vcd.vcd);            vcd.indexBar = $("#" + vcd.ID_INDEXBAR);            vcd.vcd.mouseover(function (event)            {                clearInterval(vcd.timer);            });            vcd.vcd.mouseout(function ()            {                vcd.autoPlay();            })            ;            $("a", vcd.indexBar).click(vcd.dotClick);        },        /**         * 按钮点击切换         * @param event         */        dotClick: function (event)        {            //如果当前动画还在运行，则直接返回            if (vcd.isRunning)return;            vcd.isRunning = true;            $("a", vcd.indexBar).removeClass(vcd.CLASS_ACTIVE);            $(this).addClass(vcd.CLASS_ACTIVE);            vcd.currentIndex = $(this).text();            vcd.cd.addClass(vcd.CLASS_CD_SWITCH);            setTimeout(vcd.resetDotClick, 1500);            event.preventDefault();//阻止a的默认跳转页面        },        /**         * 当cd动画结束后，更新图片         */        resetDotClick: function ()        {            vcd.cd.removeClass(vcd.CLASS_CD_SWITCH);            vcd.imgs.removeClass(vcd.CLASS_ACTIVE);            vcd.imgs.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);            vcd.isRunning = false;        },        autoClick: function ()        {            var as = $("a", vcd.indexBar);            vcd.currentIndex++;            if (vcd.currentIndex == as.length)            {                vcd.currentIndex = 0;            }            as.removeClass(vcd.CLASS_ACTIVE);            as.eq(vcd.currentIndex).addClass(vcd.CLASS_ACTIVE);            vcd.cd.addClass(vcd.CLASS_CD_SWITCH);            setTimeout(vcd.resetDotClick, 1500);        },        /**         * 自动播放         */        autoPlay: function ()        {            vcd.timer = setInterval(function ()            {                vcd.autoClick();            }, 3000);        }    }    ;

单例的写法，定义了一个对象，然后用户通过vcd.init() ;vsd.autoPlay()调用、

    <script type="text/javascript">        $(function ()        {            vcd.init();            vcd.autoPlay();        });    </script>

重置的css我就不贴了，下面我把源码提供给大家下载。

点击下载源码

分享一下我老师大神的人工智能教程。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！https://blog.csdn.net/jiangjunshow

HTML5 CSS3 精美案例 实现VCD包装盒个性幻灯片相关推荐

  1. HTML5 CSS3 精美案例 ： 实现VCD包装盒个性幻灯片

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/31015121 哈,首先感谢下w3cfuns的老师,嗯~ 好了,这次给发夹分享一个 ...

  2. 推荐100多款国内外HTML5+CSS3精美网站模板

    HTML5赋予网页更好的意义和结构.更加丰富的标签将随着对RDFa的,微数据与微格式等方面的支持,构建对程序.对用户都更有价值的数据驱动的Web.H​T​M​L​ ​5​的​发​布​无​疑​给​网​页 ...

  3. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果

    首先感谢w3cfuns的老师~ 今天给大家带来一个CSS3制作的翻牌效果.就是鼠标移到元素上,感觉能够看到元素背后的信息. 大家假设制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语, ...

  4. HTML5 CSS3专题 诱人的实例 CSS3打造百度贴吧的3D翻牌效果 以及图片提交

    今天给大家带来一个CSS3制作的翻牌效果,就是鼠标移到元素上,感觉可以看到元素背后的信息.大家如果制作考验记忆力的连连看.扑克类的游戏神马的,甚至给女朋友写一些话语,放在使用该实例制作的相册之后都可以 ...

  5. 12款界面精美的 HTML5 CSS3 网站模板

    这里分享的12款完全采用响应式设计的 HTML5 & CSS3 网站设计模板.每一个细节都精心设计,以创建一个美妙的用户体验.这些响应主题和模板最适合用于电子商务,商业门户网站,个人作品集以及 ...

  6. 电商项目实战第一节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【顶部导航】

    文章目录 [考拉海购网站]之[顶部导航] 第一步,分析布局 第二步,建立基本的文本目录及文件 第三步,根据第一步对导航栏的分析,在html代码里面补全需要的标签 index.html文件代码 第四步, ...

  7. 电商项目实战第三节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【分类导航栏】

    上一节:电商项目实战第二节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[搜索框那一栏] 文章目录 [考拉海购网站]之[分类导航栏] 第一步,分析页面布局 第二步,写需要的html标签 i ...

  8. 电商项目实战第六节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【页底信息，网站备案信息】

    上一节:电商项目实战第五节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[商品栏及右侧垂直导航] 文章目录 电商项目实战第六节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[页 ...

  9. 电商项目实战第四节: CSS3+HTML5+JS 设计案例【考拉海购网站】之【轮播图特效】

    上一节:电商项目实战第三节: CSS3+HTML5+JS 设计案例[考拉海购网站]之[分类导航栏] 文章目录 [考拉海购网站]之[轮播图特效] 第一步,根据页面布局写相应的html标签 index.h ...

最新文章

  1. 一幅图读懂量子力学（上）
  2. CR--同事分享学习
  3. python语言基础与应用章节七_专技天下Python语言基础与应用章节测试答案
  4. 串口通信模块3：串口通信编程基础（读写、关闭）
  5. 在Spring中使用JMS
  6. 飚王硬盘盒怎么样_ORICO M.2固态移动硬盘盒众测分享：移动存储也高速
  7. 神抓拍！2020搞笑野生动物摄影大赛，哈哈哈哈哈笑到头掉
  8. 如何看打印机的缓存区域_松下打印机好吗 松下打印机卡纸如何解决【详解】...
  9. cfree运行程序错误的原因_Python入门教程 | 第 8 章 错误、调试和测试
  10. [Bootstrap]bootstrap的简单原理
  11. java执行数学表达式_数学表达式解析-JAVA版
  12. 设计模式--适配器(Adapter)
  13. python安装rarfile模块_python模块整理7-zipfile模块
  14. python字符串和字节串有什么区别_python中的字符串和字节串
  15. rpm命令的使用与软件的安装
  16. 湿空气性质计算,随笔与学习记录(2.水蒸气分压,含湿量,相对湿度)
  17. 使用EXCEL计算并绘制KDJ指标
  18. maya中实时置换效果 dx11shader
  19. 【WiFi 6E】WiFi 6E信道分布
  20. Latex标题页上标和脚注的处理方法 如何在latex文件中添加footnote

热门文章

  1. RuntimeError: CUDA out of memory. Tried to allocate 6.38 GiB (GPU 0； 10.76 GiB total capacity； 708.0
  2. KEBA机器人控制器简介
  3. DQN(Deep Q Network)及其代码实现
  4. 对1976年Diffie和Hellman的文章《New Direction in Cryptography》的中文翻译
  5. 如何配置系统数据库服务器地址,如何配置系统数据库服务器地址
  6. Hive数据仓库实战
  7. linux 内核启动参数
  8. 【转载】专家答疑：Silverlight的用户体验优化
  9. [益智]：空姐分配物品
  10. 关于 Delphi 中流的使用(9) 分割与合并文件的函数