html如何做照片墙—html照片墙滚动代码!

今天给大家带来的纯js实现的照片墙效果,代码可能比较多小编会一步步为大家讲解,

下面开始

1、

html布局很简单就是一组图片和一个按钮控制图片的特效

</div>//因为图片比较多所以截一小部分

</div>

2、

CSS样式

<style>

#imWrap{max-width: 800px;margin: 0 auto;perspective:800px;-webkit-perspective: 800px;}

#imWrap img{float: left;width: 80px;max-width: 100%;max-height: 100%}

input{width: 100px;text-align: center;font: 16px/40px "微软雅黑";color: #fff;

padding: 0 20px;background: rgb(0,100,0);border: none;border-radius: 5px;box-shadow: 0 0 0 5px #000000;margin-top: 50px;}

#btn2{max-width: 800px;margin: 50px auto;text-align: center;}

@media only screen and (max-width:960px), only screen and (max-device-width:960px) {

#imWrap img{width:25%;display: block}}

</style>

采用的美图查询宽度自适应,由于不是纯写css的所以没做太多处理,有个样子就行了。

要在头部加一句

界面就是这样的

小屏幕下的样子

js脚本

开始最重要的一部分 js实现效果

首先老样子获取需要的东西

var btn=document.getElementById('btn');

var Img=document.querySelectorAll('img');

需要给按钮添加点击事件对图片进行操作,首先要遍历图片

for(var i=0;i<Img.length;i++){

b function () {

}

后期会用到很多相同的东西这时候我们把他封装在一个函数里面有4个参数

分别是对象还有,事件,运动属性,回调函数,

function init(obj,time,doFn,cailBack){

obj.;//给这个对象添加事件

doFn.call(obj);//call调用函数并把this指向给obj

obj.addEventListener('transitionend', function () {}//CSS3的属性这里监听动画执行完以后需做什么

}

下面就可以在里面调用

for(var i=0;i<Img.length;i++){

(function(i){//可理解为闭包,因为for循环执行很快,点击的时候已经循环完一遍到最后了,会没效果

setTimeout(function (){

init(Img[i],'10ms', function () {

;scale(0)';

}, function () {

init(this,'1s',function(){

;scale(1)';

}, function () {

number++;//用来判断是否到了最后一个图片,然后执行下一个函数

if(number==Img.length){

toBig();//下一个旋转的动画函数

}

});

},Ma()*1000);//因为图片是随机出现所以用随机数代替时间

})(i)

//上面写完后发现点击就可以看到效果了、

function toBig(){

for(var i=0;i<Img.length;i++){

Img[i].;";

Img[i].;rotateY(0deg) translateZ(-'+Ma()*500+'px)';

(function(i){

setTimeout(function () {

init(Img[i],'2s', function () {

;

;rotateY(-360deg) translateZ(0px)';

}, function () {

allEnd++;

if(allEnd==Img.length){

on=true;

}

})

},Ma()*1000)

}(i))

}//for循环遍历

}//旋转动画

}

这里分享一个小技巧用户点击过快可能触发很多次这时候需要一个变量 var on=true;

if(!on){

return;

}

on=false;

全部代码

<!DOCTYPE html>

<html>

<head>

<style>

#imWrap{max-width: 800px;margin: 0 auto;perspective:800px;-webkit-perspective: 800px;}

#imWrap img{float: left;width: 80px;max-width: 100%;max-height: 100%}

input{width: 100px;text-align: center;font: 16px/40px "微软雅黑";color: #fff;

padding: 0 20px;background: rgb(0,100,0);border: none;border-radius: 5px;box-shadow: 0 0 0 5px #000000;margin-top: 50px;}

#btn2{max-width: 800px;margin: 50px auto;text-align: center;}

@media only screen and (max-width:960px), only screen and (max-device-width:960px) {

#imWrap img{width:25%;display: block}}

</style>

</head>

<body>

</div>

</div>

window.onload= function () {

var btn=document.getElementById('btn');

var Img=document.querySelectorAll('img');

var on=true; //用来决定用户是否可以在此点击 true可以点,false不可以点

b function () {

if(!on){

return;

}

on=false;

var number=0;//运动完成的图片

var allEnd=0//判断所有图片是否运动完了

for(var i=0;i<Img.length;i++){

(function(i){

setTimeout(function (){

init(Img[i],'10ms', function () {

;scale(0)';

}, function () {

init(this,'1s',function(){

;scale(1)';

}, function () {

number++;

if(number==Img.length){

toBig();

}

});

},Ma()*1000);

})(i)

}

function toBig(){

//第三个效果

for(var i=0;i<Img.length;i++){

Img[i].;";

Img[i].;rotateY(0deg) translateZ(-'+Ma()*500+'px)';

(function(i){

setTimeout(function () {

init(Img[i],'2s', function () {

;

;rotateY(-360deg) translateZ(0px)';

}, function () {

allEnd++;

if(allEnd==Img.length){

on=true;

}

})

},Ma()*500)

})(i)

}

};

function init(obj,time,doFn,cailBack){

obj.;

doFn.call(obj);//call调用函数并把this指向给obj

var calld=false;

obj.addEventListener('transitionend', function () {

if(!calld){

cailBack&&cailBack.call(obj);

calld=true;

}

cailBack.call(obj);

},false)

}

</script>

</body>

</html>

“html如何做照片墙,html照片墙滚动代码,html照片墙代码,html如何添加照片,html如何设置照片大小,HTML照片墙”边界阅读

责任编辑: 鲁达

“html如何做照片墙,html照片墙滚动代码,html照片墙代码,html如何添加照片,html如何设置照片大小,HTML照片墙”边界阅读