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

56顶
2踩

Web前端

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

2009-09-25 12:28 by 副主编 zly06 评论(39) 有27244人浏览
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 条 请登录后发表评论
39 楼 liangcmwn 2010-01-20 11:10
酷是很酷拉，不过用的时候发现时不断的向服务器请求这个图片来的。这样没问题么。
38 楼 kittyhello 2009-12-03 17:21
群之初 打打字 聊聊天 若为技术故 两者皆可抛 ssh,s2sh 93763261
37 楼 kittyhello 2009-12-03 17:20
群之初 打打字 聊聊天 若为技术故 两者皆可抛 93763261
36 楼 wowtianwen 2009-10-16 10:59
源文件那个网页打不开啊，，，，
35 楼 freedomstyle 2009-10-16 10:39
是的，我也发现了，非常的消耗CPU资源。不过的确效果很炫……
34 楼 abs1285 2009-10-16 09:50
这无法 查看源代码
请发给我 abs1285@126.com
33 楼 loocao 2009-10-16 08:59
榆钱儿 写道
炫是很炫，但我的cpu占用从2%飙升到52%不敢用在开发中啊~

你那CPU也太差劲了吧...
我这最高才到8%
32 楼 skyworld2288 2009-10-16 08:40
一个字，"帅"，学习！
31 楼 xjlong 2009-10-16 08:31
30 楼 cpf1121 2009-10-05 00:36
    
29 楼 榆钱儿 2009-09-27 17:12
炫是很炫，但我的cpu占用从2%飙升到52%不敢用在开发中啊~
28 楼 java_mike 2009-09-27 16:22
  超酷的效果。  佩服中。。。
27 楼 kiven 2009-09-27 13:11
创造力真的很高。佩服
26 楼 seawolfxp 2009-09-27 12:26
看一下cpu的使用率，还是很耗资源的。
25 楼 failure5152 2009-09-27 11:18
太强了， 
24 楼 cjx186 2009-09-27 11:13
太强悍了！人真他妈聪明啊。
23 楼 pipilu 2009-09-27 09:49
额滴天神，这才叫真正的炫！
22 楼 xiaoxie2007 2009-09-27 09:33
嗯，挺酷的！
提个新的想法：能不能在图片加载完成之后，当鼠标点击图片上任意一点时，以该点为中心向周边做水波浪扩散，则到图片边缘并进行返回，且波浪的强度逐渐变弱，最终消失
21 楼 witcheryne 2009-09-27 09:01
太酷了！！！！！ 
20 楼 timshaw9791 2009-09-27 08:25
“对旧的ActionScript 1.0的图片效果进行了改良”。。。。。人家现在都快4.0了

发表评论

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

相关推荐

  • 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