3D Banner(jQuery)

1.这是用面向对象的思想去动态生成banner的简易流程,用到一个javaScript框架jQuer；

2.将代码黏贴成html文件，直接用浏览器打开即可；

3.layer属于弹窗提示类插件，可能需要自己手动引入，因为在分成1000分以上时，可能浏览器会被卡死，所以给了一个小小的弹窗提示！

4.代码中有注释，看到的小伙伴可以用chrome或者是火狐浏览器测试一下，每个浏览器解析代码机制不同，会一点差异，不支持IE浏览器。

代码如下：

<!doctype html>
<html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta name="Generator" content="EditPlus®">
    <meta name="Author" content="1的N次幂">
    <meta name="Keywords" content="3D banner">
    <meta name="Description" content="">
    <title>Document</title>
    <style type="text/css">
        *{
            margin:0;
            padding:0;
        }
        body{
            font-size:14px;
        }
        a{
            text-decoration:none;
            font-size:14px;
            color:#fff;
        }
        ul li,ol{
            list-style-type:none;
        }
        .bg_img{
            width:100%;
            height:100%;
        }
        .bg_img img{
            width:100%;
            height:100%;
            position:fixed;
            top:0;
            left:0;
        }
        .container{
            margin-top:110px;
            width:100%;
            height:600px;
        }
        .container .banner{
            margin:auto;
            width:800px;
            height:300px;
            perspective:800px;
        }
        .container .banner ul{
            width:800px;
            height:300px;
        }
        .container .banner ul li{
            height:300px;
            position:relative;
            transform-style:preserve-3d;
            float:left;
        }
        .container .banner ul li div{
            height:300px;
            width:100%;
            position:absolute;
            text-align:center;
            line-height:300px;
        }
        /*li div:nyh-child(n):表示li下的第n个div
            transform-origin：旋转轴
            transform：translateZ(150px) rotateX(90deg);沿着z轴正方向移动150px，沿着X轴旋转90度
        */
        .container .banner ul li div:nth-child(1){
            top:-300px;
            transform:translateZ(150px) rotateX(90deg);
            transform-origin:bottom;
            background-image:url("http://a2.qpic.cn/psb?/V13NXKT31gjmyo/a5bjFmef8GgRPOHWtmyaLfIoH*I23Oii0kIJm1.uzgo!/b/dAkBAAAAAAAA&bo=IAMvAQAAAAAFByk!&rf=viewer_4");
        }
        .container .banner ul li div:nth-child(2){
            top:300px;
            transform:translateZ(150px) rotateX(-90deg);
            transform-origin:top;
            background-image:url("http://a3.qpic.cn/psb?/V13NXKT31gjmyo/4sadN7zAjedk2GVCDbKcSXvHFfJ2OUfys9AvdQ73Cdc!/b/dAoBAAAAAAAA&bo=KgM.AQAAAAAFADU!&rf=viewer_4");
        }
        .container .banner ul li div:nth-child(3){
            transform:translateZ(150px);
            background-image:url("http://a1.qpic.cn/psb?/V13NXKT31gjmyo/T*2y5kTD84XvskMWRXIItp64ZFWat2ojZk6rHRFY81A!/b/dAsBAAAAAAAA&bo=KQM3AQAAAAAFAD8!&rf=viewer_4");
        }
        .container .banner ul li div:nth-child(4){
            transform:translateZ(-150px) rotateX(180deg);
            background-image:url("http://a1.qpic.cn/psb?/V13NXKT31gjmyo/.H6eziKX93XqAVZ1cZMbtyi9YNRkLbwMoZOzlun06Ak!/b/dAsBAAAAAAAA&bo=KQNUAQAAAAAFAFw!&rf=viewer_4");
        }
        .container .banner ol{
            position:absolute;
            right:-60px;
            bottom:-15px;
        }
        .container .banner ol li{
            position:relative;
            z-index:9999;
            float:left;
            margin:3px;
            font-size:14px;
            border:1px solid #fff;
            background-color:rgba(0,0,0,0.8);
            color:#fff;
            width:20px;
            height:20px;
            text-align:center;
            line-height:20px;
            border-radius:50%;
            cursor:pointer;
            transition:.5s;
        }

        .container .banner ol:hover li{
            box-shadow:1px 1px 1px 0 rgba(204,204,204,0.7);
            transition:.5s;
        }
        .container .banner ol li:hover{
            box-shadow:1px 1px 1px 1px #222;
            transition:.5s;
        }
        #config{
            margin:30px;
            position:relative;
            z-index:9999;
            font-size:20px;
            color:#fff;
        }
        #config input{
            height:20px;
            width:100px;
            font-weight:800;
            font-size:20px;
            color:#f00;
            border:0;
        }

    </style>
 </head>

 <body>
    <div class="bg_img">
        <img src="http://a1.qpic.cn/psb?/V13NXKT31gjmyo/k72K3W2VjrL9oaQotS9QgcTWd2bZ9pMl6iR4FMo8ylk!/b/dHEBAAAAAAAA&bo=cgSAAgAAAAAFANc!&rf=viewer_4"/>
    </div>
    <div id="config">
        份&nbsp;&nbsp;&nbsp;数：<input type="number"  id="count"/></br>
        时间（秒）：<span type="number" id="base_time"></span></br>
        延迟（秒）：<span type="number" id="delay_time"></span>
    </div>
    <div class="container">
        <div class="banner">
            <ul>

            </ul>
            <ol>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ol>
        </div>
    </div>

    <script type="text/javascript" src="http://files.cnblogs.com/files/zhangbin-java/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="http://files.cnblogs.com/files/zhangbin-java/layer.js"></script>
    <script type="text/javascript">
        //设置轮播图被分成的分数，播完的时间，和延迟时间
        function banner(count,base_time,delay_time){
            var $ul = $(".container .banner ul");
            var $ol = $(".container .banner ol");
            var bg_position = -800/count;
            //循环份数，动态的设置背景定位
            for(var i=0;i<count;i++){
                if(i>=count-(count-1)/2){
                $ul.append(
                "<li style='z-index:"+-i+";transition:"+base_time+"s "+i*delay_time+"s;width:"+-bg_position+"px'>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                "</li>");
                }else{
                $ul.append(
                "<li style='z-index:"+i+";transition:"+base_time+"s "+i*delay_time+"s;width:"+-bg_position+"px'>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                    "<div style='background-position:"+bg_position*i+"px'></div>"+
                "</li>");
                }
            }
            $(".container .banner ol").show();
            $ol.find("li").click(function(){
                var index  = $(this).index();
                $ul.find("li").finish().css({
                    "transform":"rotateX("+index*90+"deg)"
                });
            })
        }
        /*banner(份数，基础时间，延迟时间)
          banner(count,base_time,delay_time)

            测试结果：当满足以下条件时，效果最好
            if(count>=100){
                base_time = 1
                delay_time = 0.01;
            }
            if(count<100){
                base_time = 1
                delay_time = 0.1;
            }
        */
        $("#count").val(10)
        $("#base_time").text(1);
        $("#delay_time").text(0.1);
        banner(10,1,0.1);//默认是被分为10分 每份需要1秒钟走完，下一份开始走的时间会延迟0.1秒

    $(function(){
        //动态的设置被分成的分数,这里采用键盘事件获取分数，请用键盘输入分数
        $("#config").find("#count").keyup(function(){
            $(".container .banner ol").hide();
            $(".container .banner ul").html("");
            var count = $(this).val();
            if(count<=10){
                $("#base_time").text(0.5);
                $("#delay_time").text(0.1);
                banner(count,0.5,0.1)
            }else if(count<=50){
                $("#base_time").text(1);
                $("#delay_time").text(0.03);
                banner(count,1,0.03);
            }else if(count<=100){
                $("#base_time").text(1);
                $("#delay_time").text(0.02);
                banner(count,1,0.02);
            }else if(count<1000){
                $("#base_time").text(1);
                $("#delay_time").text(count/30000);
                banner(count,1,count/30000);
            }else{
                //被分成1000分以上时给予提示，采用layer插件，需引入jQuery
                layer.confirm('你确定你的电脑支持'+count+'份？', {
                      btn: ['YES','NO']
                    }, function(){
                        layer.closeAll("dialog");
                        $("#base_time").text(1);
                        $("#delay_time").text(count/100000);
                        banner(count,1,count/100000);
                    }, function(){
                        layer.closeAll("dialog");
                    });

            }

        });

    })
    </script>
 </body>
</html>

我们把它分成150分的效果

3D Banner(jQuery)的更多相关文章

3D banner(CSS3+HTML5)
1.这是一篇 3Dbanner制作的简易流程,支持高版本的chrome和firefox浏览器,俩浏览器显示可能会有些差异 2.没有兼容性代码,因为仅仅只是熟悉流程,希望小伙伴们自己改善哈(>﹏& ...
14种网页图片和文字特效的jQuery插件代码
1.网页图片3d旋转jQuery代码演示和下载地址 2.存css3实现的tabl选项卡代码演示和下载地址 3.jQuery标签旋转代码演示和下载地址 4.鼠标悬浮的图片选项卡代码演示和下载地址 ...
jQuery背景跟随鼠标移动的网页导航
首页 PSD模板 CSS模板特效插件源码下载酷站欣赏建站资源建站教程心境之旅在线留言设为首页加入收藏我要投稿联系站长 Search 首页 PSD模板 CSS模板特效插件 ...
jquery树形菜单插件treeView
Jquery的treeview很好用,如果是简单的树形菜单按照下面的源码实例模仿就可以. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...
Web前端资源汇总
本文地址:http://www.cnblogs.com/jihua/p/webfront.html 网页特效库 2017新年快乐特效 CSS3+jQuery实现时钟插件 Html5入门实例" ...
tooltip 鼠标移动上去出现图片或文字与title大同小异
代码如下: <script type="text/javascript" src="jquery-1.3.2.min.js"></script ...
从零开始系列之vue全家桶（6）实战前的设计
搭建好基本框架后我们应该先想一想个人博客应该有哪些功能呢? 为了更好的适应企业的要求,这里我将搭建一个非典型的博客. 在全部采用单页开发的情况下,使用vue-router,路由分别设置home.abo ...
30款jQuery常用网页焦点图banner图片切换下载
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...
30款jQuery常用网页焦点图banner图片切换下载（转）
1.jquery 图片滚动特效制作 slide 图片类似窗帘式图片滚动查看演示 2.jquery幻灯片插件带滚动条的圆形立体图片旋转滚动查看演示 3.jQuery图片层叠旋转类似洗牌翻转图片幻灯片 ...

随机推荐

python 邮件基础篇
python 操作邮件,不是很方便,说实话还不是理解的特别透彻,这次想把自己碰到的东西总结下来邮件有imap,pop,imap协议,这次使用的是imap4协议,主要用了imap4和mail类, 代码 ...
EasyUI DateTimeBox设置默认时间的注意点
ECMAScript
在Javascript中,万物皆对象,但对象也有区别,大致可以分为两类,即:普通对象(Object)和函数对象(Function). 一般而言,通过new Function产生的对象是函数对象,其他对 ...
深入学习jQuery选择器系列第六篇——过滤选择器之状态选择器
× 目录 [1]焦点状态 [2]哈希状态 [3]动画状态[4]显隐状态前面的话过滤选择器的内容非常多,本文介绍过滤选择器的最后一部分——状态选择器焦点状态 :focus :focus选择器选择当 ...
android应用安全——（数据抓包）跟踪监控android数据包
转载博客:http://blog.csdn.net/xyz_lmn/article/details/8808169 web开发中Chrome.IE.firefox等浏览器都自带提供了插件帮助开发者跟踪 ...
【原创】开源Math.NET基础数学类库使用(10)C#进行基本数据统计
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录前言 ...
IOS开发之微信山寨版
为了犒劳自己的学习内容,就山寨个微信的视图控制吧.拿着微信,仔细的看了一下,主要用到了TabBarController以及配置TabBarItem, NavigationController以及配置N ...
swift2.0 如何隐藏和设置状态栏
1.在ViewController中操作当前ViewController的状态栏/** 隐藏状态栏 */ override func prefersStatusBarHidden() -> Bo ...
IE6下的png透明图片的背景定位
在IE6下PNG透明图片做背景,无法使用background-position进行定位.但是可以使用margin和绝对定位来进行. 另外,由于IE6下的 :hover 只对<a>支持,对其 ...
hibernate笔记--实体类映射文件"*.hbm.xml"详解
实体类就是指普通的POJO,Hibernate并不知道那个实体类对应数据库的哪一张表,所以还需要配置一下,常用的方式就是*.hbm.xml文件[配置与@注解配置,这里介绍前者的详细属性: <?x ...

3D Banner(jQuery)

3D Banner(jQuery)的更多相关文章

随机推荐

热门专题