PK创意闹新春,我正在参加「春节创意投稿大赛」,详情请看:春节创意投稿大赛
结果展示
每一张照片都是时光的标本,人们大都喜欢用影像理解世界,以镜头记录自己的生活。照片留下的是我们的回忆。你会发现你总爱翻过去的照片,在夜里回忆从前。因为你怕突然有一天忘了,忘了你还爱着她。
源码阶段
主要是前端技术实现的用到了
css
js
jQuery
总体实现还是比较简单的下面请看源码讲解
首先我们先实现一个静态的心型图片墙:
先做一个心形轮廓出来
var heartFunc = function (x, y) {
// console.log(x,y)
if (x >= 0 && x < 1) {
if (y < (x + 3) && y > (-x + 2)) {
return true
}
} else if (x >= 1 && x < 2) {
if (y < (-x + 5) && y > (-x + 2)) {
return true
}
} else if (x >= 2 && x < 3) {
if (y < (x + 1) && y > (x - 2)) {
return true
}
} else if (x >= 3 && x < 4) {
if (y < (-x + 7) && y > (x - 2)) {
return true
}
}
return false
}
复制代码
对图片随机选取
var selectFunc = function () {
$(".surprise").removeClass("surprise").css("transform", "rotate("+(25 * (0.5 - Math.random())) + "deg) ")
$("#pic-" + Math.floor(Math.random() * count)).addClass("surprise")
$(".start").removeClass("start")
}
var comfirmFunc = function () {
startFunc();
}
var startFunc = function () {
$(".surprise").removeClass("surprise")
roundBox= window.setInterval(function(){
$(".start").removeClass("start")
for (var i = 1; i < count; i++) {
if(i%20==Math.floor(Math.random() * 20)){
$("#pic-" + i).addClass("start")
}
}
},200)
}
var enterNum=0
$(document).keydown(function (e) {
selectFlag = true;
if (!e) var e = window.event;
if (e.keyCode == 32) { //选
if(enterNum%2==0){
startFunc();
}else{
startFlag=true
window.clearInterval(roundBox)
$(".start").removeClass("start")
selectFunc();
}
enterNum++
// startFunc();
}
if (e.keyCode == 13) { //存
comfirmFunc();
}
});
复制代码
在加上对图片样式的设计和动态效果
对图片样式设计
.container img {
position: absolute;
padding: 5px;
height: 300px;
width: 300px;
background: #fff;
border: 1px solid #ddd;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
z-index: 1;
top:50%;
left:50%;
-webkit-transform-origin:50% 50%;
-moz-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform: translate(-50%,-50%) ;
-moz-transform: translate(-50%,-50%) ;
transform: translate(-50%,-50%) ;
}
复制代码
实现动画效果
.start{
background-color: blue!important;
z-index: 4!important;
-webkit-transition: all 0.2s ease-in-out!important;
-moz-transition: all 0.2s ease-in-out!important;
transition: all 0.2s ease-in-out!important;
}
.surprise{
-webkit-transform-origin:50% 50%!important;
-moz-transform-origin:50% 50%!important;
transform-origin:50% 50%!important;
-webkit-transform: rotate(0deg) translate(-50%,-50%) !important;
-moz-transform: rotate(0deg) translate(-50%,-50%) !important;
transform: rotate(0deg) translate(-50%,-50%) !important;
/* -webkit-transform:!important;
-moz- rotate(360deg)transform:rotate(360deg)!important;
transform:rotate(360deg)!important; */
top:50%!important;
left:50%!important;
height: 500px!important;
width: 500px!important;
z-index: 5!important;
background-color: red;
}
复制代码