格子图片定时翻格子(原创)精灵图

Html

Css

单击逐步,右键斜线

   * {
	padding:0;
	margin:0;
}
body {
	perspective:2000px;
	transform-style:preserve-3d;
}
span {
	display:inline-block;
	width:50px;
	height:50px;
	background-color:pink;
	border:1px solid white;
	vertical-align:middle;
	opacity:0.2;
	transition:all 0.5s ease-in;
	animation:rotateS 1s linear;
	transform-style:preserve-3d;
}
@keyframes rotateS {
	0% {
	transform:rotate(180deg) translate(-500px );
}
100% {
	transform:rotate(360);
}
}h1 {
	text-align:center;
}

//创建span
 for (var i = 0; i < 10; i++) {
     for (var j = 0; j < 20; j++) {
         document.write('<span></span>')
     }
     document.write('<br>')
 }
 //获取元素
 var spans = document.getElementsByTagName("span");
 for (var i = 0; i < 10; i++) {
     for (var j = 0; j < 20; j++) {
         spans[i * 20 + j].style.background = 'url(http://www.jq22.com/img/cs/500x300-1.png no-repeat  ' + -j * 50 + "px " + -i * 50 + "px";
     }
 }
 var tag = 0;
 //鼠标点击事件
 for (var i = 0; i < 200; i++) {
     spans[i].index = i;
     //左右自动渲染翻牌------------------------------------------------------------------------
     spans[i].onclick = function() {
         var max = this.index;
         var min = this.index;
         if (tag) {
             tag = 0;
         } else {
             tag = 1;
         }
         trans(max);
         var t = setInterval(function() {
             max++;
             min--;
             if (max == min) {
                 trans(max);
                 clearInterval(t);
             } else if (max >= 200)
                 max = 0;
             else if (min < 0)
                 min = 199;
             trans(max);
             trans(min)
             console.log(max)
             console.log(min)
         }, 50)
     }

//鼠标右键斜线自动翻牌-----------------------------------------------------------------------------
     spans[i].oncontextmenu = function() {
         if (tag) {
             tag = 0;
         } else {
             tag = 1;
         }
         bias(this.index);
         var mark = this.index;
         var count = 0;
         var t2 = setInterval(function() {
             count++;
             if (count >= 29) {
                 clearInterval(t2);
             } else if (mark >= 199) {
                 mark = 0;
             } else if (mark % 20 == 19) {
                 mark += 20;
             } else {
                 mark += 1;
             }
             bias(mark);
             console.log(mark);
         }, 500)
     }

// 函数翻转斜线----------------------------------------------------------------------
     function bias(a) {
         var max2 = a;
         var min2 = a;
         var arr = [];
         arr.push(min2);
         // 把一条斜线的元素装进一个数组
         for (; Math.floor(min2 / 20) > 0 && min2 % 20 < 19; min2 -= 19) {
             arr.push(min2);
         }
         arr.push(min2);
         for (; max2 < 180 && max2 % 20 > 0; max2 += 19) {
             arr.push(max2);
         }
         arr.push(max2);

//数组去重
         var newArr = ArrToRepeat(arr);
         //输出遍历
         newArr.forEach(function(value, index, Array) {
             trans(value);
         })
     }

// 函数设置透明度----------------------------------------------------------------------
     function trans(index) {
         if (tag)
             spans[index].style.opacity = "1";
         else {
             spans[index].style.opacity = "0.2";
         }

spans[index].style.transform = "rotateZ(360deg)";
     }

/*       //鼠标滑过事件----------------------------------------------------------------------
           spans[i].onmouseenter = function (){
               // trans(this.index);
               spans[this.index].style.opacity = "1";
               // spans[this.index].style.transform = 'scale(1.5) rotate(45deg)';
               // spans[this.index].style.borderRadius = "50%";
               
           }
          
       //鼠标划出事件-----------------------------------------------------------------------------
           spans[i].onmouseleave = function (){
               spans[this.index].style.transform = 'scale(1)';
               spans[this.index].style.borderRadius = "0";
           } */
 }

//数组去重
 function ArrToRepeat(arr) {
     if (!Array.isArray(arr)) {
         console.log('type error!')
         return;
     }
     var arr2 = [];
     for (var i = 0; i < arr.length; i++) {
         if (arr2.indexOf(arr[i]) == -1) {
             arr2.push(arr[i]);
         }
     }
     return arr2;
 }

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

格子图片定时翻格子(原创)精灵图



代码描述：鼠标左键点击图片格子自动左右渲染变清晰点击右键图片以斜线方式一排一排变清晰

更新时间：2020-05-26 09:11:53
注意,
1.第一次事件是由模糊变清晰,第二次是由清晰变模糊,两个事件可同时触发;
2.如果想要鼠标滑过效果,可以直接把js的划过事件解除注释
3.鼠标左键是左右渲染,鼠标右键是斜线向右下方翻转
4.使用了css3动画属性,定时器,透明度,js脚本创建元素;
5,所有图片由每一个小格子通过精灵图方式背景导入

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

独倚望江楼

相关代码

单击逐步,右键斜线

格子图片定时翻格子(原创)精灵图

最新