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图片层叠旋转类似洗牌翻转图片幻灯片 ...
随机推荐
- 火狐、谷歌、IE关于document.body.scrollTop和document.documentElement.scrollTop 以及值为0的问题
一.先遇到document.body.scrollTop值为0的问题 做页面的时候可能会用到位置固定的层,读取document.body.scrollTop来设置层的位置,像这样, window.on ...
- android知识点随笔
android project中Manifest.xml中的<uses-sdk>标签元素决定的. 此标签包含如下3个属性: android:minSdkVersion —— 此属性决定你的 ...
- AVEVA Model Data Exchange Exports Structure Models
AVEVA Model Data Exchange Exports Structure Modelseryar@163.com Use Model Data Exchange Addin to exp ...
- 【原创】开源Math.NET基础数学类库使用(12)C#随机数扩展方法
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新 开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录 前言 ...
- 从零开始编写自己的C#框架(6)——SubSonic3.0插件介绍(附源码)
前面几章主要是概念性的东西为主,向初学者们介绍项目开始前的一些知识与内容,从本章开始将会进入实操阶段,希望跟着本系统学习的朋友认真按说明做好每一步操作(对于代码最好是直接照着文档内容在你的IDE中打一 ...
- java多线程--定时器Timer的使用
定时的功能我们在手机上见得比较多,比如定时清理垃圾,闹钟,等等.定时功能在java中主要使用的就是Timer对象,他在内部使用的就是多线程的技术. Time类主要负责完成定时计划任务的功能,就是在指定 ...
- Hive启动报错: Found class jline.Terminal, but interface was expected
报错: [ERROR] Terminal initialization failed; falling back to unsupported java.lang.IncompatibleClassC ...
- 关于Javascript作用域及作用域链的总结
本文是根据以下文章以及<Javascript高级程序设计(第三版)>第四章相关内容总结的. 1.Javascript作用域原理,地址:http://www.laruence.com/200 ...
- [Asp.net 5] Localization-resx资源文件的管理
上一篇博文地址:[Asp.net 5] Localization-简单易用的本地化-全球化信息 本文继续介绍asp.net 5多语言.今天重点讲的是多语言的resx文件.涉及到的工程有:Microso ...
- 【MVVM Light】新手初识MVVM,你一看就会
一.前言 作为一个初入软件业的新手,各种设计模式与框架对我是眼花缭乱的.所以当我接触到这些新知识的时候就希望自己能总结几个步骤,以便更好更方便的在日常工作中进行使用. MVVM顾名思义就是Model- ...