如何写一个通用的JavaScript效果库!(2/2)
发布时间:2024-04-10 11:02:22
标签:如何写一个通用的JavaScript效果库,(2/2)
在上个随笔中贴出了效果库的整体框架,和一个简单的opacity插件. 今天这个随笔主要是扩展其他常用
效果插件,毕竟框架只能是个空壳,内容还是要自己充实。
如果看过了我上篇的实现细节,这里就不多说废话了,来段代码先:
/**//****************************************************/
// 移动, 这里是move to 就是移动到 x,y 当然,大家也可以再扩展一个move by 移动x个象素
Effect.Init.move=function(effect){ //初始化
if (effect.options.x!==undefined || effect.options.y!==undefined){
var pos=Position.cumulativeOffset(effect.element);
effect.setting.left =pos[0];
effect.setting.top =pos[1];
effect.setting.position =effect.element.style.position;
effect.element.style.position ="absolute"
effect.options.x=(effect.options.x===undefined)?effect.setting.left:effect.options.x;
effect.options.y=(effect.options.y===undefined)?effect.setting.top :effect.options.y;
}
}
Effect.Fn.move=function(effect,pos){ //效果
if (effect.options.x===undefined && effect.options.y===undefined) return
effect.element.style.left=effect.setting.left + (effect.options.x-effect.setting.left) * pos +"px";
effect.element.style.top =effect.setting.top + (effect.options.y-effect.setting.top ) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// zoom by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.zoom=function(effect){
effect.setting.zoom =effect.element.style.zoom || 1;
// firefox 不支持 css的 zoom 用 改变 width,height的方式代替
if (effect.options.zoom!==undefined && navigator.userAgent.toLowerCase().indexOf('firefox') != -1){
effect.options.w=effect.element.offsetWidth * effect.options.zoom;
effect.options.h=effect.element.offsetHeight * effect.options.zoom;
}
}
Effect.Fn.zoom=function(effect,pos){
if (effect.options.zoom===undefined) return;
effect.element.style.zoom=effect.setting.zoom+(effect.options.zoom-effect.setting.zoom)*pos
}
/**//****************************************************/
/**//****************************************************/
// size 同上,是 size to, 改变到指定大小 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.size=function(effect){
if (effect.options.w!==undefined || effect.options.h!==undefined){
effect.setting.overflow =effect.element.style.overflow || 'visible';
effect.setting.width =effect.element.offsetWidth;
effect.setting.height =effect.element.offsetHeight;
effect.element.style.overflow ="hidden"
effect.options.w=(effect.options.w===undefined)?effect.setting.width :effect.options.w;
effect.options.h=(effect.options.h===undefined)?effect.setting.height:effect.options.h;
}
}
Effect.Fn.size=function(effect,pos){
if (effect.options.w===undefined && effect.options.h===undefined) return;
effect.element.style.width =effect.setting.width + (effect.options.w-effect.setting.width ) * pos +"px";
effect.element.style.height=effect.setting.height+ (effect.options.h-effect.setting.height) * pos +"px";
}
/**//****************************************************/
/**//****************************************************/
// 背景色 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.bgcolor=function(effect){
if (effect.options.bgcolor!==undefined && /^\#?[a-f0-9]{6}$/i.test(effect.options.bgcolor)){
var color =effect.element.style.backgroundColor || "#ffffff";
//FireFox 下,即使css样式设置背景为 #ffffff格式,但程序取到的是 rgb(255,255,255)格式, 这里把他转化为 #ffffff格式
if (/rgb/i.test(color)){ // "rgb(255, 0, 255)"
//var arr=color.replace(/[rgb\(\s\)]/gi,"").split(",")
var arr=eval(color.replace("rgb","new Array"))
color="#"+Number(arr[0]).toColorPart()+Number(arr[1]).toColorPart()+Number(arr[2]).toColorPart()
}
effect.setting.bgcolor=color
}
}
Effect.Fn.bgcolor=function(effect,pos){
if (effect.options.bgcolor===undefined) return;
var c1=effect.setting.bgcolor,c2=effect.options.bgcolor
var arr1=[parseInt(c1.slice(1,3),16),parseInt(c1.slice(3,5),16),parseInt(c1.slice(5),16)]
var arr2=[parseInt(c2.slice(1,3),16),parseInt(c2.slice(3,5),16),parseInt(c2.slice(5),16)]
var r=Math.round(arr1[0]+(arr2[0]-arr1[0])*pos)
var g=Math.round(arr1[1]+(arr2[1]-arr1[1])*pos)
var b=Math.round(arr1[2]+(arr2[2]-arr1[2])*pos)
effect.element.style.backgroundColor="#"+r.toColorPart()+g.toColorPart()+b.toColorPart()
}
/**//****************************************************/
/**//****************************************************/
// 透明度,这个上个贴过了 by Go_Rush(阿舜) from http://ashun.cnblogs.com/
Effect.Init.opacity=function(effect){
if (effect.options.opacity===undefined) return;
effect.setting.opacity=Opacity(effect.element);
}
Effect.Fn.opacity=function(effect,pos){
if (effect.options.opacity===undefined) return;
Opacity(effect.element,effect.setting.opacity+(effect.options.opacity-effect.setting.opacity)*pos);
}
/**//****************************************************/
这里 effect.setting 是非常有用而且非常重要的冬冬,所有的通过options传进来自定义函数都可以
通过effect.setting来获取element最初的设置。 在很多场合,我们需要在 options 中传一个 onComplete
函数进来, 用来在效果执行完毕后,打扫战场,恢复一些设置。
这些效果是可以重叠的,大家可以看看下面我写的例子。
写了十来个例子,应该很详细了。
完整的,可调试代码和例子如下:
<script language="javascript"> /**//* 这个函数的代码来自 Prototype.js http://prototype.conio.net/ 如果页面引用了prototype.js ,则可以删除下面这个函数, 当然,即使不删除也没关系,因为作了简单的兼容性判断 */ (function(){ if (!("Prototype" in window)){ Prototype={emptyFunction:function(){}}; Class ={ create: function(){return function(){this.initialize.apply(this, arguments)}} }; $ = function(element){ return typeof(element)=="string"?document.getElementById(element):element }; $A= function(arrLike){ for(var i=0,ret=[];i5) return false; new Effect("div1",{x:280,delay:0.5,duration:0.1,onComplete:function(){ new Effect("div1",{x:320,duration:0.1,onComplete:function(){ new Effect("div1",{x:280,duration:0.1,onComplete:function(){ new Effect("div1",{x:320,duration:0.1,onComplete:function(){ new Effect("div1",{x:280,duration:0.1,onComplete:function(){ new Effect("div1",{x:300,duration:0.1,onComplete:function(){ fix6() }}) }}) }}) }}) }}) }}) } </script> <fieldset> <legend>单一效果</legend> <button onclick="javascript:foo1()">颜 色 foo1</button>&nbsp; <button onclick="javascript:foo2()">大 小 foo2</button>&nbsp; <button onclick="javascript:foo3()">位 置 foo3</button>&nbsp; <button onclick="javascript:foo4()">透 明 度 foo4</button>&nbsp; <button onclick="javascript:foo5()">Zoom foo5</button>&nbsp; <button onclick="javascript:foo6()">所有 foo6</button>&nbsp; </fieldset> <fieldset> <legend>复合效果</legend> <button onclick="javascript:fix1()"> 淡出fix1</button>&nbsp; <button onclick="javascript:fix2()"> 折起fix2</button>&nbsp; <button onclick="javascript:fix3()"> 慢慢变小消失 fix3</button>&nbsp; <button onclick="javascript:fix4()"> 慢慢变小消失2 fix4</button>&nbsp; <button onclick="javascript:fix5()"> 变色 fix5</button>&nbsp; <button onclick="javascript:fix6()"> 震动5次 fix6</button>&nbsp; </fieldset> <button onclick="javascript:location.reload()"> 每次效果后按这里恢复</button>&nbsp; 注意 FireFox 不支持 Zoom <div id="div1" style="border:1px solid red;width:300px;height:150px;overflow:hidden;position:absolute;left:300px;top:200px;z-index:2;background-color:#ffffff"> Go_Rush(阿舜) <img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif"> </div>


猜你喜欢
- 如下所示:import numpy as npa = np.array([[1,2,3],[4,5,6],[7,8,9]])b = np.a
- 本文实例讲述了Python爬虫PyQuery库基本用法。分享给大家供大家参考,具体如下:PyQuery库也是一个非常强大又灵活的网页解析库,
- 1、字符串拼接通过+运算符现有字符串码农飞哥好,,要求将字符串码农飞哥牛逼拼接到其后面,生成新的字符串码农飞哥好,码农飞哥牛逼举个例子:st
- 有时候想同时(同级)展示多个视图,而不是嵌套展示,例如创建一个布局,有 sidebar(侧导航) 和 main(主内容) 两个视图,这个时候
- 本文实例讲述了python网络编程之文件下载实现方法。分享给大家供大家参考。具体如下:真是越看越喜欢python啊,想要了解它提供的http
- 列表UL或是OL中都有一个预设标记,这个标记可能是实点圆点,也可能是数字。在实际的应用中,我们需要去掉这个预设标记,但我们不清楚这个预设标记
- 看起来现在经常用到这样的效果来提高用户体验,所以就没事写了一个输入框提示列表的效果使用宽屏的朋友麻烦帮忙测试下,列表的位置有没有错位。代码可
- 1 环境准备192.168.1.34 服务器A(主机)192.168.1.35 服务器B(从机)2 安装mysqlMySQL版本:这里采用S
- 一、http请求的顺序处理方式在高并发场景下,为了降低系统压力,都会使用一种让请求排队处理的机制。本文就介绍在Go中是如何实现的。首先,我们
- 在python中,提到如何计算多维数组和矩阵,那一定会想到numpy。numpy定义了矩阵和数组,为它们提供了相关的运算。size中文解释为
- 本文实例讲述了Python实现获取汉字偏旁部首的方法。分享给大家供大家参考,具体如下:功能介绍传入一个汉字,返回其偏旁部首字典分为本地字典与
- 在做语义分割项目时,标注的图片不合标准,而且类型是RGBA型,且是A的部分表示的类别,因此需要将该图片转化为RGB图片# -*- codin
- 目录文件读写读文件写文件StringIO和BytesIOStringIOBytesIO操作文件和目录环境变量操作文件和目录文件读写读文件tr
- 录入身份证信息是一件繁琐的工作,如果可以自动识别并且录入系统,那可真是太好了。今天我们就来学习一下,如何自动识别身份证信息并且录入系统~识别
- 最近使用Python调用百度的REST API实现语音识别,但是百度要求音频文件的压缩方式只能是pcm(不压缩)、wav、opus、spee
- Microsoft SQL Server 2005 Mobile Edition 3.0 (SQL Server Mobile) 支持两种与
- 在开发C/S结构的大型数据库应用软件时,一般情况下,软件开发人员和数据库设计人员并不是同一个人,这就需要协商好一些即可由程序设
- 在任何一个数据库中,查询优化都是不可避免的一个话题。对于数据库工程师来说,优化工作是最有挑战性的工作。MySQL开源数据库也不例外本站收录这
- 1:安装redigogo get github.com/garyburd/redigo/redis2:引用redigoimport ( &n
- 简单说明:思路:从数据岛menuXML中读取数据,从树的根节点开始分析树,利用 hasChildNodes() [方法:是否含有子节点 ]