悼念达叔
达叔和周星驰两人的无厘头搞笑喜剧一次次让我们捧腹大笑，剧中的情节让我们难以忘怀，每每回忆起来都是伴随着欢声笑语！
从《逃学威龙》到《破坏之王》，从《九品芝麻官》到《武状元苏乞儿》，从《月光宝盒》到《仙履奇缘》。每一次的出现都让我们陷入新的狂欢，既有无厘头的搞笑，也有让我们潸然泪下的感动，是影视界的盛宴。
尤其是我们80后的这代人，从小都是看着达叔和周星驰的电影长大的。
达叔走了，我们的感怀更深，在这个飞速发展的社会里，我们又失去了生命中很重要的一部分，是属于我们年代的欢乐！
仅以一个轮播来表达对达叔的悼念！
实现思路
首先有个div 里面包含一个canvas和两个图片，canvas是用来轮播的，两个图片分别是向左、向右图标
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
#box{
width:640px;
height:360px;
position:absolute;
margin:0 auto;
left:0;
top:50px;
right:0;
bottom:0;
border-radius:10px;
}
#left{
position:absolute;
top:45%;
left:10px;
cursor:pointer;
}
#left:hover{
-webkit-box-shadow: #ccc 10px 10px 10px;
-moz-box-shadow: #ccc 10px 10px 10px;
box-shadow: #ccc 10px 10px 10px;
}
#right{
position:absolute;
top:45%;
right:10px;
cursor:pointer;
}
#right:hover{
-webkit-box-shadow: #ccc 10px 10px 10px;
-moz-box-shadow: #ccc 10px 10px 10px;
box-shadow: #ccc 10px 10px 10px;
}
</style>
</head>
<body>
<div id='box'>
<img src='images/left.png' id='left'>
<img src='images/right.png' id='right'>
</div>
<script type="text/javascript" src=./slideShow.js></script>
<script type="text/javascript">
var box = document.getElementById('box');
var left = document.getElementById('left');
var right = document.getElementById('right');
slide.init(box,left,right);
</script>
</body>
</html>
var slide= new SlideShow();
//初始化
SlideShow.prototype.init=function(el,left,right){
if(!el) return ;
this.el=el;
var canvas = document.createElement('canvas');//创建画布
canvas.style.cssText="border:1px solid grey;border-radius:10px;";//设置样式
var W = canvas.width = 640; //设置宽度
var H = canvas.height = 360;//设置高度
el.appendChild(canvas);//添加到指定的dom对象中
}效果
图片构造函数
//图片对象ImageDraw构造函数
function ImageDraw(o,obj){
this.id='',
this.image=0,//图片对象（必填）
this.sx=0,//图片切片开始x位置（显示整个图片的时候不需要填）
this.sy=0,//图片切片开始y位置（显示整个图片的时候不需要填）
this.sWidth=0, //图片切片开始宽度（显示整个图片的时候不需要填）
this.sHeight=0,//图片切片开始高度（显示整个图片的时候不需要填）
this.dx=0, //图片目标x位置（必填）
this.dy=0, //图片目标y位置（必填）
this.dWidth=0,//图片目标显示宽度（宽度不缩放时不必填）
this.dHeight=0//图片目标高度高度（高度不缩放时不必填）
this.init(o,obj);
}
ImageDraw.prototype.init=function(o,obj){
this.lol=obj;
for(var key in o){
this[key]=o[key];
}
return this;
}
ImageDraw.prototype.render=function(context){
draw(context,this);
function draw(context,obj) {
var ctx=context;
ctx.save();
if(!obj.image || getType(obj.dx)=='undefined' || getType(obj.dy)=='undefined'){
throw new Error("绘制图片缺失参数");
return;
}
ctx.translate(obj.dx,obj.dy);
if(!getType(obj.sx)=='undefined' && getType(obj.sy)=='undefined' && obj.sWidth && obj.sHeight && obj.dWidth && obj.dHeight){
//裁剪图片，显示时候有缩放
ctx.drawImage(obj.image, obj.sx, obj.sy, obj.sWidth, obj.sHeight, 0, 0, obj.dWidth, obj.dHeight);
}else if(obj.dWidth && obj.dHeight){
ctx.drawImage(obj.image, 0, 0, obj.dWidth, obj.dHeight);//原始图片，显示时候有缩放
}else{
ctx.drawImage(obj.image,0, 0);//原始图片，显示时候无缩放
}
ctx.restore();
}
}图片路径
//组装图片路径
SlideShow.prototype.loadUrl=function(){
for(var i=1;i<=this.count;i++){
this.urlObj[i]="images/"+i+".jpeg";
}
}装载图片
//加载图片
SlideShow.prototype.loadImg=function(fn){
var that=this;
var keys = Object.keys(this.urlObj);
var url,key;
var n=0;
for(var i=0;i<keys.length;i++)
{
key=keys[i];
url = this.urlObj[keys[i]];
var img=new Image();
img.src=url;
(function(k,obj){
obj.onload=function(){
that.imgObj[k]=obj;
n++;
if(n===keys.length){
fn();
}
}
})(key,img)
}
}组装图片对象
//组装图片对象信息
SlideShow.prototype.drawImg=function(){
var that=this;
var ctx=this.ctx;
var imgObj = this.imgObj;
var keys = Object.keys(imgObj);
var x=y=0;
var img ,image;
keys.forEach(function(key){
image=imgObj[key];
switch (key){//这可以不用switch,这样写是为了预留其他图片的时候做其他判断用的
default :
img = new ImageDraw({image:image, dx:x, dy:y ,dWidth:this.w,dHeight:this.h},that);
break;
}
that.imageArr.push(img);
})
this.renderArr[0]=undefined;//先第一个位置占用，用来放图片
this.tranImg();//切换图片
} //切换图片
SlideShow.prototype.tranImg=function(){
this.renderArr[0]=this.imageArr[this.imageIndex];//根据imageIndex来切换
}调用render绘制图片
//渲染图形
SlideShow.prototype.render=function(){
var context=this.ctx;
this.clearCanvas();
_.each(this.renderArr,function(item){
item && item.render(context);
});
}效果
加入指示点
小圆的构造函数
//构造函数
function Ball(o){
this.x=0,//圆心X坐标
this.y=0,//圆心Y坐标
this.r=0,//半径
this.startAngle=0,//开始角度
this.endAngle=0,//结束角度
this.anticlockwise=false;//顺时针，逆时针方向指定
this.stroke=false;//是否描边
this.fill=false;//是否填充
this.scaleX=1;//缩放X比例
this.scaleY=1;//缩放Y比例
this.id=0;//设置一个id
this.init(o);
}
//初始化
Ball.prototype.init=function(o){
for(var key in o){
this[key]=o[key];
}
}
//是否在当前图形内
Ball.prototype.isPoint=function(offset){
var offsetX =offset.x ,
offsetY =offset.y ;
//用勾股定理计算鼠标与圆心的距离
var rDis = Math.sqrt((offsetX-this.x)**2+(offsetY-this.y)**2);
if(rDis<=this.r){
return true;
}
return false;
}
//绘制
Ball.prototype.render=function(context){
var ctx=context;
ctx.save();
ctx.beginPath();
ctx.translate(this.x,this.y);
ctx.scale(this.scaleX,this.scaleY);//设定缩放
ctx.arc(0,0,this.r,this.startAngle,this.endAngle);//画圆
if(this.lineWidth){//线宽
ctx.lineWidth=this.lineWidth;
}
if(this.fill){//是否填充
this.fillStyle?(ctx.fillStyle=this.fillStyle):null;
ctx.fill();
}
if(this.stroke){//是否描边
this.strokeStyle?(ctx.strokeStyle=this.strokeStyle):null;
ctx.stroke();
}
ctx.restore();
return this;
}根据图片数量来创建指示点个数
//创建指示点
SlideShow.prototype.createPoints=function(){
var x=0,y=0;
var p,color='grey';
for(var i=0;i<this.count;i++){
p = new Ball({
x:i*20+this.w/2-this.count/2*18,
y:this.h-20,
r:5,
startAngle:0,
endAngle:2*Math.PI,
fill:true,
fillStyle:color,
id:i
})
this.renderArr.push(p);
this.pointArr.push(p);
}
}效果如下：
增加定时任务，图片2秒自动翻一次
//设置定时任务
SlideShow.prototype.interval=function(){
if(this.timmer) return ;
this.timmer=setInterval(this.slide.bind(this),2000)
}
//自动向右切换图片
SlideShow.prototype.slide=function(){
//更好图片下标
this.imageIndex++;
this.imageIndex=this.imageIndex%this.count;
this.tranImg();
this.animate();
}
//执行动画
SlideShow.prototype.animate=function(){
this.clearCanvas();
this.render();
}给指示点增加点击切换事件
//鼠标点击事件（针对点击指示点切换图片）
SlideShow.prototype.mouseClick=function(e){
console.log('mouseClick')
var offset = _.getOffset(e);//获取鼠标位置
var points =this.pointArr;
for(var i=0;i<points.length;i++){
if(points[i].isPoint(offset)){//返回true，表示有指示点被点击了
this.imageIndex=points[i].id;//根据id设置图片下标
this.tranImg();//图片切换
this.animate();
break;
}
}
}给向左向右图片增加点击事件
//左移动点击事件
SlideShow.prototype.leftClick=function(){
console.log('leftClick')
//更好图片下标
this.imageIndex--;
if(this.imageIndex<0){
this.imageIndex=this.count-1
}
this.tranImg();
this.animate();
}
//右移动点击事件
SlideShow.prototype.rightClick=function(){
console.log('rightClick')
//更好图片下标
this.imageIndex++;
this.imageIndex=this.imageIndex%this.count;
this.tranImg();
this.animate();
}画布、向左、向右图片分别增加鼠标移入、移出事件，当鼠标移入的时候定时任务停止，当鼠标移出的时候定时任务重新开启
//鼠标移入事件
SlideShow.prototype.mouseOver=function(){
console.log('mouseOver');
this.left.style.display='block';
this.right.style.display='block';
clearInterval(this.timmer);
this.timmer=null;
}
//鼠标移出事件
SlideShow.prototype.mouseOut=function(){
console.log('mouseOut');
this.left.style.display='none';
this.right.style.display='none';
this.interval();
}
//给canvas画布添加点击、鼠标移入、移出事件
canvas.addEventListener('click',this.mouseClick.bind(this));
canvas.addEventListener('mouseover',this.mouseOver.bind(this));
canvas.addEventListener('mouseout',this.mouseOut.bind(this));
//给左移添加点击、鼠标移入、移出事件
left.addEventListener('click',this.leftClick.bind(this));
left.addEventListener('mouseover',this.mouseOver.bind(this));
left.addEventListener('mouseout',this.mouseOut.bind(this));
//给右移添加点击、鼠标移入、移出事件
right.addEventListener('click',this.rightClick.bind(this));
right.addEventListener('mouseover',this.mouseOver.bind(this));
right.addEventListener('mouseout',this.mouseOut.bind(this));到这里基本就完成了，谢谢！
代码下载，无需积分
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
