`
JavaSam
  • 浏览: 952172 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript 图片特效(酷毙了!)

 
阅读更多

var Library = {};
			Library.ease = function() {
				this.target = 0;
				this.position = 0;
				this.move = function(target, speed) {
					this.position += (target - this.position) * speed;
				}
			}
			var tv = {
				O : [],
				screen : {},
				grid : {
					size : 4,
					borderSize : 6,
					zoomed : 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
				},

				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;
					}
					var ni = 0;
					var n = (tv.grid.size / 2) - .5;
					for (var y = -n; y <= n; y++) {
						for (var x = -n; x <= n; x++) {
							var o = document.createElement('img');
							var i = img[(ni++) % img.length];
							o.className = 'tvout';
							o.src = i.src;
							tv.screen.obj.appendChild(o);
							o.point3D = {
								x : x,
								y : y,
								z : new Library.ease()
							};
							o.point2D = {};
							o.ratioImage = 1;
							tv.O.push(o);
							o.onmouseover = function() {
								if (!tv.grid.zoomed) {
									if (tv.o) {
										tv.o.point3D.z.target = 0;
										tv.o.className = 'tvout';
									}
									this.className = 'tvover';
									this.point3D.z.target = -.5;
									tv.o = this;
								}
							}
							o.onclick = function() {
								if (!tv.grid.zoomed) {
									tv.camera.x.target = this.point3D.x;
									tv.camera.y.target = this.point3D.y;
									tv.camera.zoom.target = tv.screen.w * 1.25;
									tv.grid.zoomed = this;
								} else {
									if (this == tv.grid.zoomed) {
										tv.camera.x.target = 0;
										tv.camera.y.target = 0;
										tv.camera.zoom.target = tv.screen.w / (tv.grid.size + .1);
										tv.grid.zoomed = false;
									}
								}
							}
							o.calc = function() {
								this.point3D.z.move(this.point3D.z.target, .5);
								var x = (this.point3D.x - tv.camera.x.position) * tv.camera.zoom.position;
								var y = (this.point3D.y - tv.camera.y.position) * tv.camera.zoom.position;
								var z = this.point3D.z.position * tv.camera.zoom.position;
								var xy = tv.angle.cx * y - tv.angle.sx * z;
								var xz = tv.angle.sx * y + tv.angle.cx * z;
								var yz = tv.angle.cy * xz - tv.angle.sy * x;
								var yx = tv.angle.sy * xz + tv.angle.cy * x;
								this.point2D.scale = tv.camera.focalLength / (tv.camera.focalLength + yz);
								this.point2D.x = yx * this.point2D.scale;
								this.point2D.y = xy * this.point2D.scale;
								this.point2D.w = Math.round(Math.max(0, this.point2D.scale * tv.camera.zoom.position * .8));
								if (this.ratioImage > 1)
									this.point2D.h = Math.round(this.point2D.w / this.ratioImage);
								else {
									this.point2D.h = this.point2D.w;
									this.point2D.w = Math.round(this.point2D.h * this.ratioImage);
								}
							}
							o.draw = function() {
								if (this.complete) {
									if (!this.loaded) {
										if (!this.img) {
											this.img = new Image();
											this.img.src = this.src;
										}
										if (this.img.complete) {
											this.style.visibility = 'visible';
											this.ratioImage = this.img.width / this.img.height;
											this.loaded = true;
											this.img = false;
										}
									}
									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 + '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);
								}
							}
						}
					}
					tv.resize();
					mouse.y = tv.screen.y + tv.screen.h;
					mouse.x = tv.screen.x + tv.screen.w;
					tv.run();
				},
				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.offsetTop;
					}
				},

				run : function() {
					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, tv.grid.zoomed ? .25 : .025);
					tv.camera.zoom.move(tv.camera.zoom.target, .05);
					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);
					for (var i = 0, o; o = tv.O[i]; i++) {
						o.calc();
						o.draw();
					}
					setTimeout(tv.run, 32);
				}
			}

			var mouse = {
				x : 0,
				y : 0
			}
			document.onmousemove = function(e) {
				if (window.event)
					e = window.event;
				mouse.x = e.clientX;
				mouse.y = e.clientY;
				return false;
			}
 
分享到:
评论

相关推荐

    十款javascript图片特效代码,超经典

    在JavaScript的世界里,图片特效是增强网页互动性和用户体验的重要手段。本文将深入探讨标题和描述中提到的十款经典JavaScript图片特效代码,以及它们在实际应用中的价值。 1. **JS特效一**:通常,这样的特效可能...

    图片特效,very cool!很酷哦!

    在给定的文件中,我们看到几个与图片特效相关的文件名,如"超酷超绚精美图片展示效果代码",这暗示了我们将讨论的是利用JavaScript实现的网页图片特效。JavaScript是一种广泛用于网页开发的编程语言,它可以实现用户...

    javascript 特效打包!

    JavaScript特效打包资源主要涵盖了一系列与JavaScript编程相关的动态效果实现,如图片广告轮播、特效展示等。这些特效在网页设计和开发中起着至关重要的作用,可以极大地提升用户体验,增加网站的吸引力。以下是对...

    javascript图片特效源码

    在本主题"JavaScript图片特效源码"中,我们将探讨如何使用JavaScript为网页中的图片添加各种视觉效果,以提升用户体验和网页的吸引力。 一、图片特效的基本原理 图片特效主要通过JavaScript操作DOM(文档对象模型)...

    JavaScript图片特效类

    JavaScript图片特效是网页动态设计中的一个重要组成部分,它可以让网页中的图片更具吸引力,提升用户体验。JavaScript是一种广泛用于浏览器端的脚本语言,通过它可以实现各种各样的图片处理和动画效果。在网页开发中...

    JavaScript图片炫酷展示特效

    在JavaScript的世界里,图片展示特效可以为用户带来丰富的交互体验,增强网站的视觉吸引力。本文将深入探讨如何利用JavaScript实现“炫酷展示”的图片特效,包括悬空浮动、点击放大以及根据鼠标移动位置放大局部的...

    html特效,超炫酷!!!

    2. JavaScript特效:JavaScript是网页动态化的关键,它可以监听用户交互、改变DOM(Document Object Model)结构,实现更复杂的效果。例如,下拉菜单、轮播图、计时器、表单验证等常见特效都离不开JavaScript。通过...

    5款JavaScript图片特效

    本文将深入探讨五款利用JavaScript实现的图片特效,并解析其核心原理,帮助开发者理解和运用。 1. 图片轮播(Image Carousel) 图片轮播是最常见的JavaScript特效之一,它允许用户通过自动或手动方式浏览多张图片。...

    经典的javascript网页特效代码 javascript特效

    在这个“经典的javascript网页特效代码”压缩包中,可能包含了多种JavaScript实现的网页特效代码示例。下面,我们将深入探讨JavaScript在网页特效方面的应用及其相关知识点。 一、DOM操作 JavaScript通过Document ...

    11个震撼的javascript网页效果JavaScript图片特效.zip

    在这个"11个震撼的javascript网页效果JavaScript图片特效.zip"压缩包中,包含了一系列利用JavaScript实现的令人惊叹的图片特效,这些都是设计师和开发者们可以参考并应用到自己项目中的宝贵资源。 1. **图片滑动...

    JavaScript图片特效.rar

    JavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rar

    轮换图片javascript特效

    javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片

    JavaScript网页特效实例大全 书籍源码

    这本书籍《JavaScript网页特效实例大全》的源码提供了一个丰富的学习资源,帮助开发者深入理解和实践JavaScript的各种特效应用。 首先,我们要了解JavaScript的基础。JavaScript是一种解释型、面向对象的脚本语言,...

    10个JavaScript实现的图片特效

    在网页设计中,图片特效是提升用户体验的重要手段,本文将深入探讨使用JavaScript实现的四种图片特效:圆角+阴影效果、斜光阴影效果、相框效果以及水倒映效果。 首先,我们来看**圆角+阴影效果**。在CSS3中,我们...

    javascript实现对图片的特效

    在JavaScript的世界里,图片特效是网页动态效果的重要组成部分,它们能极大地提升用户的浏览体验,让网站或博客更具吸引力。在给定的压缩包文件中,包含了一系列用于实现图片特效的JavaScript代码,共计13个。这些...

    javascript网页特效实例大全

    1. **图片轮播**:图片轮播是一种常见的JavaScript特效,它允许用户通过自动或手动切换来查看多张图片。这种功能常用于展示产品或服务,使网站内容更加丰富和动态。 2. **下拉菜单**:下拉菜单在网页导航中非常常见...

    JavaScript网页特效范例宝典2

    《JavaScript网页特效范例宝典2》是一本深入探讨JavaScript在网页特效制作中的应用的书籍。这本书的内容丰富,涵盖了各种JavaScript技术在实际网页设计中的应用,旨在帮助读者掌握利用JavaScript实现网页动态效果的...

    javascript特效代码大全

    JavaScript特效代码大全是一份集合了各种JavaScript编程技巧和效果实现的资源库,涵盖了网页动态效果、用户交互、动画以及数据可视化等多个方面。这份大全旨在帮助开发者提升网站的用户体验,通过运用JavaScript的...

    javascript图片切换特效

    JavaScript图片切换特效是一种常见的网页动态效果,用于展示一组图片并以特定的方式进行切换,提高用户体验,增加网站的吸引力。在网页设计中,这种特效通常应用于相册、广告轮播或产品展示等场景。本文将深入探讨...

    javascript 网页特效 多种

    本文件包含以下特效,做网页时候可以直接使用,也可作为学习js的具体实例,我是在blueidea上面搜集整理的,里面有更多的资源,不想在此下载的朋友,可以直接去网站上面找。 繁简体文字转换工具.htm&lt;br&gt;超级强大的...

Global site tag (gtag.js) - Google Analytics