直接先看效果吧:
解释都写在代码里了,如果需要原文件,可以私聊我随时在(原文件也有jquery无缝轮播兼容手机浏览器和微信浏览器哦)。
样式代码:
*{margin: 0px;padding:0px;}
body{
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
margin-top: 300px;
margin-left: 300px;
}
#box{width: 525px;height: 300px;background-color: #00B834;position: relative;overflow: hidden;}
#canvas{position: absolute;top: 300px;left: 300px;}
#banner{list-style: none;width: 500%;height: 100%;position: absolute;top: 0px;left: 0px;}
#banner li{float: left;width: 20%;height: 100%;}
.tran{transition: all 0.5s;}
#box .mark{position: absolute;width: 100%;height: 20px;bottom: 20px;text-align: center;}
.mark span{display: inline-block;width: 25px;height: 5px;background-color: #a5a2af;border-radius: 3px;margin-left: 15px;}
.mark span:nth-of-type(1){background-color:#b3856af7 ;}
.canvasAnimation{animation: canvas 0.5s forwards;}
@keyframes canvas{
from{opacity: 1;}
to{opacity: 0;}
}
结构代码:
<div id="box">
<ul id="banner">
<li><img src="img/121519-1563768919b946.jpg" width="100%"height="100%" draggable="false"></li>
<li><img src="img/104217-156298573792c2.jpg" width="100%"height="100%" draggable="false"></li>
<li><img src="img/221508-15605217086e6f.jpg" width="100%"height="100%" draggable="false"></li>
<li><img src="img/230941-15711521814e0c.jpg" width="100%"height="100%" draggable="false"></li>
</ul>
<p class="mark">
</p>
</div>
<canvas id="canvas" width="525" height="300"></canvas>
配置参数:
/* 配置参数 staart */
let canvasimg="img/204822-156742850260f4.jpg";//涂抹前景图
let smearProportion=40;//设置涂抹比例,大于清除canvas画布
/* 配置参数 end */
上第一部分的canvas涂抹代码:
/*涂抹显示操作 */
let dom=document.getElementById("canvas");
let hb=dom.getContext("2d");
let img=new Image();//创建图片对象
img.src=canvasimg;
img.onload=function(){//图片加载完成后把图片放入画布
hb.drawImage(img,0,0,525,300);
}
let badge=false;//开关按钮
function pressDowm(){//鼠标按下打开开关
badge=true;
};
function pictureProportion() {//计算比例
let pixels = hb.getImageData(0, 0, 525, 300);//获取getImageData,该对象保存了图片每个像素的数据
let pdata = pixels.data;//像素数据
let len = pdata.length;//像素数据长度
let total = len / 4;//这里求有多少个像素,一个像素由rgba组成所以每4个数等于++一个像素
let count = 0;//记录有多少像素透明
for (let i = 0; i < len; i += 4) {
if (parseInt(pdata[i+3]) === 0) {//上面的+4是因为4个数=1个像素,+3就等于取一个像素中a的值,[r,g,b,a]
count++;//一个像素变为透明就记录
}
}
return Math.round((count / total) * 100);//有多少像素透明/总共多少像素再*100,就是百分比,需要加上%号哦。
}
function judgmentRation(num) {//判断比例
num = num || 0;
if (num > smearProportion) {//比例大于就删除canvas节点
dom.classList.add("canvasAnimation");
setTimeout(function(){dom.remove();dom.classList.remove("canvasAnimation");},500);
}
};
function mousemove(e){
e.preventDefault();
if(badge){//判断开关是否开启
hb.globalCompositeOperation = 'destination-out';//这是必须加的,在原图像中显示目标图像
hb.beginPath();//新建路径
hb.arc(e.offsetX,e.offsetY,10,0,Math.PI*2);//画圆
hb.fill();//填充
judgmentRation(pictureProportion());
}
};
function release(){//鼠标松开或者移除关闭开关
badge=false;
}
dom.addEventListener("mousedown",pressDowm);
dom.addEventListener("mousemove",mousemove);
dom.addEventListener("mouseup",release);
dom.addEventListener("mouseout",release);
第二部分无缝轮播:
/* banner图添加操作 */
let ul=document.getElementById("banner");
let box=document.getElementById("box");
let li=ul.querySelectorAll("li");
let mark=document.getElementsByClassName("mark")[0];
for (let i=0;i<li.length;i++) {//添加标识
let span=document.createElement("span");
mark.appendChild(span);
}
let copy=li[0].cloneNode(true);
ul.appendChild(copy);//添加所复制的节点
let moveX=0;//记录按下时的x坐标
let left=0;//记录翻的页数
function bannerDown(e){
moveX=e.offsetX;
}
function bannerUp(e){
for(let i=0;i<mark.querySelectorAll("span").length;i++){
mark.querySelectorAll("span")[i].style.backgroundColor="#a5a2af";
}
if((moveX-e.offsetX)>0){
left--;
if(left==-5){
ul.classList.remove("tran");
ul.style.left="0px";
left=-1;
}
setTimeout(function() {//这一步不是多此一举,我一开始也很纳闷怎么没有按照上下执行顺序执行代码,jquery是不需要的,js我只能用一个计时器来强制上下文顺序
ul.classList.add("tran");
ul.style.left=left+"00%";
}, 10);
}else{
left++;
if(left==1){
ul.classList.remove("tran");
ul.style.left="-400%";
left=-3;
}
setTimeout(function() {
ul.classList.add("tran");
ul.style.left=left+"00%";
}, 10);
}
let bz=Math.abs(left);
if(bz==4){
bz=0;
}
mark.querySelectorAll("span")[bz].style.backgroundColor="#b3856af7";
}
box.addEventListener('mousedown',bannerDown);
box.addEventListener('mouseup',bannerUp);