双向箭头轮播图html,根据 轮播图背景色 自动填充剩余背景色的 走马灯
起因
今天产品经理过来说,需要在首页加上一个类似一个天猫的轮播图。
天猫的轮播图是 图片定宽定高, 当不同分辨率屏幕时候 会根据图片的背景色填充容器左右空隙。 比如
1800px屏:
3000px屏:
第一反应:不管是js还是css 都没有办法获取图片色值的, 那必须服务端给我了。要么 后台cms在上次图片的时候,指定好背景色, 要么服务端调用图片api获取背景色然后给我。
天猫应该是这么做的。
AutoImg
纯前端的话, 有么有办法获取色值呢? 突然想到,之前做WebGL贴纹理的时候, 在片元着色器里是可以获取到图片每一个像素点的色值的。 用WebGL肯定是太大了, canvas可以吗? 查询了一下是可以的,有方法的getImageData。 那么至少说明了纯前端的做饭是可行的。 我们先实现一个组件AutoImg,AutoImg中的img 定高定宽, 容器的背景色用img的背景色填充。
export default class AutoImg extends Component{
static propTypes = {
height: PropTypes.number.isRequired,
width: PropTypes.number.isRequired,
source: PropTypes.number.isRequired,
}
componentDidMount() {
this.setImg(this.props.source)
}
componentWillReceiveProps(nextProps) {
if (nextProps.source !== this.props.source) {
this.setImg(nextProps.source)
}
}
setImg(source) {
const { width, height } = this.props
const ima = new Image()
ima.src = source
ima.crossOrigin = '' // 处理跨域图片
ima.onload = () => {
const ctx = this.canva.getContext('2d')
ctx.drawImage(ima, 0, 0, width, height)
const [r, g, b, a] = ctx.getImageData(0,0,1,1).data; // 获取背景色
this.inner.style.background = `rgba(${r}, ${g}, ${b}, ${a})`
}
}
render() {
const { width, height } = this.props
return (
style={{
display: 'block',
margin: '0 auto'
}}
width={`${width}px`}
height={`${height}px`}
ref={canva => this.canva = canva}
>
)
}
}
复制代码
这里 考虑到getImageData 参数是整形, 所有要求width, height必须是number类型,1000代表1000px
github
npm:
npm install rc-autoimg --save
轮播
轮播我们就不造轮子了,直接使用nuka-carousel。
import Carousel from 'nuka-carousel'
default class Banner extends Component{
render() {
const bannerImgList = [
'https://img.alicdn.com/tps/i4/TB1yqAhcpmWBuNjSspdSuvugXXa.jpg',
'https://img.alicdn.com/tps/i4/TB1XVCsaTdYBeNkSmLySutfnVXa.jpg',
'https://img.alicdn.com/simba/img/TB1ror0cf5TBuNjSspcSuvnGFXa.jpg',
'https://img.alicdn.com/tfs/TB1ed2lggmTBuNjy1XbXXaMrVXa-1130-500.jpg_q100.jpg_.webp',
]
return (
autoplay={true}
>
{
bannerImgList.map(source => (
width={1200}
height={340}
source={source}
/>
))
}
)
}
}复制代码
2500px 效果:
结语
兼容性 > IE9
或许你也有这种轮播需求,如果没有希望提取颜色的地方,可以启发到你。
双向箭头轮播图html,根据 轮播图背景色 自动填充剩余背景色的 走马灯相关推荐
- 轮播图 (无缝轮播图)
1.无缝轮播核心: 在最后多加一张第一张图, 当达到最后一张t1的时候 一瞬间将ul拉回到0的位置 结构: <div class="wrap"><ul>&l ...
- 滑动轮播_这样运营轮播图可以增加订单
我们都说脸面代表个人名片,那么在小程序中,轮播图就是店铺的脸面,当我们打开网站.APP.小程序等应用的首页,首先映入眼帘的就是轮播图.那么作为店铺脸面的轮播图有什么作用呢?本周我们一起来看看. 轮播图 ...
- axure轮播图怎么设置循环轮播_Axure教程:轮播图制作步骤详解
不管是在PC端还是移动端,轮播图是常见的设计元素.下面详细讲解轮播图的制作步骤. 作为Axure初学者,把最近学到的记录下来,和大家一起学习. 如何实现轮播图: 循环展示轮播图片: 将圆点与轮播图一一 ...
- 关于element-ui中轮播图手动切换轮播图片
文章目录 前言 一.关于element-ui中轮播图手动切换轮播图片 二.解决方案 1.查看element-ui中Carousel 走马灯组件的方法 2.解决方法 结尾 前言 在开发过程中发现项目中轮 ...
- c语言实现图片轮播,纯css实现轮播图
轮播图的实现原理其实是比较简单的 举个例子 main的宽度是100px div-main的宽度是500px 我们用js控制div-main往左或往右移动,这样就实现了轮播,简单把 好了,先介绍个 cs ...
- php写后台轮播图,后台管理系统--轮播图管理
摘要:<?php /** * Created by PhpStorm. * User: Administrator * Date: 2019/5/27 * Time: 23:41 */names ...
- 修改elementUI轮播图鼠标划入轮播暂停的原生效果
修改elementUI轮播图鼠标划入轮播暂停的原生效果_Boriska1996的博客-CSDN博客_iview carousel 暂停
- Ant Design Vue多张图为一组轮播展示
目的 实现多张图为一组轮播展示效果 H5代码块 <div class="rightDisplay"><a-carousel arrows autoplay> ...
- Android轮播换背景,Android 轮播图的实现方法总结
SliderLayout LoopViewPage BGABanner 自定义view实现轮播 仿魅族的banner轮播图 1. SliderLayout 预览效果如下 687474703a2f2f7 ...
最新文章
- 笔记-信息化与系统集成技术-物联网
- python 单元测试_Python 单元测试(unittest)
- http://blog.sina.com.cn/s/blog_5bd6b4510101585x.html
- leetcode 220. Contains Duplicate III | 220. 存在重复元素 III (Treeset解法+分桶解法)
- 深度学习(四十)——深度强化学习(3)Deep Q-learning Network(2), DQN进化史
- 使用RequestHandlerRetryAdvice重试Web服务操作
- LeetCode 2099. 找到和最大的长度为 K 的子序列
- oracle11g设置开机自启动,oracle11g在linux系统下开机自启动设置
- Junit下获取src/test/resource路径
- Three.js Scene Graph
- android 全局对话框6,[Android][Framework]从全局AlertDialog聊聊WindowManager
- java 环境配置(详细教程)
- 邮件签名html qq,腾讯企业邮箱发件人名称与个性签名的设置方法
- 汽车VIN码超详细解析规则
- 互联网网站采集工具大比拼和选择指南
- 关注这场直播,了解能源行业双碳目标实现路径
- Aladdin推出软件智能卡和一次性密码认证解决方案
- 美化你的Typora
- 国四网络工程笔记(究极错题)
- JINI学习笔记2-HelloWorld
热门文章
- Termux安装最强中间人工具Bettercap
- 【record】2、使用非官方遥控器适配prometheus的驱动修改
- 【Effection C++】读书笔记 条款01~条款04
- cad转kml代码 lisp_CAD图形文件与KML格式精准转换方法
- 批量图片水印工具 TSR WatermarkImage附注册码与中文补丁
- 基于树莓派车牌识别门禁系统
- 强盗团伙(啊哈-并查集[模板])
- 【博学谷学习记录】超强总结,用心分享|【探花交友】MongoDB
- java-php-python-农村留守儿童帮扶系统计算机毕业设计
- 记录----如何将FLV格式文件快速转换为mp4文件