|
 |
| |
สอบถามเพื่อนๆครับ เกี่ยวกับตัวข้อความวิ่งจากซ้ายไปขวา ข้อความไทยวิ่งสุดเฟรมซ้าย แล้วค่อยให้ต่อด้วยอังกฤษ แล้วก็วนทำซ้ำต่อไปเรื่อยๆ ช่วยแนะนำหน่อยครับ |
| |
 |
|
|
 |
 |
|
Code (PHP)
<!DOCTYPE html>
<html>
<head>
<style>
.marquee-container {
width: 100vw;
overflow: hidden;
white-space: nowrap;
overflow: hidden;
border: 1px solid #ccc;
background: #ddd;
}
.marquee {
padding-left: 100vw;
display: inline-block;
animation: marquee 5s linear infinite;
animation-play-state: running;
}
.marquee.paused,
.marquee-container:hover .marquee {
animation-play-state: paused;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div class="marquee-container">
<div class="marquee xpaused"></div>
</div>
<script type="text/javascript">
const content = [
'first slide'
, 'second slide'
, 'third slide'
];
let key = 0;
const marquee = $('.marquee');
marquee.on('animationstart', () => {
key = 0;
marquee.text(content[key]);
});
marquee.on('animationiteration', () => {
key++;
if(typeof content[key] === 'undefined') key = 0;
marquee.text(content[key]);
});
marquee.removeClass('paused');
</script>
</body>
</html>
เอาไปตกแต่งประยุกต์ดูนะครับ
deawx
LINE 0890499359
[email protected]
ปรึกษา PHP ฟรีจ้า
|
 |
 |
 |
 |
| Date :
2024-03-04 10:59:06 |
By :
deawx |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
| |
|
|
|
| |
|
ขอบคุณมากๆครับผม ใช้งานได้ดีครับ
|
| |
|
|
| |
| Date :
2024-03-12 11:36:48 |
By :
beerkingdom |
|
|
| |
|
|
|
|
|
| |
|
|
|
|
|
| |
|
 Load balance : Server 02
|
