version 4.1.0

ทำข้อความวิ่งเหมือน Marquee ด้วย jQuery

  อังคารที่ 27 มกราคม พ.ศ. 2558 เวลา 08:58:42 น.      3,573 ครั้ง


ทำข้อความวิ่งเหมือน Marquee ด้วย jQuery

แนะนำ

วันนี้ มี "ความต้องการ" จากลูกค้าท่านหนึ่ง เขาต้องการให้ในหน้าเว็บมีการแสดง (ข้อความวิ่ง) เพื่อใช้ประชาสัมพันธ์ข่าวสารด่วน ซึ่งผลลัพธ์ของการแสดงผล จะเหมือนกับเราเรียกใช้งาน Tag HTML ที่มีชื่อว่า <marquee> แต่ Tag นี่มันเก่ามาก ผมเลยจะใช้คำสั่ง jQuery ทำงานแทน

บทนี้มีอะไรบ้าง

  1. ตอนที่ 1 เขียนคำสั่ง HTML แสดงข้อความวิ่ง Marquee
  2. ตอนที่ 2 เขียนคำสั่ง CSS ตกแต่งกรอบข้อความ
  3. ตอนที่ 3 เขียนคำสั่ง Jquery เพื่อให้ข้อความวิ่ง

ตัวอย่างคำสั่ง

 <div class="containMarquee">  
    <h2 style="padding:10px;" class="obj_marquee"> Example DriveSoftCenter.Net </h2>  
</div> 

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 1 | รูปภาพตัวอย่าง



ตัวอย่างคำสั่ง

 
/* css กำหนดพื้นที่ของ div ข้อความเลื่อน   */  
.containMarquee {  
    position: relative;  
    width: 100%;  
    display: block;  
    height: 110px;  
    line-height: 50px;  
    overflow: hidden;  
}  
/* css กำหนดข้อความ สำหรับการทำ marquee  */  
.obj_marquee {  
    position: absolute;  
    display: block;  
    white-space: nowrap;  
}  


ตัวอย่างคำสั่ง

 var move_marquee;  
var marquee_status;  
var marquee_move;  
var marquee_speed;  
var marquee_step;  
var marquee_direction;  
var newLeft;  
var obj;  

$(function(){  

    var divCover_w = $(".containMarquee").width(); // หาความกว้างพื้นที่ส่วนแสดง marquee  
    var divMarquee_w = $(".obj_marquee").width(); //หาความกว้างของเนื้อหา marquee  

    obj = $(".obj_marquee"); // กำหนดเป็น ตัวแปร jQuery object  
    marquee_direction = 1; /* กำหนดการเลื่อนซ้ายขวา 1 = จากขวามาซ้าย 2 = จากซ้ายไปขวา */  
    marquee_speed = 40; // กำหนดความเร็วของเวลาในการเคลื่อนที่ ค่ายิ่งมาก จะช้า  
    marquee_step = 5; // กำหนดระยะการเคลื่อนที่ ค่ายิ่งมาก จะเร็ว  

    obj.css("left",(marquee_direction == 1) ? divCover_w : -divMarquee_w);  
    marquee_move = function(obj){  
        marquee_status = setTimeout(function(){  
            move_marquee(obj);  
        },marquee_speed);         
    };  
    
    move_marquee = function(obj){  
        var condition_mq = (marquee_direction == 2) 
        ? 'newLeft<divCover_w' : 'newLeft>-divMarquee_w';  
        var initLeft = (marquee_direction == 1) ? divCover_w : -divMarquee_w;  
        newLeft = (marquee_direction == 1)
        ? parseInt(obj.css('left')) - marquee_step  
        : parseInt(obj.css('left')) + marquee_step;  
        if(eval(condition_mq)){  
            obj.css({  
                'left' : newLeft + 'px'  
            });  
        }else{  
            obj.css("left", initLeft);  
        }                 
        marquee_move(obj);  
    };    
 
    marquee_move(obj);  
    
}); 

$(".containMarquee").mouseover(function(){  
    clearTimeout(marquee_status);  
}).mouseout(function(){  
    marquee_move(obj);  
});  

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 2 | รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพตัวอย่าง

รูปภาพที่ 3 | รูปภาพตัวอย่าง



แท็ก


Credit

  ขอบคุณข้อมูลจากเว็บไซต์ http://www.ninenik.com


นักแปล / นักเขียน / เรียบเรียง

author

เอกบิณ ใจแก้วมา (แม็ก)

"โปรแกรมเมอร์ตัวเล็ก ๆ" สะสมประสบการณ์ด้านการพัฒนาซอฟแวร์มามากกว่า 11 ปี
# ติดตามผลงานได้ที่ | พบกับเราที่ Google+ | Facebook






Comment