随笔分类 - Javascript
Javascript Technic
摘要：弹出层就是相对文档或窗口定位的一个层，一般用来显示提示信息、广告等内容，还可以配合覆盖层来锁定页面。
在仿Lightbox效果中，已经基本实现了这个效果，这次主要改进了ie6在fixed时的抖动问题。
此外，还增加了一个用来兼容ie6的fixed的方法，覆盖层也重新“包装”，程序也改成组件的结构。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
阅读全文
摘要：一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。
程序就是模拟这样一个三维空间，里面的图片会根据三维坐标显示在这个空间。
很久以前就看过一个3DRoom效果，是用复杂的计算实现的。
在上一篇研究过css3的transform之后，就想到一个更简单的方法来实现。
阅读全文
摘要：以前要实现图片的旋转或翻转，只能用ie的滤镜来实现，虽然canvas也实现，但ie不支持而且不是html标准。
css3出来后，终于可以用标准的transform来实现变换，而canvas也已成为html5标准的一部分。
css3和html5使web变得越来越强大，各种新奇的技术正等待我们发掘。
本程序分别通过滤镜(ie)、ccs3和canvas来实现图片的旋转、缩放和翻转变换效果，可以用作图片查看器。
有如下特色：
1，用滤镜、ccs3和canvas实现相同的变换效果；
2，可任意角度旋转；
3，可任意角度翻转；
4，可扩展滚轮缩放；
5，可扩展拖动旋转。
兼容：ie6/7/8, firefox 3.6.8, opera 10.6, safari 5.0.1, chrome 5.0
阅读全文
摘要：上一篇ImageZoom已经对图片放大效果做了详细的分析，这次在ImageZoom的基础上进行扩展，实现更多的效果。主要扩展了原图和显示框的展示模式，有以下几种模式："follow" 跟随模式：显示框能跟随鼠标移动的效果；"handle" 拖柄模式：原图上有一个拖柄来标记显示范围；"cropper" 切割模式：原图用不透明的来标记显示范围，其他部分用半透明显示；"handle-cropper" 拖...
阅读全文
摘要：这个效果也叫放大镜效果，最早好像在ppg出现的，之后就有了很多仿制品出来了。一般用于放大查看商品图片，在凡客，京东商城，阿里巴巴等都有类似的效果。好处是能在原图附近对图片进行局部放大查看，而且可以通过鼠标控制查看的部位。前一阵子看到sohighthesky的图片放大效果，心血来潮自己也写一个看看。这个程序有以下特点：1，支持使用原图放大或新图片设置大图；2，大图完成载入前使用原图放大代替，减少操作...
阅读全文
摘要：之前在做一个图片浏览效果时，要看后面的小图必须等到前面的加载完，而且大图的位置是在大量的小图后面，导致大图要等到小图都加载完才能显示，为了解决这个问题，就想到了Lazyload效果。现在很多网站都用了类似的效果，如淘宝、Bing等。这个图片延迟加载效果是在Lazyload的基础上扩展的，主要扩展了获取img元素，获取src和图片加载的部分。兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0其中safari和chrome部分功能不支持。效果预览图片延迟加载：共有图片 张，未载入 张 程序说明【获取图片】先定义filt
阅读全文
摘要：Lazyload是通过延迟加载来实现按需加载，达到节省资源，加快浏览速度的目的。网上也有不少类似的效果，这个Lazyload主要特点是：支持使用window（窗口）或元素作为容器对象；对静态（位置大小不变）元素做了大量的优化；支持垂直、水平或同时两个方向的延迟。 由于内容比较多，下一篇再介绍图片延迟加载效果。 兼容：ie6/7/8, firefox 3.5.5, opera 10.10, safa...
阅读全文
摘要：图片上传预览是一种在图片上传之前对图片进行本地预览的技术。使用户选择图片后能立即查看图片，而不需上传服务器，提高用户体验。但随着浏览器安全性的提高，要实现图片上传预览也越来越困难。不过群众的智慧是无限的，网上已经有很多变通或先进的方法来实现。例如ie7/ie8的滤镜预览法，firefox 3的getAsDataURL方法。但在opera、safari和chrome还是没有办法实现本地预览，只能通过...
阅读全文
摘要：之前写过一个仿163网盘无刷新多文件上传系统，已经对无刷新上传文件的原理做了详细的分析。而这次的系统主要是针对单个file控件的，便携版，使用更简单，还有更深入的分析。ps：flash实现的效果是好得多，但这不是我研究的范围，也没什么可比性。兼容：ie6/7/8, firefox 3.5.5, opera 10.01, safari 4.0.3, chrome 3.012月2号是我女朋友的生日，祝...
阅读全文
摘要：研究了一年多的js，也差不多写一个自己的js库了。我写这个不算框架，只是一个小型的js工具库，所以我用的名字是Library。主要集合了我写js时一些常用的方法，并参考了prototype.js，jquery，google，百度，有啊等框架。这个工具库的主要特点是：【跨浏览器】能在以下浏览器使用：IE6，IE7，IE8，Firefox 3.5.3，Chrome 3.0，Safari 4.0.3，Opera 10.10ie系列是必须的，其他能支持最新版本就够了。【使用命名空间】当然不是真正“命名空间”，只是一些全局变量，用途相似而已。有如下命名空间：$$：代表Object，保存对象相关方法，也代
阅读全文
摘要：上一个版本（第一版请看这里）基本实现了多级联动和浮动菜单的功能，但效果不是太好，使用麻烦还有些bug，实用性不高。这次除了修改已发现的问题外，还对程序做了大幅调整和改进，使程序实用性更高，功能更强大。 效果预览菜单使用演示： 位置： 仿京东商城商品分类菜单： 图片动画 图片效果 动画效果系统其他 系统效果 其他效果 图片滑动切换效果图片变换效果(ie only)图片滑动展示效果图片切割效果Twe...
阅读全文
摘要：本来想做一个集合浮动定位和鼠标跟随的tooltips效果，但发现定位和鼠标跟随在一些关键的地方还是不同的，还是分开来吧。 这个效果本身难度不大，主要在程序结构和扩展中下了些功夫，务求用起来更方便，能用在更多的地方。效果预览 水平位置： left clientleft center clientright right 垂直位置： top clienttop center clien...
阅读全文
摘要：近来有客户要求用table显示一大串数据，由于滚动后就看不到表头，很不方便，所以想到这个效果。上次做table排序对table有了一些了解，这次更是深入了解了一番，发现table原来是这么不简单。还不清楚这个效果叫什么，有点像表头固定的效果，就叫行定位吧，本来想把列定位也做出来，但暂时还没这个需求，等以后有时间再弄吧。在淘宝的商品搜索页也看到类似的效果，但淘宝的不是table，而是li，而我这个是...
阅读全文
摘要：序二（09/11/1）近来看了Dean的“Convert any colour value to hex in MSIE”，终于解决了根据关键字获取颜色rgb值的问题。顺便把程序也重新整理一番，并使用了最近整理的工具库。序一（09/03/11）很久没写blog，太忙了。没什么时间写复杂的东西，重新把颜色渐变效果写一遍。关于颜色的效果一般就两个，颜色梯度变化和颜色动态渐变，前...
阅读全文
摘要：Flash做动画时会用到Tween类，利用它可以做很多动画效果，例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法，来做js的Tween算法，并利用它做一些简单的缓动效果。实例效果Tween类型： Linear Quadratic Cubic Quartic Quintic Sinusoidal Exponential Circular Elastic ...
阅读全文
摘要：这个滑动条（拖动条）效果，一开始是参考了BlueDestiny的slider和Apple产品展示的样式，做了程序的原型。在做了拖放效果之后，我想应该可以做一个更好的了，所以重做一遍，完善和扩展了一些功能。碍于时间没有做得很强大，都是一些基本功能，希望各位多提意见！效果预览预览效果1：这个是仿Apple滑动条产品展示效果。除了原来的效果（包括点击缓动滑移、拖动滑移），我还加入了本程序特有的滚轮和键盘...
阅读全文
摘要：拖拉缩放效果，实现通过鼠标拖动来调整层的面积（宽高）大小。例如选框效果。这里的拖拉缩放比一般的选框复杂一点，能设置八个方位（方向）的固定触发点，能设置最小范围，最大范围和比例缩放。跟拖放效果一样，程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多，基本上靠自己摸索，走了不少弯路，现在总算把自己想要的效果做出来了，程序跟上一个版本比较也已经“面目全非”，还是...
阅读全文
摘要：拖放效果，也叫拖拽、拖动，学名Drag-and-drop ，是最常见的js特效之一。如果忽略很多细节，实现起来很简单，但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候做出来的，那时参考了好几个同类的效果，跟muxrwc和BlueDestiny学习了不少东西。虽然每次整理都觉得很好了，不过每隔一段时间又会发现得某个地方可以改善，某个地方有错误，某些需求需要实现，就像自己学习的知识那样。...
阅读全文
摘要：Javascript日期下拉菜单
阅读全文
摘要：这个仿163网盘无刷新多文件上传系统，并没有用使用.net的控件，完全的手工制作。前台基本上是静态的，跟后台没有关系，所以后台用什么语言做都可以（后面有各个版本的实例下载）。本来觉得这个系统会很复杂，但把每个部分都分析清楚后，其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时，却发现要把程序封装不是那么容易，因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分...
阅读全文