JS中加载cssText延时-创新互联
站在用户的角度思考问题,与客户深入沟通,找到浪卡子网站设计与浪卡子网站推广的解决方案,凭借多年的经验,让设计与互联网技术结合,创造个性化、用户体验好的作品,建站类型包括:网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广、域名与空间、网页空间、企业邮箱。业务覆盖浪卡子地区。
* {
padding: 0;
margin: 0;
}
html {
height: 100%;
}
body {
height: 100%;
background: url(img/pic10.jpg) no-repeat;
background-size: cover;
overflow: hidden;
}
.snowLand {
position: absolute;
left: 0;
bottom: 0;
background: white;
width: 100%;
height: 0;
}
var screenW = document.documentElement.offsetWidth || document.body.offsetWidth;
var screenH = document.documentElement.offsetHeight || document.body.offsetHeight;
var oBody = document.getElementsByTagName('body')[0];
var oSnowLand = document.getElementsByClassName('snowLand')[0];
var snowLandH = 0;
var snowNum = 0;
function getRan(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function Snow(size, l, t, deg, lastTime) {
this.size = size;
this.l = l;
this.t = t;
this.deg = deg;
this.lastTime = lastTime;
}
Snow.prototype.createSnow = function () {
var _this = this;
this.oImg = document.createElement('img');
this.oImg.src = "img/snowflake.png";
this.oImg.style.cssText = 'width:' + this.size + 'px;height:' + this.size + 'px;position:absolute;left:' + this.l + 'px;top:' + (-this.size) + 'px;transform:rotate(0deg);transition:all ' + this.lastTime + 's ease-in;';
oBody.appendChild(this.oImg);
setTimeout(function () {
_this.snowFall(_this);
}, 100);//这里延时若是加的不够,就可能出现cssText还没完全加载进去就执行snowfall,于是可能就不会执行transition事件的监听,就会出现图片一直停留在屏幕中的问题
}
Snow.prototype.snowFall = function (_this) {
_this.oImg.style.top = _this.t + 'px';
_this.oImg.style.transform = 'rotate(' + _this.deg + 'deg)';
//因为完成transition的属性有两个,所以不加控制的话会执行两次 oBody.removeChild(_this.oDiv);
_this.flag = true;
_this.oImg.addEventListener('transitionend', function () {
if (_this.flag == true) {
oBody.removeChild(_this.oImg);
_this.flag = false;
//每10个雪花,升高10px
//console.log(sonwLandH)
if (snowLandH <= 100) {
snowNum++;
snowLandH = parseInt(snowNum / 10) * 10;
oSnowLand.style.height = snowLandH + 'px';
}
}
}, false)
}
setInterval(function () {
for (var i = 0; i < 6; i++) {
var nowSize = getRan(10, 30);
var snow = new Snow(nowSize, getRan(0, screenW - nowSize), screenH + nowSize, getRan(360, 1440), getRan(3, 6));
snow.createSnow();
}
}, 1000);
创新互联www.cdcxhl.cn,专业提供香港、美国云服务器,动态BGP最优骨干路由自动选择,持续稳定高效的网络助力业务部署。公司持有工信部办法的idc、isp许可证, 机房独有T级流量清洗系统配攻击溯源,准确进行流量调度,确保服务器高可用性。佳节活动现已开启,新人活动云服务器买多久送多久。
当前标题:JS中加载cssText延时-创新互联
文章分享:http://azwzsj.com/article/ggggs.html