• 反俄毒招!世界杯遇尴尬:假球票1万余张,涉案金额1亿美金! 2019-06-14
  • 萨拉赫,你再不上 埃及队就要回家啦 2019-06-14
  • 中外学者齐聚拉萨 首届中国西藏拉萨阿里象雄文化国际学术研讨会召开 2019-06-09
  • 一语惊坛(5月22日):精忠报国是每一个热血青年的夙愿! 2019-06-06
  • 世界是动态发展与平衡的,不会静止不变,指导社会的理论也是不断发展完善的,由相对真理向绝对真理发展接近,这话不是我臆造的,来自学的大学课本根据马克思著作编写... 2019-06-06
  • 重庆 民俗文化进校园(我们的节日·端午) 2019-06-04
  • 太阳是宇宙加油站?不明物体多次靠近“加油”,看清后屏住呼吸 2019-06-04
  • 代理加盟 2019全新代理计划 赚钱+省钱双管齐下,独立平台,丰厚利润!

    您现在的位置: 波西亚时光ns > 站长学院 > 建站教程 >

    波西亚时光电解炉:提取图片主颜色作背景色自动换色JS

    来源:未知 发布时间:2019-03-30热度: ℃我要评论
    网站的全通轮播图的方法很多,有些图片做成非???宽大于1200px)。其实没必要得很大,京东、淘宝等平台的轮播图采用JS自动获取图片的主颜色作背景色。这属于图片优化细节,有如下优点 ①最大程度地减小图片尺寸和大小,减少网页加载时间; ②用户体验自适应好,图片中...

    波西亚时光ns www.1y2c.com

           网站的全通轮播图的方法很多,有些图片做成非???宽大于1200px)。其实没必要得很大,京东、淘宝等平台的轮播图采用JS自动获取图片的主颜色作背景色。这属于图片优化细节,有如下优点

    ①最大程度地减小图片尺寸和大小,减少网页加载时间;

    ②用户体验自适应好,图片中文字大小合适并不出现横滚动条;

    ③便于编辑管理,采用新的图片不需要更改模板CSS样式;

    ④主流浏览器都兼容性。

    全通轮播图效果展示

           参考重庆装修公司www.v25j.com主页轮播图。

    获取轮播图图片主色JS

           运用jquery.adaptive-backgrounds.js用来实现这个功能,这个插件能提取图片的主色,并把它作为其父元素的背景色。

           另外一种实现方法参考《DedeCMS列表页实现隔行多行随意换色》。

    结合SuperSlide,HTML实例

           对应的JS下载链接://pan.baidu.com/s/1gfzDOiB 密码:yu55

    <!doctype html>
    <html>
    <head>
    <title>自动获取图片主颜色作轮播图背景色(superslide)</title>
    <script type="text/javascript" src='jquery.js'></script>
    <script type="text/javascript" src="jquery.SuperSlide.2.1.1.js"></script>
    <script type="text/javascript" src='jquery.adaptive-backgrounds.js'></script>
    <script type="text/javascript">
     $(document).ready(function(){
      $.adaptiveBackground.run()
     });
    </script>
    <style type="text/css">
     .img-wrap{width:100%;height:400px;text-align:center}
     .img-wrap img{width:500px}
     .slideBox{width:710px;height:230px;overflow:hidden;position:relative;border:1px solid #ddd}
     .slideBox .hd{ height:15px;overflow:hidden;position:absolute;right:5px;bottom:5px;z-index:1}
     .slideBox .hd ul{overflow:hidden;zoom:1;float:left}
     .slideBox .hd ul li{float:left;margin-right:2px;width:15px;height:15px;line-height:14px;text-align:center;background:#fff;cursor:pointer}
     .slideBox .hd ul li.on{background:#f00;color:#fff}
     .slideBox .bd{position:relative;height:100%;z-index:0}
     .slideBox .bd li{zoom:1;vertical-align:middle}
     .slideBox .bd img{width:450px;height:230px;display:block}
    </style>
    </head>
    <body>
     <p id="slideBox" class="slideBox">
     <p class="hd">
      <ul><li>1</li><li>2</li><li>3</li></ul>
     </p>
     <p class="bd"> 
      <ul> 
       <li class='img-wrap'><img id="img" src="images/1.jpg" data-adaptive-background></li>
       <li class='img-wrap'><img id="img" src="images/2.jpg" data-adaptive-background></li>
       <li class='img-wrap'><img id="img" src="images/3.jpg" data-adaptive-background></li>
      </ul>
     </p>
     <script type="text/javascript">jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});</script>
    </body>
    </html>

    本文地址://www.1y2c.com/news/1413.html

      责任编辑:波西亚时光ns

      发表评论

      评论列表(条)

      • 反俄毒招!世界杯遇尴尬:假球票1万余张,涉案金额1亿美金! 2019-06-14
      • 萨拉赫,你再不上 埃及队就要回家啦 2019-06-14
      • 中外学者齐聚拉萨 首届中国西藏拉萨阿里象雄文化国际学术研讨会召开 2019-06-09
      • 一语惊坛(5月22日):精忠报国是每一个热血青年的夙愿! 2019-06-06
      • 世界是动态发展与平衡的,不会静止不变,指导社会的理论也是不断发展完善的,由相对真理向绝对真理发展接近,这话不是我臆造的,来自学的大学课本根据马克思著作编写... 2019-06-06
      • 重庆 民俗文化进校园(我们的节日·端午) 2019-06-04
      • 太阳是宇宙加油站?不明物体多次靠近“加油”,看清后屏住呼吸 2019-06-04
      • 新手如何看彩票走势图 新浪彩票app 快三app 法国蒙彼利埃emba学费 捕鱼方略 广西快乐10分玩法 qq头像第五人格 炸金花电脑版 阿拉斯加垂钓投注 5.1恒大对全北现代 双色球2019087开奖现场 甘肃十一选五前三基本走式 三国杀孙策 湖南彩票一等奖 星尘电子游艺 英雄联盟游戏下载官方下载