资讯频道 → Web前端
阅读更多

56顶
2踩

Web前端

原创新闻 超酷的JavaScript 图像液态效果

2009-09-25 12:28 by 副主编 zly06 评论(39) 有27245人浏览
JavaScript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Andrea Giammarchi 对旧的ActionScript 1.0的图片效果进行了改良，使其更轻量，1.2Kb，更便携，跨浏览器，zero libraries 依赖，100%纯JavaScript，不使用canvas。

 
这个原理很简单：使用一个div的图像作为背景，然后朝着相反的方向伸展，也许还要对一些像素进行调整，以便找到扩张背景的最后一部分与移动的图片之间的匹配点。

用法更简单：配置对象使用一个Liquid函数

var fx = Liquid({

// image src, every supported format
src:"myimage.png",

// element to use as Liquid container
target: document.getElementById("fx")
// or $("#fx")[0] for some guy,

// optional direction, left by default
// accepted: left, right, bottom, top
direction: "left",

// optional scale factor, 2000% by default
// it is how much the image should be stretched
scale: 2000,

// optional speed, 1 to whatever, by default 10
speed: 10,

// optional callback, will be executed at the end
callback:function(){alert("it's Liquid!")},

// optional onload to perform some operation
// after the image has been loaded
onload:function(){/*FX not started yet*/},

// optional reverse property
// performed only over a precedent liquid FX
reverse:true
});


// fx variable will have two methods
// fx.pause()
// to stop the animation

// fx.play()
// to re-enable it after a pause

// these two effects are available only
// during animation time, removed
// before optional callback call


查看源代码：http://www.devpro.it/code/200.html

有两个相当酷的演示：
Demo1-Firefox Logo 
Demo2 -VAIO Logo 

  • 大小: 18.4 KB
来自: ajaxian
56
顶
2
踩
评论 共 39 条 请登录后发表评论
19 楼 lordhong 2009-09-27 05:34
cool
18 楼 java程序员 2009-09-27 00:40
不得了~\(≧▽≦)/~啦啦啦
17 楼 damoqiongqiu 2009-09-26 18:58
强悍！  
16 楼 hudong0178 2009-09-26 17:52
学习了。。太牛了。
15 楼 tata 2009-09-26 12:32
真正地震精了……
14 楼 一路同行 2009-09-26 09:42
支持，太强悍了
13 楼 lucky16 2009-09-26 09:05
就是啊，真的很酷！！
呵呵，学习 了
12 楼 naily 2009-09-26 09:03
哇，天哪，太帅了
11 楼 tkl211 2009-09-26 08:29
帅。。 真漂亮。。
10 楼 achun 2009-09-26 08:04
竟然可以这样，精彩
9 楼 bookong 2009-09-26 02:00
cool！
8 楼 containsoft 2009-09-26 01:57
真牛波。
7 楼 famingyuan 2009-09-25 23:13
6 楼 xinnn 2009-09-25 20:03
很牛，我要学习
5 楼 Army 2009-09-25 17:09
太牛x了！
4 楼 xiaocheng882000 2009-09-25 16:28
真的真的太酷啦
3 楼 qlhl2000 2009-09-25 16:12
太牛了，是太空人？
2 楼 kunee 2009-09-25 14:51
不是一般的酷啊，像动画了
1 楼 netfork 2009-09-25 12:41
    

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • el-select的表单验证问题

    先说需求把，做一个下拉框要求必填，问题是当触发了表单校验之后发现之后,再选择下拉选项的表单校验的提示信息文字并不能清除。 思路就是把这个表单绑定的值设置成计算属性，在watch里面监听这个属性，当里面有值的...

  • 关于element表单验证问题

    关于element中模态框里面的表单的验证问题 和iview的form的表单验证类似 element中表单验证的步骤： 第一步：给 el-form设置属性 rules :rules 第二步：同时给需要验证的每个 el-form-item设置属性 prop 指向对应...

  • cascader表单验证问题

    element UI cascader 表单验证 失败 cascader选中后，验证仍然失败 直接贴代码 <el-cascader ref=“dangZB” @focus=“fo” :options=“this.$store.state.data” :props=“cascaderProps” clearable @change=...

  • iView中DatePicker的表单验证问题

    的验证方式： <DatePicker v-model="form.chooseDate" placeholder="选择日期" type="datetime" format="yyyy-MM-dd"/> chooseDate: [{required: true,...

  • element ui 自定义验证不进入validate表单验证问题

    错误代码： var notZero = (rule, value, callback) => { if (!value) { return callback(new Error('值必须是大于0')); } }; ...这段代码中只有但value为假时候才执行，当为真的时候没有返回对于的执行函数...

  • 解决el-form打开弹框时就进行表单验证问题

    解决el-form打开弹框时就进行表单验证问题

  • Element Plus 的from表单验证问题--点击取消按钮取消表单验证的blur验证

    对表单中的字段进行验证 <el-dialog :model-value="isShow" top="40px" title="表单" style="margin: 0 auto" @close="isShow= false" > <div style="width: 100%; margin-left: 5%"> <el-...

  • 关于 elementUI 表单中使用级联选择器时遇到的表单验证问题

    （对该表单项进行重置，将其值重置为初始值并移除校验结果 ）之后，级联选择器无法触发表单验证 解决方法 使用 validator自定义校验规则 html部分 <el-form-item label="地区" prop="area"> <!-- :props=...

  • element-ui的表单验证问题

    项目中添加表单验证时，突然遇到了一种情况，prop的值也加上了，也在form表单里面，验证规则也写过了，但是无法验证。测试后发现，需要验证的input框要v-model一个值，而且要是form对象里的值。

  • vue+elementUI分步表单验证问题

    有这样一个表单,内容有十几项,放在一页不太好看,所以用步骤条分开,但是在表单验证的时候出了问题.问题如下:  第一步,填写表单,点击下一步,没有问题,来到了第二步,结果如下  结果表单验证结果直接出来了.这里的...

  • 解决Antd自定义表单验证问题

    项目中的表单需要多图片上传，这个使用Upload组件就OK了，但是表单验证就出现问题了： 1、首先，上传图片项是必须项，不能无图片提交； 2、已上传的图片可以删除； 3、后端要求提交的图片为md5格式，通过上传...

  • vue3+ts+elementPlus：表单回显数据，无法清空问题，清空表单验证问题

    vue3+ts+elementPlus：表单回显数据，无法清空问题，清空表单验证问题

  • vant表单checkbox验证问题

    项目中使用了vant的表单，提交时有非空验证。单选、输入框都验证成功了，唯独复选框验证失败，选择选项之后还是显示未选择。官网和搜索引擎都找了下并没有找到答案。 因为之前布局问题使用了<van-row>和<...

  • laravel-admin form表单验证问题 rules多条件组合验证

    实现目标：在创建代理商商品数据时，需要同时验证【代理商id】和【商品id】是否同时存在数据表中，如果存在则返回数据已存在，如果不存在则创建成功；编辑商品时一样验证，但是要排除自身这条数据。 未添加验证的...

  • iview中关于多级数据表单验证问题

    iview中关于多级数据表单验证问题表单验证prop设置功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居...

  • vue循环一个form中多个输入框的表单验证问题

    然后发现表单验证搞不定，查了许多资料之后解决了问题，顺便把一个form里多个input框的问题都解决了，这里记录一下。 <template> <div class="hello"> <el-row> <el-form :model="ruleForm...

  • 解决Element-UI清空表单及验证不生效的问题

    在使用Element-UI重置表单的方式时，一定要记住，表单中的prop属性不要漏掉。在查看方法使用时，并未提到prop这个属性，但继续往下阅读文档，就会发现，这个属性是必须的。注意prop属性值需要与model中的值一致。在...

  • iview表单验证问题 Select验证必填失败,以及表单对象嵌套数组验证方法

    iview的 Select下拉框的时候,数据验证必填,明明选择了数据,却一直提示验证不能通过 1, 问题显示如下图 html代码 <Form ref="FormData" :model="FormData" :rules="ruleValidate" :label-width="100"> <...

  • uniapp uView 1.X版本 form表单验证select下拉框触发不了表单验证的问题

    今天又遇到一个小问题，就是uview的form组件表单验证无法正确判断select下拉框的值 照道理来说，应该是没问题的，问题出现在status的值是number类型，而rules的type默认验证string类型，所以一直判断验证...

  • vue 表单验证常见问题

    表单验证可以采用两种方式： 一、整个表单定义一个验证规则： 例如：标注为加粗的必须设置 <Form ref="formUser" :model="formUser" :rules="ruleValidate" :label-width="96"> <FormItem label="真实...

Global site tag (gtag.js) - Google Analytics