小我主页文字弹出（回弹）信息

浏览：94次- 评论：0次- 发布时间：2019-08-01

Html

Css


    
    
        LiuYan Design
    
    
        刘燕
    
    
        女
    
    
        1997-11-07

* {
	margin:0;
	padding:0;
}
body {
	background-image:url("img/1.jpg");
	background-repeat:no-repeat;
	background-size:100%;
}
#all {
	width:500px;
	height:500px;
	margin:0 auto;
	margin-top:100px;
}
#entrance {
	width:500px;
	height:500px;
	background-color:#000000;
	opacity:0.1;
	position:absolute;
	float:left;
}
.content {
	width:100%;
	height:auto;
	float:left;
	font-size:50px;
	font-family:'宋体',arial,georgia,verdana,helvetica,sans-serif;
	font-weight:bold;
}
.content span {
	margin-left:20px;
}
#name {
	top:30px;
	/*right:-20px;
	*/
            /*left:20px;
	*/
            /*left:500px;
	*/
            /*display:none;
	*/
}
#sex {
	top:90px;
	/*right:52px;
	*/
            /*left:428px;
	*/
}
#birthday {
	top:150px;
	/*display:none;
	*/
            /*right:88px;
	*/
            /*left:392px;
	*/
}
.information {
	width:auto;
	width:auto;
	position:relative;
	float:left;
	/*background-color:#3489ff;
	*/
            font-size:35px;
	font-family:'宋体',arial,georgia,verdana,helvetica,sans-serif;
	/*right:-500px;
	*/
            display:none;
	font-weight:bold;
}

var num;
window.onload = function() {
    var alldiv = document.getElementById("entrance");
    alldiv.onclick = changeImg;
}

function changeImg() {
    num = getRandom();
    document.body.style.backgroundImage = "url('img/" + num + ".jpg')"
}

function leftSlide() {
    var nameDiv = document.getElementById("name");
    var sexDiv = document.getElementById("sex");
    var birthdayDiv = document.getElementById("birthday");

if (namespeed >= 20) {
        nameDiv.style.display = "block";
        nameDiv.style.left = namespeed + "px";
        namespeed -= speedone;
        if (namespeed > m1) {
            speedone = 3;
            namespeed -= speedone;
        }

} else {
        if (right <= 16) {
            speedone = -3;
            namespeed -= speedone;
            right++;
            m1 -= 20;
        }
    }

if (sexspeed >= -52) {
        if (sexspeed <= 428) {
            sexDiv.style.display = "block";
        }
        sexDiv.style.left = sexspeed + "px";
        sexspeed -= speedtwo;
        if (sexspeed > m2) {
            speedtwo = 3;
            sexspeed -= speedtwo;
        }
    } else {
        if (right <= 16) {
            speedtwo = -3;
            sexspeed -= speedtwo;
            right++;
            m2 -= 20;
        }
    }

if (birthdayspeed >= -88) {
        if (birthdayspeed <= 392) {
            birthdayDiv.style.display = "block";
        }
        birthdayDiv.style.left = birthdayspeed + "px";
        birthdayspeed -= speedthree;
        if (birthdayspeed > m3) {
            speedthree = 3;
            birthdayspeed -= speedthree;
        }
    } else {
        if (right <= 16) {
            speedthree = -3;
            birthdayspeed -= speedthree;
            right++;
            m3 -= 30;
        }
    }
}
window.setInterval(leftSlide, 1);

↑下面代码改变，会主动显示代码成果

jQuery调用版本：1.11.3

急速下载

代码描述：代码是应用原生js完成的，翻开页面时，会从左边显示文字信息，然后向左滑动，反弹，最后运动；点击中心信息展示的区域切换背景图片

function getrandom() { var number = parseint(math.random() * 10 + 1); while (true) { if (num == number) { number = parseint(math.random() * 10 + 1); } else { return number; } } }

加粗显示的数字，是显示图片数量，假设图片数量为20，只须要将值设置为20便可

document.body.style.backgroundimage = "url('img/" + num + ".jpg')"

评论辩论这个经常使用代码（0）答复他人成绩或分享心得会嘉奖牛币

〒_〒居然一个评论都没有……

文明上彀，理性说话！ 😉 阿里云荣幸券，戳我支付