悼念达叔

达叔和周星驰两人的无厘头搞笑喜剧一次次让我们捧腹大笑，剧中的情节让我们难以忘怀，每每回忆起来都是伴随着欢声笑语！

从《逃学威龙》到《破坏之王》，从《九品芝麻官》到《武状元苏乞儿》，从《月光宝盒》到《仙履奇缘》。每一次的出现都让我们陷入新的狂欢，既有无厘头的搞笑，也有让我们潸然泪下的感动，是影视界的盛宴。

尤其是我们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;//设置一个idthis.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));

到这里基本就完成了，谢谢！

代码下载，无需积分

最后让我来说一句：达叔再见、一路走好！

香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！相关推荐

[转]leo谈“80后”程序员为什么找不到工作？(1)
(应it168约稿写了关于"80后"程序员求职难的文章,我将分三次放在博客上,之后会引用网上的部分批评文章.) 80后的定义应该是:22至27岁之间.受过高等教育.刚刚毕业走向社会 ...
80后程序员必须知道的编程语言和它们的创造者
标题怎么想都没办法写段一点,于是还是这么长吧.程序员的世界里,软件开发领域里有许许多多编程语言.在这里,不断有新的编程语言在诞生,如 Scala.Go.Closure 等,也不断有老的编程语言慢 ...
今天两位80后程序员身价超千亿一大波快手员工财富自由
刚刚,快手敲响了港交所上市锣声. 投资界获悉,2月5日,快手成功在香港交易所挂牌上市,中国短视频第一股诞生.此次IPO,快手发行价为115港元,开盘暴涨193%至338港元,市值冲破1.3万亿港元. ...
leo再谈 80后程序员为什么找不到工作
分享一下我老师大神的人工智能教程!零基础,通俗易懂!http://blog.csdn.net/jiangjunshow 也欢迎大家转载本篇文章.分享知识,造福人民,实现我们中华民族伟大复兴! 版权声明 ...
80后程序员降薪6K，预感中年危机来袭，准备跳槽却碰壁
一提及程序员,很多人想到的都是"工资高""技术好"诸如此类的,可见程序员是个非常赚钱的职业,所以每年都会有很多毕业生来选择这个行业. 但是社会是公平的,不要只看 ...
80后程序员童年回忆之：恐龙快打无限子弹 2014-7-9最新版本下载
80后程序员童年回忆之:恐龙快打无限子弹 2014-7-9最新版本下载 NO 8 恐龙快打在后来发行的恐龙快打无限子弹加强篇中,每个玩家都有子炸弹雨了,这对于经常以小编为代表的手无寸铁之类玩家来说是 ...
90后程序员：我面试了一些80后程序员，有些人的技术深度都不够
点击上面↑「爱开发」关注我们每晚10点,分享软件开发资源.社交电商资源文|洪生鹏 80后随着时间的流逝渐渐淡出了人们的视线,人们更热衷谈论90后,有人说90后是跨掉的一代,对于新一代,似乎都有人来 ...
90后码农：我面试了很多80后程序员，他们大多技术深度都不够！
不论是在我国还是世界范围内,软件产业都是近几十年才出现的产业,搞编程的工作,目前还可以说成是科技工作者吧,目前互联网行业内的程序员想必主要是80后与90后了,当然一些70后朋友也是有的,不过还在主要参 ...
微信小程序swiper图片尺寸_微信小程序之swiper轮播图中的图片自适应高度的方法...
小程序中的轮播图很简单,官方都有例子的,但是唯一的缺陷就是swiper是固定死的150px高度,这样如果传入的图片大于这个高度就会被隐藏.辣么,怎样让图片自适应不同分辨率捏. 我的思路是:获取屏幕宽度 ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...

香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！