博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5 CSS3 精美案例 : 达到VCD盒个性幻灯片
阅读量:6973 次
发布时间:2019-06-27

本文共 5859 字,大约阅读时间需要 19 分钟。

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

哈,首先感谢下w3cfuns教师,行~

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

效果图:

图片切换是不是非常个性,效果也非常不错。大家能够将其使用到自己的站点上。

先看下html:

        
  • 超人归来
  • 超凡蜘蛛侠
  • 黑暗骑士:蝙蝠侠
  • 美国队长
  • 雷神托儿
  • 金刚狼
0
1
2
3
4
5
能够看到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);        },        /**         * button点击切换         * @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()调用、

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

版权声明:本文博主原创文章,博客,未经同意不得转载。

你可能感兴趣的文章
“南海云”及大数据服务中心项目启动
查看>>
Crypto++编译使用
查看>>
SQLite.swift —— 纯 Swift 封装的 SQLite 框架
查看>>
《深入理解Spark:核心思想与源码分析》——3.11节ContextCleaner的创建与启动
查看>>
“淘宝心选”上线!taobaoxinxuan.xin被阿里巴巴收购
查看>>
天猫黑科技秘密全公开!人脸识别、AR交互、3D物体云识别...
查看>>
《深入浅出iPhone/iPad开发(第2版)》——……因为每个人都想要一个!
查看>>
《Adobe After Effects CS4经典教程》——1.5 对合成图像作动画处理
查看>>
Centos7.x系统网卡启动报错问题排查
查看>>
ROCBOSS v2.1.0 正式发布,PHP 微社区
查看>>
《微信公众平台开发:从零基础到ThinkPHP5高性能框架实践》——1.3 微信公众平台的使用...
查看>>
PostGIS 坐标转换(SRID)的边界问题 - ST_Transform
查看>>
苹果Mac 30周年:那些改变世界的人和Mac电脑
查看>>
倪光南:建议政府停止采购和使用“ Win10 政府版”
查看>>
Arquillian OSGi 2.2.1.Final 发布
查看>>
《深入理解ElasticSearch》——第2章查询DSL进阶 2.1 Apache Lucene默认评分公式解释...
查看>>
《Adobe Premiere Pro CS4经典教程》——1.3 Adobe Premiere Pro CS4中的非线性编辑
查看>>
《VoIP技术构架(第2版·修订版)》一 第2章 企业电话的今天
查看>>
浏览器自动化测试解決方案 Geb
查看>>
《C程序员从校园到职场》一导读
查看>>