香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！
生活随笔
收集整理的這篇文章主要介紹了
香港黄金配角吴孟达去世，80后程序员以轮播图来悼念达叔，达叔一路走好！
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
悼念達叔
達叔和周星馳兩人的無厘頭搞笑喜劇一次次讓我們捧腹大笑，劇中的情節讓我們難以忘懷，每每回憶起來都是伴隨著歡聲笑語！
從《逃學威龍》到《破壞之王》，從《九品芝麻官》到《武狀元蘇乞兒》，從《月光寶盒》到《仙履奇緣》。每一次的出現都讓我們陷入新的狂歡，既有無厘頭的搞笑，也有讓我們潸然淚下的感動，是影視界的盛宴。
尤其是我們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后程序员以轮播图来悼念达叔，达叔一路走好！的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： C++ reflection/反射
- 下一篇： mm_struct