资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/banner 3D 效果自适应

banner 3D 效果自适应

heartFollower / 1240人阅读

摘要：页面后台上传宽高为轮播计时条点点兼容兼容极速模式插件本文采用了插件


http://xingeedu.com/

页面 
</>复制代码 
  2.             
  3.                 
  4.                     
  5.                         
  6.                     
  7.                 
  8.             
  9.             
  10.             
  11.                 
  12.             
  13.
css 
</>复制代码 
  1. #navbar{
  2.     position:relative;
  3.     height:500px;
  4.     overflow:hidden;
  5.     background: url(../../../image/r_loading.gif) #eee no-repeat;
  6.     background-position:center center;    
  7.     background-size:80px 80px;
  8. }
  9. #navbar .slide a{
  10.     background-position:center center;
  11.     display:inline-block;
  12.     width:100%;
  13.     height:500px;
  14.     background-repeat:no-repeat
  15. }
js 
</>复制代码 
  1. function initBanner(){
  2.         //后台上传宽高为1920*500
  3.         var barImg = $("#navbar").find("a");
  4.         barImg.each(function(){
  5.             var imgURL = $(this).data("img");
  6.             $(this).css({"background-image":"url("+imgURL+")"});
  7.         })
  8.         //轮播
  9.         var $box = $("#box"), $indicators = $(".goto-slide"), $effects = $(".effect"), $timeIndicator = $("#time-indicator"), slideInterval = 5000;
  10.         var switchIndicator = function($c, $n, currIndex, nextIndex) {
  11.             $timeIndicator.stop().css("width", 0);
  12.             $indicators.removeClass("current").eq(nextIndex).addClass(
  13.                     "current");
  14.         };
  15.         //计时条
  16.         var startTimeIndicator = function() {
  17.             $timeIndicator.animate({
  18.                 width : "100%"
  19.             }, slideInterval);
  20.         };
  21.         //点点    
  22.         $("#controls").on("click", ".goto-slide", function(ev) {
  23.             $box.boxSlider("showSlide", $(this).data("slideindex"));
  24.             ev.preventDefault();
  25.         });
  26.         
  27.         startTimeIndicator();
  28.         
  29.         $box.boxSlider({
  30.                speed : 1000,
  31.                autoScroll : true,
  32.                timeout : slideInterval,
  33.                next : "#next",
  34.                prev : "#prev",
  35.                pause : "#pause",
  36.                effect : "fade",
  37.                blindCount : 15,
  38.                onbefore : switchIndicator,
  39.                onafter : startTimeIndicator
  40.            });
  41.         /兼容ie
  42.         if (window.navigator.userAgent.indexOf("Trident") != -1) {
  43.             //兼容
  44.             $box.boxSlider("option", "effect", "scrollHorz");
  45.         }else{
  46.             //极速模式
  47.             $box.boxSlider("option", "effect", "scrollHorz3d");
  48.         }
  49.     }
插件 
</>复制代码 
  1. 本文采用了插件：
  2. http://www.html5tricks.com/demo/Adaptors/index.html
GPU云服务器 云服务器 banner效果js 自适应 文本自适应 文字自适应

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93075.html

相关文章

  • 仿照锤子科技官网的banner 3d效果

    摘要：以前看到锤子科技官网的效果挺好玩的，一直没有研究今天看到饥人谷，使用给出了一种实现方式我自己用原生也实现了一遍。我的方法原理，如图所示，假设图中的小圆点是中心点的位置为事件发生的位置。在水平方向上，就是元素要旋转的度数代码在最下方。 以前看到锤子科技官网的banner效果挺好玩的，一直没有研究；今天看到饥人谷，使用jquery给出了一种实现方式；我自己用原生js也实现了一遍。大致原理相...

    Scott 评论0 收藏0

  • 锤子官网3D翻转特效banner插件

    摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出 锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足 这么有趣的效果...

    gougoujiang 评论0 收藏0

  • 锤子官网3D翻转特效banner插件

    摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出 锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足 这么有趣的效果...

    alogy 评论0 收藏0

  • 锤子官网3D翻转特效banner插件

    摘要：锤子官网翻转特效插件每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的，感觉科技感十足这么有趣的效果，自己也很想试一试能否实现，于是就核心的特效做了代码的实现同时也将代码进行了封装，做成了可以供大家引用的插件欢迎大家体验，同时提出 锤子官网3D翻转特效banner插件 **每次访问锤子手机官网的页面时，都会欣喜的玩耍一番那个会翻转的banner，感觉科技感十足 这么有趣的效果...

    meteor199 评论0 收藏0

发表评论

登陆后可评论

0条评论

heartFollower

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<