原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞？程序员就是可以为所欲为！

先看效果图：

实现思路：

代码：

欢迎指正，整理不易给个三连吧，谢谢拉！！

先看效果图：

单飞：

双飞：

完成后的页面：

实现思路：

1.切图：用 background:url('+url+') no-repeat -60px -60px 这种语法，将图片切成一张张小图，添加到一个数组item里面。

2.在上一步中同步用数组keys存取小图的下标，9张小图的话（keys就输数字0-8的数组），同时用另外一个数组存下每个小图的坐标。

3.点击开始用Math.random()>0.5?1:-1 对keys进行随机排序。

4.然后遍历keys，拿到下标对应找到存取小图片的数组item取到小图片，然后执行飞入动画即可。

5.双飞的话，就是将keys分成两个，第一个方式不变，第2个设置好每个元素的left，然后从右边飞入。

代码：


<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK"><style>*{margin:0;padding:0;}.small{top: 10px;position: absolute;}.small_img{display: block;width: 200px;margin-left: 10px;}.button{margin-left: 10px;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;border: 1px solid darkseagreen;}.active{border:2px dashed palevioletred;z-index:9;}.not_active{z-index:1;}.input{width:30px;}.modelActive{background:lightblue;}</style></head><body><div class="small"><img class="small_img" src='../images/j/1.jpg' /><br><div style='margin-left:10px;'>难度系数：<input type='text' id='difficulty_col' value='10' class='input'><input type='text' id='difficulty_row' value='10' class='input'><span id='msg' style='color:red;'></span></div><br><input type='button' value='开始' id='start' class="button"/><input type='button' value='换换' id='next' class="button"/><input type='button' value='单飞' onclick='changeModel(1)' id='modelOne' class="button modelActive"/><input type='button' value='双飞' onclick='changeModel(2)' id='modelTwo' class="button"/></div><div class="box" id='box'></div></body><script>var model=1;//飞入模式var speed=60;//初步设定30毫秒，可以改小加快速度、改大减缓速度function Jigsaw(col,row){this.box=document.getElementById("box");this.row=row;this.col=col;this.row=row||3;this.col=col||3;this.boxWidth=600;this.boxHeight=600;this.itemWidth = this.boxWidth/this.col;this.itemHeight= this.boxHeight/this.row;//存放每个小图片的数组this.item=[];//存放keythis.keys=[];//存放坐标的数组this.posArr=[];this.len=this.row*this.col;this.init();}//初始化Jigsaw.prototype.init=function(){var fragment=document.createDocumentFragment();var url = small_img.src;var rowNum=0,colNum=0;for(var i=0;i<this.len;i++){var div=document.createElement('div');  div.style.cssText='cursor:move;background:url('+url+') no-repeat -'+(i%this.col)*this.itemWidth+'px -'+Math.floor((i)/this.col)*this.itemHeight+'px;'+'float:left;height:'+this.itemHeight+'px;width:'+this.itemWidth+'px;position:absolute;FILTER: alpha(opacity=0);opacity: 0;';this.item.push(div);this.keys.push(i);if(i>0){if(i%this.col===0){rowNum++;}if(i%this.col===0){colNum=0;}}//存放好小图片最终的位置 left topthis.posArr.push({left:colNum++*this.itemWidth,top:rowNum*this.itemHeight})fragment.appendChild(div);}this.box.innerHTML="";this.box.appendChild(fragment);}//开始Jigsaw.prototype.start=function(){//随机位置this.keys.sort(function(a,b){return Math.random()>0.5?1:-1;})//根据模式来确定执行if(model==2){this.modelTwo();}else{this.modelOne();}}//单飞Jigsaw.prototype.modelOne=function(){this.doInto(this.keys);}//双飞Jigsaw.prototype.modelTwo=function(){var keys = this.keys;var keys1=[],keys2=[];var middle = Math.ceil(keys.length/2);//将keys分成2半 for(var i=0;i<keys.length;i++){if(i<middle){keys1.push(keys[i]);}else{keys2.push(keys[i]);}}this.doInto(keys1);//左上角飞入this.doInto(keys2,2);//右上角飞入}//执行飞入的函数Jigsaw.prototype.doInto=function(arr,type){for(var i=0;i<arr.length;i++){var item = this.item[arr[i]];var pos = this.posArr[arr[i]];if(type==2){//先定位到右上角item.style.left=(600-this.itemWidth)+'px';item.style.top='0px';}(function(o,j){//采用闭包的模式调用var o_left=pos.left+'px',o_top=pos.top+'px';var param = {'left': o_left,'top': o_top,'opacity':1};setTimeout(function(){//用setTimeout来将多个小图片依次飞入animate(o,param,'fast');//使用自己封装的动画函数},j*speed);})(item,i);}}//获取属性值function getStyle(obj, prop) {var prevComputedStyle = document.defaultView ? document.defaultView.getComputedStyle( obj, null ) : obj.currentStyle;return prevComputedStyle[prop];}/*obj:dom对象prop:动画参数speed:执行速度 fast slow 3000等func:回调函数*/function animate(obj,prop,speed,func){//防止重复动画事件if(obj.timer) return ;//定义定时器执行次数和总执行时间var    limit=20,totalTime; if(typeof speed==='number'){//如果传入的是totalTime = speed;}else if(speed==='slow'){totalTime = 600;}else if(speed==='fast'){totalTime = 200;}else{totalTime = 400;}var time = totalTime/limit;var n=0,cache={},display,primary_cur;//cache用来缓存，省的每次都去dom获取obj.timer = setInterval(function(){n++;//执行次数每次递增for(var p in prop){if("display"===p) {display = prop["display"];if(display!=='none'){obj.style['display'] = display;}delete prop["display"];continue;}//判断是否是可以递增的属性，如果不是则直接让它生效，并从prop中删除，删除后就不用每次任务都执行它var reg = /^(\d)+(px$)?/;//数字和像素这样的判定为可以递增的属性if(!reg.test(prop[p])){obj.style[p] = prop[p];delete prop[p];continue;}var value,opacityFlag=(p == "opacity")?true:false;var cur = 0;if(cache[p+"_cur"]){//从缓存中取cur = cache[p+"_cur"];value = cache[p+"_value"];}else{value = prop[p];if(opacityFlag) {//如果本来是隐藏的则cur默认就是0if(getStyle(obj, 'display')!=='none'){cur = Math.round(parseFloat(getStyle(obj, p)) * 100);}} else {cur = parseInt(getStyle(obj, p));//处理100px的格式(typeof value==='string') && (value=value.replace(/px$/,""));}primary_cur=cur;cache[p+"_value"] = value;}var incre ;if(cache[p+'_increment']){//如果缓存中有则从中取incre = cache[p+'_increment'];}else{if(opacityFlag){incre = (value*100-cur)/limit;//计算每次变化值}else{incre = (value-cur)/limit;//计算每次变化值}cache[p+'_increment']= incre;}//缓存起来，这样就不用每次都去dom中获取了。cache[p+"_cur"] = cur + incre;if (opacityFlag) {obj.style.filter = "alpha(opacity:"+(cur + incre)+" )";obj.style.opacity = (cur + incre)/100 ;}else {obj.style[p] = cur + incre + "px";}}//如果达到了最大执行次数，要清除定时器，并执行回调函数if(n==limit){if(display==='none'){obj.style['display'] = 'none';}//清除定时器clearInterval(obj.timer);obj.timer=undefined;func && func();}},time)}var _ = {isFunction : function(o){return o!== null &&typeof o ==='function';}}var msg = document.getElementById("msg");var difficulty_col=document.getElementById("difficulty_col");difficulty_col.onblur=function(){var temp = parseInt(this.value);if(isNaN(temp)){temp=3;}this.value = temp;if(this.value>10){this.value = 10;msg.innerText="太难了，不能超过10";}else if(this.value<2){this.value = 2;msg.innerText="太容易了，不能小于2";}elsemsg.innerText="";}var difficulty_row=document.getElementById("difficulty_row");difficulty_row.onblur=function(){var temp = parseInt(this.value);if(isNaN(temp)){temp=3;}this.value = temp;if(this.value>20){this.value = 20;msg.innerText="太难了，不能超过20"}else if(this.value<2){this.value = 2;msg.innerText="太容易了，不能小于2";}else{msg.innerText="";}}var small_img =document.getElementsByClassName("small_img")[0]; document.getElementById("next").onclick=function(){var src = small_img.src;var reg = /(\d+)\.jpg$/;var arr = reg.exec(src);var index=1;if(arr.length>1){index = ++arr[1];if(index>=6){index=1;}}small_img.src='../images/j/'+index+'.jpg';jigsaw = new Jigsaw(difficulty_col.value,difficulty_row.value);}function changeModel(type){var modelOne = document.getElementById("modelOne");var modelTwo = document.getElementById("modelTwo");if(type==1){model=1;modelOne.className='button modelActive';modelTwo.className='button';}else{model=2;modelTwo.className='button modelActive';modelOne.className='button';}}var jigsaw = new Jigsaw(difficulty_col.value,difficulty_row.value);document.getElementById("start").onclick=function(){//开始jigsaw = new Jigsaw(difficulty_col.value,difficulty_row.value);jigsaw.start();       }</script>
</html>

欢迎指正，整理不易给个三连吧，谢谢拉！！

原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞？程序员就是可以为所欲为！相关推荐

如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
js 取得input绑定的datalist中的值_原生JS写一个ToDo Demo
周六加班没什么事,于是乎...上班摸鱼,用原生JS写了一个ToDo Demo,废话少叙,直接看效果: 如图,实现了以下需求(以下的具体实现我会一一道来): 0.页面的基本布局: 1.rem布局.在不同 ...
HTML+CSS+原生JS写一个简易的音乐播放器（仅播放一首歌）
用HTML+CSS+原生JS写一个简易的音乐播放器(仅播放一首歌) 效果如下:(鼠标点击按钮可以实现播放或暂停,按钮会旋转,实现了歌词同步,功能还需改进) 代码如下: <!DOCTYPE htm ...
原生JS写仿淘宝搜索框（代码+效果），可实现3级搜索哦！
闲来无事,用原生JS写了一个淘宝搜索框,用的淘宝的接口,可直接进行商品搜索. 写在前面: 1.记得引用jquery啊! 2.有人私信我说css样式不能用,那是因为复制代码的时候,有空格,只需要自己把c ...
原生JS实现切换不同图片的特效
分享一个由原生JS实现的图片切换特效,效果如下: 原理比较简单,实现的代码如下: <!doctype html> <html><head><meta char ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
vue如何使用原生js写动画效果_原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...
用原生JS写一个网页版的2048小游戏（兼容移动端）
这个游戏JS部分全都是用原生JS代码写的,加有少量的CSS3动画,并简单的兼容了一下移动端. 先看一下在线的demo:https://yuan-yiming.github.io/2048-online ...
html怎么引轮播图插件,原生js写一个无缝轮播图插件(支持vue)
轮播图插件(Broadcast.js) 前言:写这个插件的原因前段时间准备用vue加上网易云的nodejs接口,模拟网易云音乐移动端.因为想自己写一遍所有的代码以及加固自己的flex布局,所以没有使 ...

原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞？程序员就是可以为所欲为！

先看效果图：

实现思路：

代码：

欢迎指正，整理不易给个三连吧，谢谢拉！！

原生js写的左侧飞入拼图特效，你是喜欢美女单飞还是双飞？程序员就是可以为所欲为！相关推荐

最新文章

热门文章