HTML5 CSS3 精美案例 : 达到VCD盒个性幻灯片

HTML5 CSS3 精美案例 : 达到VCD盒个性幻灯片

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

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

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

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

效果图:

HTML5 CSS3 精美案例 : 达到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);        },        /**         * 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()调用、

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

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

  点击下载源代码

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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/117040.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号