《dreamweaver图片展示特效代码.doc》由会员分享,可在线阅读,更多相关《dreamweaver图片展示特效代码.doc(8页珍藏版)》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、6html overflow: hidden;body position: absolute;margin: 0px;padding: 0px;background: #111;width: 100%;height: 100%;#screen position: absolute;left: 10%;top: 10%;width: 80%;height: 80%;background: #000;#screen img position: absolute;cursor: pointer;visibility: hidden;width: 0px;height: 0px;#screen .tv
2、over border: solid #876;opacity: 1;filter: alpha(opacity=100);#screen .tvout border: solid #fff;opacity: 0.7;#bankImages display: none;var Library = ;Library.ease = function () this.target = 0;this.position = 0;this.move = function (target, speed)this.position += (target - this.position) * speed;var
3、 tv = /* = variables = */O : ,screen : ,grid : size : 4, / 4x4 gridborderSize : 6, / borders sizezoomed : false,angle : x : new Library.ease(),y : new Library.ease(),camera : x : new Library.ease(),y : new Library.ease(),zoom : new Library.ease(),focalLength : 750 / camera Focal Length,/* = init scr
4、ipt = */init : function ()this.screen.obj = document.getElementById(screen);var img = document.getElementById(bankImages).getElementsByTagName(img);this.screen.obj.onselectstart = function () return false; this.screen.obj.ondrag = function () return false; /* = create images grid = */var ni = 0;var
5、n = (tv.grid.size / 2) - .5;for (var y = -n; y = n; y+)for (var x = -n; x 1)this.point2D.h = Math.round(this.point2D.w / this.ratioImage);elsethis.point2D.h = this.point2D.w;this.point2D.w = Math.round(this.point2D.h * this.ratioImage);/* = rendering = */o.draw = function ()if (plete)/* = paranoid i
6、mage load = */if (!this.loaded)if (!this.img)/* = create internal image = */this.img = new Image();this.img.src = this.src;if (plete)/* = get width / height ratio = */this.style.visibility = visible;this.ratioImage = this.img.width / this.img.height;this.loaded = true;this.img = false;/* = HTML rend
7、ering = */this.style.left = Math.round( this.point2D.x * this.point2D.scale + tv.screen.w - this.point2D.w * .5 ) + px;this.style.top = Math.round( this.point2D.y * this.point2D.scale + tv.screen.h - this.point2D.h * .5 ) + px;this.style.width = this.point2D.w + px;this.style.height = this.point2D.h
8、 + px;this.style.borderWidth = Math.round( Math.max( this.point2D.w, this.point2D.h ) * tv.grid.borderSize * .01 ) + px;this.style.zIndex = Math.floor(this.point2D.scale * 100);/* = start script = */tv.resize();mouse.y = tv.screen.y + tv.screen.h;mouse.x = tv.screen.x + tv.screen.w;tv.run();,/* = re
9、size window = */resize : function ()var o = tv.screen.obj;tv.screen.w = o.offsetWidth / 2;tv.screen.h = o.offsetHeight / 2;tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);for (tv.screen.x = 0, tv.screen.y = 0; o != null; o = o.offsetParent)tv.screen.x += o.offsetLeft;tv.screen.y += o.offse
10、tTop;,/* = main loop = */run : function ()/* = motion ease = */tv.angle.x.move(-(mouse.y - tv.screen.h - tv.screen.y) * .0025, .1);tv.angle.y.move( (mouse.x - tv.screen.w - tv.screen.x) * .0025, .1);tv.camera.x.move(tv.camera.x.target, tv.grid.zoomed ? .25 : .025);tv.camera.y.move(tv.camera.y.target
11、, tv.grid.zoomed ? .25 : .025);tv.camera.zoom.move(tv.camera.zoom.target, .05);/* = angles sin and cos = */tv.angle.cx = Math.cos(tv.angle.x.position);tv.angle.sx = Math.sin(tv.angle.x.position);tv.angle.cy = Math.cos(tv.angle.y.position);tv.angle.sy = Math.sin(tv.angle.y.position);/* = loop through
12、 all images = */for (var i = 0, o; o = tv.Oi; i+)o.calc();o.draw();/* = loop = */setTimeout(tv.run, 32);/* = global mouse position = */var mouse = x : 0,y : 0document.onmousemove = function(e)if (window.event) e = window.event;mouse.x = e.clientX;mouse.y = e.clientY;return false;红色区域插入图片保存的路径/* = start script = */onresize = tv.resize;tv.init();效果图