//function sogouWater(){ var WAVE_RESOLUTION = 1, WIDTH_IMG = 400, HEIGHT_IMG = 150, SIZE=WIDTH_IMG*HEIGHT_IMG, FORE_WIDTH = 191, FORE_HEIGHT = 149, FSIZE = FORE_WIDTH*FORE_HEIGHT, TOTAL_IMAGES = 11, LOGO_LEFT = 60; function waterModel(){ var width = WIDTH_IMG/WAVE_RESOLUTION, height = HEIGHT_IMG/WAVE_RESOLUTION, size = width*height, buffer0 = [], buffer1 = [], i, j, tmp, animating = false; for (i = 0; i < size; i++){ buffer0.push(0); buffer1.push(0); } this.nextStep = function(){ if (!animating){ return null; } for(i=width+1;i 0.03 || buffer1[i] < -0.03)){ animating = true; } } } tmp = buffer0; buffer0 = buffer1; buffer1 = tmp; return buffer0; } this.touch = function(x, y, z){ if(x < 2 || x > width-2 || y < 1 || y > height-2) return; animating = true; var i = x+y*width; buffer0[i] += z; buffer0[i-1] -= z; } return this; } function autoTouch(){ if(drawCount % 7 == 1){ var x = Math.round(Math.random()*400), y = Math.round(Math.random()*150); wm.touch(x,y,100); } } function drawFrame(){ if(enAutoTouch){ autoTouch(); drawCount++; } if (texture){ if (alpha > 0){ texture = getTexture(curImage, nextImage, alpha); alpha -= 20; } else{ if (curImage != nextImage){ if(curImage == 0){ fadeIn(); pb('pv', 'sharetag'); } if(nextImage == 0){ fadeOut(); } alpha = 0; curImage = nextImage; texture = getTexture(curImage); mouseDown = 0; movedTime = 0; } } var bf = wm.nextStep(), dimage = dctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG), data = dimage.data, reflect_i, i, refraction, xPix, yPix; if (bf != null){ for(i=0; i < SIZE; i++){ strength = bf[i]; refraction = Math.round(bf[i]*100); xPix = (i%WIDTH_IMG) + refraction; yPix = parseInt(i/WIDTH_IMG) + refraction; if(xPix < 0) xPix = 0; if(yPix < 0) yPix = 0; if(xPix > WIDTH_IMG-1) xPix = WIDTH_IMG-1; if(yPix > HEIGHT_IMG-1) yPix = HEIGHT_IMG-1; reflect_i = ((yPix * WIDTH_IMG) + xPix); strength *= 0.1; strength += 1.0; data[i*4] = texture.data[reflect_i*4]; data[i*4+1] = texture.data[reflect_i*4+1]; data[i*4+2] = texture.data[reflect_i*4+2] data[i*4+3] = texture.data[reflect_i*4+3]; } dctx.putImageData(dimage, 0,0); } else{ dctx.putImageData(texture, 0,0); enAutoTouch = true; } } setTimeout(drawFrame, 50); } function makeForeGroundAlpha(data, imgid, imgid2, alpha){ fctx.clearRect(0, 0, FORE_WIDTH, FORE_HEIGHT); fctx.drawImage(foreground, (imgid%2)*FORE_WIDTH , parseInt(imgid/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, 0, 0, FORE_WIDTH, FORE_HEIGHT); fctx2.clearRect(0, 0, FORE_WIDTH, FORE_HEIGHT); fctx2.drawImage(foreground, (imgid2%2)*FORE_WIDTH , parseInt(imgid2/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, 0, 0, FORE_WIDTH, FORE_HEIGHT); var fdata = fctx.getImageData(0, 0, FORE_WIDTH, FORE_HEIGHT), fdata2 = fctx2.getImageData(0, 0, FORE_WIDTH, FORE_HEIGHT), i, j, idx; for (i = 0; i < FSIZE; i++){ idx = parseInt(i/FORE_WIDTH)*WIDTH_IMG+i%FORE_WIDTH+LOGO_LEFT; if (fdata.data[i*4] > 0 && fdata2.data[i*4] > 0){ fdata.data[i*4] = parseInt((fdata2.data[i*4]*(255-alpha)+fdata.data[i*4]*alpha)/255); fdata.data[i*4+1] = parseInt((fdata2.data[i*4+1]*(255-alpha)+fdata.data[i*4+1]*alpha)/255); fdata.data[i*4+2] = parseInt((fdata2.data[i*4+2]*(255-alpha)+fdata.data[i*4+2]*alpha)/255); } else if (fdata.data[i*4] > 0){ fdata.data[i*4] = parseInt((data[idx*4]*(255-alpha)+fdata.data[i*4]*alpha)/255); fdata.data[i*4+1] = parseInt((data[idx*4+1]*(255-alpha)+fdata.data[i*4+1]*alpha)/255); fdata.data[i*4+2] = parseInt((data[idx*4+2]*(255-alpha)+fdata.data[i*4+2]*alpha)/255); } else if (fdata2.data[i*4] > 0){ fdata.data[i*4] = parseInt((data[idx*4]*(alpha)+fdata2.data[i*4]*(255-alpha))/255); fdata.data[i*4+1] = parseInt((data[idx*4+1]*(alpha)+fdata2.data[i*4+1]*(255-alpha))/255); fdata.data[i*4+2] = parseInt((data[idx*4+2]*(alpha)+fdata2.data[i*4+2]*(255-alpha))/255); } else{ fdata.data[i*4] = data[idx*4]; fdata.data[i*4+1] = data[idx*4+1]; fdata.data[i*4+2] = data[idx*4+2]; } fdata.data[i*4+3] = 255; } ctx.putImageData(fdata, LOGO_LEFT,0); } function getTexture(imgid, nimgid, alpha) { ctx.clearRect(0, 0, WIDTH_IMG, HEIGHT_IMG); ctx.drawImage(background, 0 ,0, WIDTH_IMG, HEIGHT_IMG); if (alpha && nimgid >= 0){ makeForeGroundAlpha(ctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG).data, imgid, nimgid, alpha) } else{ ctx.drawImage(foreground, (imgid%2)*FORE_WIDTH , parseInt(imgid/2)*FORE_HEIGHT, FORE_WIDTH, FORE_HEIGHT, LOGO_LEFT, 0, FORE_WIDTH, FORE_HEIGHT); } return ctx.getImageData(0, 0, WIDTH_IMG, HEIGHT_IMG); } function changeTexture(tt){ if (curImage != nextImage){ return; } if(tt==1){ pb('pv', 'clickpic'); } if(tt==2){ pb('pv','slidepic'); } var i; if (imageshowed == TOTAL_IMAGES){ imageshowed = 0; imageGroup = []; for (i = 0; i < TOTAL_IMAGES; i++){ imageGroup.push(0); } nextImage = 0; } else{ if (imageshowed < 4){ i = parseInt(Math.random()*4); while (imageGroup[i]){ i = (i+1)%4; } } else{ i = parseInt(Math.random()*(TOTAL_IMAGES-4))+4; while (imageGroup[i]){ i = (i+1)%(TOTAL_IMAGES-4)+4; } } imageGroup[i] = 1; nextImage = i+1; imageshowed++; } if (curImage != nextImage){ // console.log([tt, curImage, nextImage, imageshowed, // -999].concat(imageGroup)); alpha = 255; } } function imageLoaded(){ loaded++; if (loaded < 2){ return; } texture = getTexture(0); var timer, timer1; dcanvas.addEventListener("mousedown", function(e){ enAutoTouch = false; mouseDown++; clearTimeout(timer1); if (mouseDown > 1){ changeTexture(1); } else{ timer1 = setTimeout(changeTexture(1), 1500); } var x = (e.clientX - logo.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft; var y = (e.clientY - logo.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop; wm.touch(x, y, 100); }, false); dcanvas.addEventListener("mousemove", function(e){ enAutoTouch = false; clearTimeout(timer); timer = setTimeout(function(){ movedTime = 0; }, 500); if (movedTime){ if ((new Date().getTime()) - movedTime > 1000){ changeTexture(2); } } else{ movedTime = new Date().getTime(); } var x = (e.clientX - logo.offsetLeft) + document.body.scrollLeft + document.documentElement.scrollLeft; var y = (e.clientY - logo.offsetTop) + document.body.scrollTop + document.documentElement.scrollTop; wm.touch(x, y, 100); }, false); dcanvas.addEventListener("mouseover", function(e){ if(mouseoverCount == 0){ pb('pv', 'water'); mouseoverCount++; } }); dcanvas.addEventListener("mouseout", function(e){ if(mouseoverCount > 0){ pb('pv', 'water'); } }); } function setOpacity(ev, v){ ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100; } function fadeIn(speed, opacity){ var elem = document.getElementById('sogou_share'); speed = speed || 20; opacity = opacity || 100; elem.style.display = 'block'; setOpacity(elem, 0); var val = 0; (function(){ setOpacity(elem, val); val += 5; if (val <= opacity) { setTimeout(arguments.callee, speed) } })(); } function fadeOut(speed, opacity){ var elem = document.getElementById('sogou_share'); speed = speed || 20; opacity = opacity || 0; var val = 100; (function(){ setOpacity(elem, val); val -= 5; if (val >= opacity) { setTimeout(arguments.callee, speed); }else if (val < 0) { elem.style.display = 'none'; } })(); } var $ = function(ele){ return document.getElementById(ele); } var bind =function(elem, evt, func){ if (elem){ return elem.addEventListener?elem.addEventListener(evt,func,false):elem.attachEvent("on"+evt,func); } } $('sogou_share_sina').onclick = shareresult; $('sogou_share_qq').onclick = shareresult; $('sogou_share_sohu').onclick = shareresult; var contentAll = ['','我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“广寒宫”,关于月宫传说都是真的吗?… @搜狗搜索,来测测你在中秋节的内心想法吧: ', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“灯笼”,我是个怀旧的人… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“一只玉兔”,看来我是个充满幻想的人… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,“家书一封”,杜甫曾说“露从今夜白,月是故乡明”,我真的想家了… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“莲蓉蛋黄月饼”,请吃货们慢慢转发吧… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“菊花”,啊!… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“大闸蟹”,请顶级吃货们默默转发吧… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“情侣合影”,亲爱的,中秋快乐… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“李白”,囧… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“吴刚”,囧… @搜狗搜索,来测测你在中秋节的内心想法吧:', '我在搜狗搜索首页玩#镜花水月#,拨动水面,月亮倒影变成了“嫦娥”,囧… @搜狗搜索,来测测你在中秋节的内心想法吧:']; var imageAll = ['','yuegong', 'gongdeng', 'yutu', 'mail', 'yuebing', 'juhua', 'xie', 'zhaopian', 'libai', 'wugang', 'change']; var imagelink1 = "http://help.sogou.com/logo/midfall/images/", imagelink2 = ".jpg", url = 'http://www.sogou.com/'; // var fixText1 = "我在搜狗搜索首页玩#镜花水月#,月亮的倒影因我干扰而发生变化,变成了", fixText2 = " // @搜狗搜索。来测测你在中秋节的内心想法吧。"; function shareresult(){ if(this.parentNode.filters){ if(this.parentNode.filters.alpha.opacity!= 100){ return; } } else if(this.parentNode.style.opacity != 1){ return; } var tname = this.id; var content = contentAll[curImage]; var imagelink = [imagelink1, imageAll[curImage], imagelink2].join(''); if(tname.indexOf('sina')>0){pb("cl", "share_sina");twshare('http://service.weibo.com/share/share.php?url=',url,content,imagelink,615,505);return false;} if(tname.indexOf('qq')>0){pb("cl", "share_qq");twshare('http://v.t.qq.com/share/share.php?url=',url,content.replace('@搜狗搜索', '@sogouweb'),imagelink,615,505);return false;} if(tname.indexOf('sohu')>0){pb("cl", "share_sohu"); (function(s,d,e,r,l,p,t,z,c){ var f='http://t.sohu.com/third/post.jsp?',u=z||"",p=['&url=',e(u),'&title=',e(t||d.title),'&content=',c||'gb2312','&pic=',e(p||'')].join(''); function a(){ if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=660,height=470,left=',(s.width-660)/2,',top=',(s.height-470)/2].join('')))u.href=[f,p].join('');}; if(/Firefox/.test(navigator.userAgent))setTimeout(a,0); else a(); })(screen,document,encodeURIComponent,'','',imagelink,content.replace(/\[.*?\]/g,""),url,'utf-8'); return false; } } function twshare(surl, url, title, img, w, h){ var _t = encodeURIComponent(title); var _url = encodeURIComponent(url); var _pic = encodeURIComponent(img); var _u = surl+_url+'&pic='+_pic+'&title='+_t; window.open( _u,'', 'width='+w+', height='+h+', top=0, left=0, toolbar=no, menubar=no, scrollbars=no, location=yes, resizable=no, status=no' ); } function pb(type, act, param){ try{ var imgurl = ["http://pb.sogou.com/"+type+".gif?uigs_productid=webapp&type=moon&uigs_t="]; imgurl.push((new Date()).getTime()); if(type == 'pv'){ imgurl.push('&act=',act); }else{ imgurl.push('&uigs_cl=', act); } imgurl.push("&uniqueid=", uniqueid); if(act != 'water'){ imgurl.push('&pictype=', curImage); } if (param) { for (var i in param) { imgurl.push("&", i, "=", param[i]); } } (new Image()).src = imgurl.join(""); }catch(e){ } } var drawCount = 0, enAutoTouch = true, mouseoverCount = 0; var canvas = document.createElement('canvas'), fcanvas = document.createElement('canvas'), fcanvas2 = document.createElement('canvas'), dcanvas = document.createElement('canvas'), ctx = canvas.getContext('2d'), fctx = fcanvas.getContext('2d'), fctx2 = fcanvas2.getContext('2d'), dctx = dcanvas.getContext('2d'), background = document.createElement('img'), foreground = document.createElement('img'), loaded = 0, texture=null, wm = new waterModel(), mouseDown = 0, logo = document.getElementById("logo"), imageshowed = 0, curImage = 0, nextImage = 0, imageGroup = [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], movedTime = 0, alpha = 0; logo.appendChild(dcanvas); canvas.setAttribute('width', WIDTH_IMG); canvas.setAttribute('height', HEIGHT_IMG); fcanvas.setAttribute('width', FORE_WIDTH); fcanvas.setAttribute('height', FORE_HEIGHT); fcanvas2.setAttribute('width', FORE_WIDTH); fcanvas2.setAttribute('height', FORE_HEIGHT); dcanvas.setAttribute('width', WIDTH_IMG); dcanvas.setAttribute('height', HEIGHT_IMG); background.onload = imageLoaded; foreground.onload = imageLoaded; background.src = "/logo/midfall/images/sogoulogo.jpg"; foreground.src = "/logo/midfall/images/icon.png"; drawFrame(); // } // sogouWater();