- 浏览: 952172 次
- 性别:
- 来自: 北京
文章分类
- 全部博客 (383)
- JSP 自定义标签实现 (1)
- JSP (2)
- javascript (161)
- JAVA (100)
- HTML (26)
- jQuery (11)
- J2EE (1)
- Log4J (1)
- HTML5 (6)
- DB2 (2)
- Spring (14)
- 浏览器兼容 (1)
- JavaMail (1)
- JAVA(转载) (1)
- freemarker (1)
- 项目管理 (1)
- 项目架构学习 (1)
- Oracle (11)
- 开源项目 (2)
- 网络编程 (4)
- C (1)
- C++ (0)
- Xpath (1)
- 待写 (10)
- JXL (1)
- XML (1)
- JNDI (2)
- POI (8)
- Struts2 (3)
- 异常解决方法 (1)
- Sql Server (2)
- windows (2)
- SqlServer (1)
- 前端 (1)
- 正则表达式 (2)
- 浏览器兼容问题 (2)
- 转载 (25)
- css (11)
- svn (5)
- 工程构建 (1)
- 好用的网站 (1)
- sql (3)
- chrome V8 (1)
- javacript 报表 (1)
- FusionCharts (1)
- eclipse (2)
- tomcat (4)
- hibernate (2)
- 硬件 (1)
- 杂烩 (1)
- Linux (1)
- ubuntu (1)
- 设计模式 (2)
- 缓存 (1)
- 数据库 (1)
- JVM (2)
- DOM4j (1)
- 其他 (1)
- JACOB (1)
- extjs (3)
- ligerUi (1)
- 在线HTML编辑器 (1)
- API (1)
- OpenOffice (1)
- webservice (1)
- json (1)
- 百度map (1)
- NodeJs (1)
- greeplum jdbc spring (1)
- easyui (1)
- hightchart (1)
- 游戏 (1)
- HttpClient (1)
- 正则 (1)
- canvas (4)
- HTML5,javascript,canvas (0)
最新评论
-
changelo:
缺少了秦皇岛市
中国省,市,区 json数据 -
yurui829:
解析配置行那等号前后有可能有空格,改为如下比较好:String ...
java 读取.ini配置文件工具类 -
贝塔ZQ:
poi生成excel文档,感觉蛮复杂的,可以试试用pageof ...
POI生成excel带下拉 -
langke93:
我发现greenplum 通过jdbc insert性能很差, ...
jdbc 配置连接greeplum数据,spring配置连接greeplum数据(简单配置学习) -
zhutulang:
哪有收邮件???
Spring 邮件接收发送实例
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; }
发表评论
-
微信2.0分享自定义标题、图片、摘要、链接
2016-01-28 11:00 1129今天做了一个微信自 ... -
js验证正则大全
2015-06-30 13:41 925var regexEnum = { intege:& ... -
javascript判断字符串是否是回文的算法实现
2014-11-24 22:40 3828var str = "reaaer&qu ... -
HTML5学习记录-----canvas学习之动画快照
2014-11-24 21:33 1189canvas动画快照 欢迎大家有好点建议可以提。js高级 ... -
HTML5学习记录-----canvas学习之鼠标选取放大图像
2014-11-23 21:53 1395canvas鼠标选取放大 欢迎大家有好点建议可以提。js ... -
HTML5学习记录-----canvas学习之获取鼠标在canvas上的坐标位置
2014-11-22 20:44 4810canvas坐标 欢迎大家有好点建议可以提。js高级扣扣 ... -
ajax.js
2014-11-20 21:38 1091如果你是 javascript高手,请来这里吧 ... -
html5 规范中新增的api
2014-11-20 21:36 4830如果你是 javascript高手,请来这里吧,扣扣群 1 ... -
被Arguments对象坑了。
2014-11-14 20:47 894当判断一个对象是否是Arguments对象时,我们会这么写 ... -
input onpaste事件
2014-11-12 14:08 10360function afterPaste() { ... -
javascript正则表达式学习——顺序肯定环视,顺序否定环视
2014-11-02 00:43 4666//举例说明。 //经常看到有人为了给数字加千分号(,) ... -
javascript小工具之——cookie操作
2014-11-01 20:28 1237var docCookies = { getItem: ... -
javascript本地缓存之localStorage,sessionStorage等
2014-10-28 11:00 2286如果你是 javascript高手,请来这里吧,扣 ... -
javascript本地缓存之userData(ie专用)
2014-10-27 23:28 911/** *storage 对象 */ functi ... -
javascript 排序,分组小工具 - 支持JSON数组 原生数组(学习,持续更新)
2014-10-24 10:38 6084/** * @author wsf 数据分组,排序js ... -
javascript 计算两日期之间的天数
2014-10-17 10:42 1023var d1 = new Date('2013-01-01' ... -
web版2048小游戏 --- 学习用
2014-09-16 15:18 918web版2048小游戏 --- 学习用 -
javascript 将HTML转为 word,pdf 等(ie)
2014-08-18 12:26 3716/** * @author wsf html转换工具 ... -
javascript实现的各种排序性能比较
2014-08-01 09:33 1145<!DOCTYPE html> <htm ... -
javascript自动补全 支持键盘上下键 可以自定义数据,处理函数
2014-07-25 10:58 1425/** * @author wsf(自动补全动补全 支 ...
相关推荐
在JavaScript的世界里,图片特效是增强网页互动性和用户体验的重要手段。本文将深入探讨标题和描述中提到的十款经典JavaScript图片特效代码,以及它们在实际应用中的价值。 1. **JS特效一**:通常,这样的特效可能...
在给定的文件中,我们看到几个与图片特效相关的文件名,如"超酷超绚精美图片展示效果代码",这暗示了我们将讨论的是利用JavaScript实现的网页图片特效。JavaScript是一种广泛用于网页开发的编程语言,它可以实现用户...
JavaScript特效打包资源主要涵盖了一系列与JavaScript编程相关的动态效果实现,如图片广告轮播、特效展示等。这些特效在网页设计和开发中起着至关重要的作用,可以极大地提升用户体验,增加网站的吸引力。以下是对...
在本主题"JavaScript图片特效源码"中,我们将探讨如何使用JavaScript为网页中的图片添加各种视觉效果,以提升用户体验和网页的吸引力。 一、图片特效的基本原理 图片特效主要通过JavaScript操作DOM(文档对象模型)...
JavaScript图片特效是网页动态设计中的一个重要组成部分,它可以让网页中的图片更具吸引力,提升用户体验。JavaScript是一种广泛用于浏览器端的脚本语言,通过它可以实现各种各样的图片处理和动画效果。在网页开发中...
在JavaScript的世界里,图片展示特效可以为用户带来丰富的交互体验,增强网站的视觉吸引力。本文将深入探讨如何利用JavaScript实现“炫酷展示”的图片特效,包括悬空浮动、点击放大以及根据鼠标移动位置放大局部的...
2. JavaScript特效:JavaScript是网页动态化的关键,它可以监听用户交互、改变DOM(Document Object Model)结构,实现更复杂的效果。例如,下拉菜单、轮播图、计时器、表单验证等常见特效都离不开JavaScript。通过...
本文将深入探讨五款利用JavaScript实现的图片特效,并解析其核心原理,帮助开发者理解和运用。 1. 图片轮播(Image Carousel) 图片轮播是最常见的JavaScript特效之一,它允许用户通过自动或手动方式浏览多张图片。...
在这个“经典的javascript网页特效代码”压缩包中,可能包含了多种JavaScript实现的网页特效代码示例。下面,我们将深入探讨JavaScript在网页特效方面的应用及其相关知识点。 一、DOM操作 JavaScript通过Document ...
在这个"11个震撼的javascript网页效果JavaScript图片特效.zip"压缩包中,包含了一系列利用JavaScript实现的令人惊叹的图片特效,这些都是设计师和开发者们可以参考并应用到自己项目中的宝贵资源。 1. **图片滑动...
JavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rarJavaScript图片特效.rar
javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片 javascript 特效 乱换图片
这本书籍《JavaScript网页特效实例大全》的源码提供了一个丰富的学习资源,帮助开发者深入理解和实践JavaScript的各种特效应用。 首先,我们要了解JavaScript的基础。JavaScript是一种解释型、面向对象的脚本语言,...
在网页设计中,图片特效是提升用户体验的重要手段,本文将深入探讨使用JavaScript实现的四种图片特效:圆角+阴影效果、斜光阴影效果、相框效果以及水倒映效果。 首先,我们来看**圆角+阴影效果**。在CSS3中,我们...
在JavaScript的世界里,图片特效是网页动态效果的重要组成部分,它们能极大地提升用户的浏览体验,让网站或博客更具吸引力。在给定的压缩包文件中,包含了一系列用于实现图片特效的JavaScript代码,共计13个。这些...
1. **图片轮播**:图片轮播是一种常见的JavaScript特效,它允许用户通过自动或手动切换来查看多张图片。这种功能常用于展示产品或服务,使网站内容更加丰富和动态。 2. **下拉菜单**:下拉菜单在网页导航中非常常见...
《JavaScript网页特效范例宝典2》是一本深入探讨JavaScript在网页特效制作中的应用的书籍。这本书的内容丰富,涵盖了各种JavaScript技术在实际网页设计中的应用,旨在帮助读者掌握利用JavaScript实现网页动态效果的...
JavaScript特效代码大全是一份集合了各种JavaScript编程技巧和效果实现的资源库,涵盖了网页动态效果、用户交互、动画以及数据可视化等多个方面。这份大全旨在帮助开发者提升网站的用户体验,通过运用JavaScript的...
JavaScript图片切换特效是一种常见的网页动态效果,用于展示一组图片并以特定的方式进行切换,提高用户体验,增加网站的吸引力。在网页设计中,这种特效通常应用于相册、广告轮播或产品展示等场景。本文将深入探讨...
本文件包含以下特效,做网页时候可以直接使用,也可作为学习js的具体实例,我是在blueidea上面搜集整理的,里面有更多的资源,不想在此下载的朋友,可以直接去网站上面找。 繁简体文字转换工具.htm<br>超级强大的...