请选择 进入手机版 | 继续访问电脑版

原生js实现美女拼图,把美女老婆抱回家,被窝暖起来,5个美女够不够!

[复制链接]
冰宇 发表于 2020-12-31 18:59:27 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
目录
前两天孩子闹着要玩拼图游戏,说叫我用手机下载一个玩,后边玩着的时候突然说了一句“他们好厉害哦,能做这么好玩的游戏!”,这给我气的,看不起你爹我是吧,怎么说俺也是IT界的精英,能给你惯着,非得争这口吻。于是,我网上查了一下实现原理,就自己写了一个,现在基本功能已经完成,可以在孩子眼前体现一番了,就为了那一句“爸爸好厉害!”。
效果图
实现过程
完整代码
样式还没有经心去调,发出来各人看看,接待指正,整理不易给个三连吧,谢谢拉!!
前两天孩子闹着要玩拼图游戏,说叫我用手机下载一个玩,后边玩着的时候突然说了一句“他们好厉害哦,能做这么好玩的游戏!”,这给我气的,看不起你爹我是吧,怎么说俺也是IT界的精英,能给你惯着,非得争这口吻。于是,我网上查了一下实现原理,就自己写了一个,现在基本功能已经完成,可以在孩子眼前体现一番了,就为了那一句“爸爸好厉害!”。

效果图







实现过程

1.切图:用 background:url('+url+') no-repeat -60px -60px 这种语法,将图片切成一张张小图,添加到一个数组item里面。
2.在上一步中同步用数组keys存取小图的下标,9张小图的话(keys就输数字0-8的数组),点击开始 用Math.random()>0.5?1:-1 对keys举行随机排序。
3.遍历keys,拿到下标对应找到存取小图片的数组item取到小图片,然后依次添加到页面上的box里面,就可到达随机打乱的效果。
4.左键点击小图高亮显示(标示被选中),左键再次点击别的小图片会交换位置,若再次点击的不是左键,而是右键则上次的选中会被取消。
5.当拼图完成,会提示乐成!
6.页面左边是对应的参照图,下面有按钮可以切换图片,也可以调解难系数。
7.拖动的功能还没做,转头把拖动交换位置的加上。
完整代码

  1.                                                                 *{                                margin:0;                                padding:0;                        }                        .small{                                top: 10px;                            position: absolute;                        }                        .small_img{                                    display: block;                                    width: 200px;                                    margin-left: 10px;                        }                        .button{                                margin-left: 30px;                            font-size: 18px;                            width: 60px;                            letter-spacing: 5px;                        }                        div.box{                                        float:left;                                width: 600px;                                height: 600px;                                position: absolute;                                left: 50%;                                top:10px;                                margin-left: -300px                        }                        .active{                                border:2px dashed palevioletred;                                z-index:9;                        }                        .not_active{                                z-index:1;                        }                        .input{                                width:30px;                        }                                                                        [align=center][img]https://www.jianchenwangluo.com/'../images/j/1.jpg' /[/img][/align]                       
  2.                                                         难度系数:                                                                                                               
  3.                        
  4.                                                                
  5.                                
  6.                
复制代码
样式还没有经心去调,发出来各人看看,接待指正,整理不易给个三连吧,谢谢拉!!

 

来源:https://blog.csdn.net/dkm123456/article/details/111991734
免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!
回复

使用道具 举报

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

本版积分规则

发布主题

专注素材教程免费分享
全国免费热线电话

18768367769

周一至周日9:00-23:00

反馈建议

27428564@qq.com 在线QQ咨询

扫描二维码关注我们

Powered by Discuz! X3.4© 2001-2013 Comsenz Inc.( 蜀ICP备2021001884号-1 )