PHP广告弹出提示框:带图片和循环移动效果
以下是使用PHP和HTML实现广告弹出提示框的示例代码,该提示框可以显示图片并实现广告图片上下循环移动的效果:
<!DOCTYPE html>
<html>
<head>
<title>广告弹出提示框</title>
<style>
#ad-container {
position: fixed;
bottom: 0;
width: 100%;
height: 100px;
background-color: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
#ad-container img {
max-height: 80px;
margin: 0 10px;
animation: moveAd 10s infinite linear;
}
@keyframes moveAd {
0% {
transform: translateY(0);
}
50% {
transform: translateY(-50px);
}
100% {
transform: translateY(0);
}
}
</style>
</head>
<body>
<?php
// 定义广告图片数组
$adImages = [
'image1.jpg',
'image2.jpg',
'image3.jpg',
];
// 从数组中随机选择一个广告图片
$randomIndex = array_rand($adImages);
$adImage = $adImages[$randomIndex];
?>
<div id="ad-container">
<img src="<?php echo $adImage; ?>" alt="广告图片">
</div>
</body>
</html>
上述代码中,我们使用了CSS的position: fixed属性使广告容器固定在浏览器窗口底部。通过animation属性实现广告图片的上下循环移动效果。
在PHP部分,我们定义了一个包含多个广告图片文件名的数组$adImages。通过array_rand函数从数组中随机选择一个广告图片,然后在HTML部分使用<img>标签将其显示出来。
你可以根据需要修改广告图片数组$adImages,添加或删除图片文件名。同时,你也可以根据需求调整CSS样式和动画效果。
原文地址: https://www.cveoy.top/t/topic/o7vY 著作权归作者所有。请勿转载和采集!