收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 19901|回复: 54

奇淫技巧之图片切割

[复制链接]
发表于 2009-10-11 00:08:25 | 显示全部楼层 |阅读模式
DEMO1(随机出现): http://cnwander.com/demo/puzzle_effect/
机器配置好的可以将图片切得更细一点 (变量xNum,yNum)
DEMO1(规则运动): http://cnwander.com/demo/puzzle_effect/index2.html
测试:IE6、IE7、FF3.014
原文:http://cnwander.com/blog/?p=13

突发奇想的效果,主要突出构思,效果还比较粗糙,好好创意一下,应该可以引申出一些比较有新意的图片切换效果。
没什么特别的东西,至于思路,有兴趣的同学自己看DEMO吧。

效果一(随机出现)

 提示:您可以先修改部分代码再运行



效果二(规则运动):

 提示:您可以先修改部分代码再运行


[[i] 本帖最后由 CNwander 于 2009-10-11 00:51 编辑 ]

评分

参与人数 1威望 +1 收起 理由
cloudgamer + 1 谢谢分享

查看全部评分

发表于 2009-10-11 06:08:28 | 显示全部楼层
哇u!真的帅呆了。
回复 支持 反对

使用道具 举报

发表于 2009-10-11 07:24:42 | 显示全部楼层
不错哦..收藏了..
回复 支持 反对

使用道具 举报

发表于 2009-10-11 10:10:18 | 显示全部楼层
这个效果也可以用 JS 控制 CSS 的 clip 来实现
我记得 jQuery有这些效果!
回复 支持 反对

使用道具 举报

发表于 2009-10-11 11:47:05 | 显示全部楼层
很漂亮!
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-10-11 12:14:43 | 显示全部楼层
原帖由 [i]fonqing 于 2009-10-11 10:10 发表
这个效果也可以用 JS 控制 CSS 的 clip 来实现
我记得 jQuery有这些效果!

嗯,clip也可以,但有太多局限,不如background-position来得灵活。
jquery我用了挺长时间,可以很负责地告诉你没有  不过有animate这样的基础动画函数,来得更方便!

ps: 突然想到可以也设置图片margin的负值来模拟,不像clip必须绝对定位,也会比较方便

[[i] 本帖最后由 CNwander 于 2009-10-11 12:25 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-10-11 15:35:19 | 显示全部楼层
原帖由 [i]CNwander 于 2009-10-11 12:14 发表

嗯,clip也可以,但有太多局限,不如background-position来得灵活。
jquery我用了挺长时间,可以很负责地告诉你没有  不过有animate这样的基础动画函数,来得更方便!

ps: 突然想到可以也设置图片margin的负 ...

严格的说,那效果不是在jQuery里  而是 jQuery UI 里面的!
那个效果叫做 explode 效果
http://jqueryui.com/demos/effect/
select 中选择 Explode 点 run 看看,比单纯的图片要强很多!
  共同研究共同进步!

[[i] 本帖最后由 fonqing 于 2009-10-11 15:40 编辑 ]
回复 支持 反对

使用道具 举报

发表于 2009-10-11 15:54:41 | 显示全部楼层
这个不错啊。。。
回复 支持 反对

使用道具 举报

发表于 2009-10-11 16:02:25 | 显示全部楼层
很强~~收藏了~~
回复 支持 反对

使用道具 举报

发表于 2009-10-12 10:59:30 | 显示全部楼层
好东西 太喜欢了 谢谢
回复 支持 反对

使用道具 举报

发表于 2009-10-23 10:17:52 | 显示全部楼层
嘿嘿。准备用这个效果。。谢谢啦。
回复 支持 反对

使用道具 举报

发表于 2009-10-23 12:00:13 | 显示全部楼层
收藏喽!!
回复 支持 反对

使用道具 举报

发表于 2009-10-23 13:07:12 | 显示全部楼层
很好,收藏了
回复 支持 反对

使用道具 举报

发表于 2009-10-23 14:10:14 | 显示全部楼层
想法很奇特,很不错
回复 支持 反对

使用道具 举报

发表于 2009-11-5 23:24:22 | 显示全部楼层

真的没有想到可以这样的表现

太有学问了,太值得我学习了,呵呵,
回复 支持 反对

使用道具 举报

发表于 2009-11-6 09:08:38 | 显示全部楼层
这效果真是太帅太酷啦。。学习了。
回复 支持 反对

使用道具 举报

发表于 2009-11-6 10:13:44 | 显示全部楼层
jQuery有没有中文手册啊,想研究一下
回复 支持 反对

使用道具 举报

发表于 2009-11-6 10:27:42 | 显示全部楼层
楼主,你真TMD 牛!
回复 支持 反对

使用道具 举报

发表于 2009-11-6 12:21:43 | 显示全部楼层
不错。谢谢。
回复 支持 反对

使用道具 举报

发表于 2009-11-6 16:15:11 | 显示全部楼层
前面效果100分,后面拼接时的效果给60分。
非常炫,但是最后为什么要停顿一下呢?
为什么呢?
回复 支持 反对

使用道具 举报

发表于 2009-11-6 16:38:14 | 显示全部楼层
LS的说到了我觉得最不爽的地方
回复 支持 反对

使用道具 举报

 楼主| 发表于 2009-11-6 17:06:45 | 显示全部楼层
我没有让它停顿,浏览器里最少移动距离是1像素,所以感觉停顿了
回复 支持 反对

使用道具 举报

发表于 2009-11-12 14:33:06 | 显示全部楼层
效果很好,就是js太长了,还的慢慢研究
回复 支持 反对

使用道具 举报

发表于 2009-11-12 15:25:09 | 显示全部楼层
相当不错!
回复 支持 反对

使用道具 举报

发表于 2009-11-16 15:27:47 | 显示全部楼层
厉害了。。。
回复 支持 反对

使用道具 举报

发表于 2009-11-19 09:45:16 | 显示全部楼层
研究ing
回复 支持 反对

使用道具 举报

发表于 2009-11-19 15:07:09 | 显示全部楼层
很不错的效果
回复 支持 反对

使用道具 举报

发表于 2009-11-20 12:34:03 | 显示全部楼层

很漂亮,

非常漂亮,
回复 支持 反对

使用道具 举报

发表于 2009-11-25 15:09:34 | 显示全部楼层
不咋实用~
回复 支持 反对

使用道具 举报

发表于 2009-11-25 15:12:57 | 显示全部楼层
厉害!
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备12001430号 )  

GMT+8, 2020-12-6 09:30 , Processed in 0.109099 second(s), 10 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表