`
cloudgamer
  • 浏览: 61021 次
  • 性别: Icon_minigender_1
  • 来自: 顺德
社区版块
存档分类
最新评论
文章列表
Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动、弹簧等等。我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果。前台效果预览完整实例下载 效果说明首先大家到这里下载flash的as脚本(建议看看这里的demo),1.0和2.0都可以(里面的算法都一样)。例如打开2.0的可以看到几个as文件,每个文件对应一个Tween效果,分别有(参考里面的说明):Linear:无缓动效果;Quadratic:二次方的缓动(t^2);Cubic:三次方的缓动(t^3);Quartic:四次方的缓动(t^4);Quintic:五 ...
这个滑动条(拖动条)效果,一开始是参考了BlueDestiny的slider和Apple产品展示的样式,做了程序的原型。 在做了拖放效果之后,我想应该可以做一个更好的了,所以重做一遍,完善和扩展了一些功能。 碍于时间没有做得很强大, ...
拖拉缩放效果,实现通过鼠标拖动来调整层的面积(宽高)大小。例如选框效果。 这里的拖拉缩放比一般的选框复杂一点,能设置八个方位(方向)的固定触发点,能设置最小范围,最大范围和比例缩放。 跟拖放效果一样,程序的原型也是在做图片切割效果的时候做出来的。但这个效果的参考少的多,基本上靠自己摸索,走了不少弯路,现在总算把自己想要的效果做出来了,程序跟上一个版本比较也已经“面目全非”,还是觉得有很多需要改进的地方,就像永远没有最完美的土耳其地毯。 这里也有一个简化版的SimpleResize,方便学习。 前台效果预览 下载测试代码 ps:实例中包含了拖放效果,不过两个效果是完全独立的,删掉拖放的部分也能正常 ...
拖放效果,也叫拖拽、拖动,学名Drag-and-drop ,是最常见的js特效之一。如果忽略很多细节,实现起来很简单,但往往细节才是难点所在。这个程序的原型是在做图片切割效果的时候做出来的,那时参考了好几个同类的效果,跟muxrwc和BlueDestiny学习了不少东西。虽然每次整理都觉得很好了,不过每隔一段时间又会发现得某个地方可以改善,某个地方有错误,某些需求需要实现,就像自己学习的知识那样。 这里考虑到有的人可能只需要简单的拖放,所以有一个简化版的拖放SimpleDrag,方便学习。 效果预览 ps:在maxthon下如果开启广告过滤的话很可能会被过滤掉(不知有什么方法可以避免)。& ...
一个日期联动选择器,年月日联动显示,准确显示日期(包括闰年日期),可自定义日期范围。 效果预览 完整实例下载 程序说明 【select】 先说清空一个select,最简单的方法是把options的length设为0就可以了: oSelect.options. ...
这个仿163网盘无刷新文件上传系统,并没有用使用.net的控件,完全的手工制作。前台基本上是静态的,跟后台没有关系,所以后台用什么语言做都可以(后面有各个版本的实例下载)。本来觉得这个系统会很复杂,但把每个部分都分析清楚后,其实需要的技术并不高。不过当我把各个功能函数都整理好准备进行封装时,却发现要把程序封装不是那么容易,因为程序跟html的耦合度太高。然后我逐步把程序中操作html相关的部分分离出来,首先把简单的分离,接着是文件列表,然后是file控件,最后是一些提示性程序。经过几次尝试才把整个结构封装好,现在程序结构应该算比较清晰,有什么不明白的地方欢迎留言。 效果预览<style& ...
程序的实现的是在客户端对表格进行排序,有以下特点:1,自定义排序列、排序属性(例如innerHTML)、排序数据类型(包括int、float、date、string)、排序顺序(顺序和倒序);2,自定义排序函数;3,可同时设置多个排序列; ...
上一阵子做过一个图片切割效果,得到很多人关注。其中有很多人向我询问如何做一个真正的图片切割(裁剪),这里需要声明一下: 首先js是不能操作客户端文件的(除非特殊情况),所以图片的切割必须在后台处理,对于客户端的图片可以先上传再切割或者把图片和切割参数一起传递到服务器再处理(上传文件不在本次讨论范围,请自行修改); 还有是通过客户端传递的参数来处理图片,确实能得到展示图或预览图的效果(这是针对有些提出在后台处理的图片得不到预览图的效果来说的),下面会举例说明如何生成展示图那样的图片。 程序说明【客户端部分】 客户端部分详细请参考图片切割效果(建议没有看过的先看那里的例子),这里说说要传递到后台的参 ...
近来要做一个LightBox的效果(也有的叫Windows关机效果),不过不用那么复杂,能显示一个内容框就行了。这个效果很久以前就做过,无非就是一个覆盖全屏的层,加一个内容显示的层。不过showbo教了我position:fixed这个新特性,决定重写一遍。先看效果:<script type="text/javascript"><!-- var isIE = (document.all) ? true : false; var isIE6 = isIE && ([/MSIE (\d)\.0/i.exec(navigator.userAgen ...
程序集合了宽度、高度、透明度、top、left的渐变,可以自定义渐变项目和各个项目的初始值结束值,还能以任意点(定点)为中心渐变。 使用该程序能实现很多常见的动画特效,包括大小变换、位置变换、渐显渐隐等等。   效果:   <script type="text/javascript"> var isIE = (document.all) ? true : false; var $$ = function (id) { return "string" == typeof id ? document.getElementById(id) : ...
近来要做一个记事本系统,想找一个合适的日历控件,但网上的都是那种日历选择控件。于是到qq的记事本系统找了一个,但里面的算法有点落后,所以用了它的样式自己写了个。   前台效果预览   完整实例下载   程序说明   【Date】 这个日历控件运用了很多Date相关操作和方法。 先说说Date对象几个有用的属性:getFullYear:返回年份值getMonth:返回月份值getDate:返回一个月中的日期值getDay:返回一周中的日期值 其中对getDay可能比较陌生,下面列出值对应的星期:值 星期0 星期天1 星期一2 星期二3 星期三4 星期四5 星期五6 星期六 ...
序一(08/07/21) 很久之前就在一个网站的截取相片的功能中看到这个效果,也叫图片裁剪、图片剪切(设置一下也可以做出放大镜等类似的效果)。当时觉得很神奇,碍于水平有限,没做出来。前些日子突然想做一个透镜效果,就突然想到了这个效果,于是找出当年“珍藏”的代码决定一尝所愿。 序二(08/12/06) 自上一个版本的图片切割效果出来后,虽然也经常看到“框架开发这个如何如何容易”之类的评论,但也受到很多人的肯定,小弟在此感谢大家的支持。上一个版本由于是初次接触这类效果,而且是三个大功能一起开发,能力所限,所以仅仅是实现了效果就完成了。后来我知道这个效果叫ImageCropper,找了些这类效果参考, ...
序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。由于有了做图片滑动展示效果的经验,做这个就容易得多了。 序二(09/03/19) 自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。除了改成Tween缓动,也改进了程序算法,不过原理还是一样的。     前台效果预览完整实例下载   程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。 首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会 ...
能够根据自定义的菜单数据和select,自动设置联级的下拉菜单,可定义默认值。 效果:<style type="text/css"> .sel select{ width:100px;} </style> <script type="text/javascript"> var $$ = function (id) { return "string" == typeof id ? document.getElementById(id) : id; }; function addEventHan ...
仿照常见的那个图片变换flash做的效果,纯js。不过滤镜变换只对应ie,ff只能看到一般的切换。这个js做的效果最早在sina看到,这里把这个效果封装好方便使用。   前台效果预览   下载完整程序ps:由于有些绿色版ie6会把滤镜功能去掉,所以用这类ie6会看不到效果的,用正宗版本就可以正常浏览了。程序说明:图片未开始转换时,由于没有图片会显示一个红x,所以隐藏图片: this._img.style.visibility = "hidden"; ps:以前我用this._img.src = "javascript:void(0);";但这个 ...
Global site tag (gtag.js) - Google Analytics