欢迎您,零度科技专业海外服务器租用
公司电话: 24小时电话: 

当前位置:首页>网站建设教程>javascript教程>jquery教程

目录导航

jQuery实现网页拼图游戏

美国ST机房 发布于 2013-12-07  
jquery教程
转载:http://blog.csdn.net/ssrc0604hx/article/details/7299673
之前看了一个页面中将图片分割的效果,感觉不错,有些好奇他是怎么实现的。
跟搭档说了一下,大概明白。其实就是利用 overflow=hidden ,margin-left, margin-top 这三个属性的配合,让人感觉图片被一个个格子地分开了。
刚刚写了个 Jquery的小插件,处理了整个的图片分格化,用户只要指定一个图片就可以自动生成格子图片,还自动生成“打乱”,“复原”,行,列等按钮。同时具有提示位置正确的图片数的功能
看效果:
1.生成格子图片成功:
jQuery实现网页拼图游戏-图片1
jQuery实现网页拼图游戏-图片1

2.打乱图片次序

jQuery实现网页拼图游戏-图片2
jQuery实现网页拼图游戏-图片2

3.手动设置行列,这里限定了最大的行列都是 10 ,最小是3,多了会眼花撩乱。

到零度科技查看原文:http://www.ldisp.com/a/jquery/2013/2472.shtml

上一篇:jQuery滚动监听插件Waypoints
下一篇:Highcharts一款纯js写的图表插件,功能异常强大

 
了解零度?

零度科技主营全球服务器租用,如果您有服务器租用需求请联系

海外服务器租用

推荐香港、美国、韩国。提供站群服务器、高防服务器租用

海外特价服务器

关注零度特价服务器频道,了解全球特价服务器。

0

业务咨询

    技术服务

      特价活动
        全站搜索
        热门搜索:
        会员
        0通知
        客服
        0特价
        搜索
        TOP
        香港高防服务器,远程桌面,韩国服务器,nginx,反向代理