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">
份 数：<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图片层叠旋转类似洗牌翻转图片幻灯片 ...
随机推荐
- ClickOnce部署（5）：自定义安全权限
今天我们来探讨一下在ClickOnce部署中如何严格控制应用程序的权限. 演示应用 为了在下文中能更好地演示,我们先要做一个测试项目.也为了显得简单易懂,我使用最常用且最常见的WinForm项目,这是 ...
- Jser 设计模式系列之面向对象 - 接口封装与继承
GOF在<设计模式>中说到:面向接口编程,而非面向实现编程 鉴于此,这个概念可见一斑! JS却不像其他面向对象的高级语言(C#,Java,C++等)拥有内建的接口机制,以确定一组对象和另一 ...
- 深入理解客户区尺寸client
前面的话 关于元素尺寸,一般地,有偏移大小offset.客户区大小client和滚动大小scroll.前文已经介绍过偏移属性,后文将介绍scroll滚动大小,本文主要介绍客户区大小client 客户区 ...
- 应用程序框架实战十五:DDD分层架构之领域实体（验证篇）
在应用程序框架实战十四:DDD分层架构之领域实体(基础篇)一文中,我介绍了领域实体的基础,包括标识.相等性比较.输出实体状态等.本文将介绍领域实体的一个核心内容——验证,它是应用程序健壮性的基石.为了 ...
- web前端基础知识总结
上个寒假总结的web前端的一些知识点给大家分享一下 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 ...
- 编写简单的ramdisk（选择IO调度器）
前言 目前linux中包含anticipatory.cfq.deadline和noop这4个I/O调度器.2.6.18之前的linux默认使用anticipatory,而之后的默认使用cfq.我们在前 ...
- ASP.NET MVC 6 一些不晓得的写法
今天在看 Scott Guthrie 的一篇博文<Introducing ASP.NET 5>,在 MVC 6 中,发现有些之前不晓得的写法,这边简单记录下,算是对自己知识的补充,有些我并 ...
- android 之 ListView 里面嵌套 GridView 遇到的问题及其解决方法。
我们直接入主题.所有问题例子请参照下图 1,怎样使图片具有点击事件? 答: 解决方法: 在你的BaseAdapter里面不要设置下面这三个东西,然后再设置GridView的onItemClick. g ...
- 让自己也能使用Canvas
<canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...
- APP接口自动化测试JAVA+TestNG(三)之HTTP接口测试实例
前言 前两篇普及相关基础知识后,本篇主要对举例对国家气象局接口自动化测试进行讲解(Get请求及结果断言),以达到自动化测试入门目的,除了前两篇的一些了解外,需要有一定的JAVA知识(HTTP相 ...