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图片层叠旋转类似洗牌翻转图片幻灯片 ...

随机推荐

精通visual c++指纹模式识别系统算法及实现
通过学习,掌握以下几个问题: 1.核心算法,并且向GVF衍生: 2.核心库封装的方法 2016年11月16日06:52:51 昨日实现了梯度场和频率场的计算.最大的感觉就是建立基础代码库的重要性. 如 ...
EntityFramework 7 OrderBy Skip Take－计算排序分页 SQL 翻译
先解释一下这个标题的意思,OrderBy 在 Linq 语句中,我们经常使用,比如 OrderBy(b => b.BlogId) 就是对 BlogId 字段进行升序排序,这是针对一个字段的排序, ...
ONE
我是漆黑夜空中闪烁凄凄的一颗星遥隔千里的双眸一遇看到了,你那藏在泪光里的话你一个人把泪擦干把话捏在手心陪着我,承受着黑夜的孤独说明:来自落网的一个期刊<ONE>. 听这个期 ...
在IE11下设置SharePoint Server 2013却遇到“需要 Internet Explorer 才能使用此功能。”的解决办法
就在昨天顺利升级到Windows 8.1 随之IE也升级到了IE11,但是当打开IE11设置SharePoint Server 2013的时候遇到了一些小情况: Figure 1使用Windows 8 ...
WCF局域网内使用代理无法访问解决方法
问题描述在大部分事业单位上网都是需要使用代理的,前几天带着一个同事写的程序过来部署,部署以后各个客户端通过WCF相互通讯,那么其中一个地方在本地局域网测试是没有问题的. 后发现一部分是原因是由于代理 ...
Javascript常用正则表达式汇总
一.匹配数字和字符串整数或者小数:^[0-9]+\.{0,1}[0-9]{0,2}$ 只能输入数字:"^[0-9]*$". 只能输入n位的数字:"^\d{n}$&qu ...
Android之圆形头像裁切
PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...
Date, TimeZone, MongoDB, java中date的时区问题
打印new Date(),Fri Aug 12 13:37:51 CST 2016. 显示Asia/Shanghai的时区,但是date toString 的时区简写却是CST.更坑爹的是,Googl ...
JS实现-页面数据无限加载
在手机端浏览网页时,经常使用一个功能,当我们浏览京东或者淘宝时,页面滑动到底部,我们看到数据自动加载到列表.之前并不知道这些功能是怎么实现的,于是自己在PC浏览器上模拟实现这样的功能.先看看浏览效果: ...
Mono.Cecil 初探（一）：实现AOP
序言本篇文章介绍基于Mono.Cecil实现静态AOP的两种方式:无交互AOP和交互式AOP. 概念介绍 Mono.Cecil:一个可加载并浏览现有程序集并进行动态修改并保存的.NET框架. AOP ...

3D Banner(jQuery)

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

随机推荐

热门专题