สร้างป้ายโฆษณาเลื่อนตามจอภาพ ด้วย jquery ได้ในไม่กี่บรรทัด

Bookmark and Share

ส่วนของ Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
var name = "#float_banner"; 
var locateY= null;  
$(function(){
	locateY=parseInt($(name).css("top").replace("px",""));
	$(window).scroll(function(){
		offset=locateY+$(document).scrollTop()+"px";
		$(name).animate({top:offset},{duration:1000,queue:false});
	});
});
</script>

CSS และ HTML Code

<style type="text/css">
div#float_banner{
	position:absolute;
	width:150px;
	display:block;
	top:150px;
	height:61px;
}
</style>
<div id="float_banner">
<a href="http://www.cmsproweb.com/" target="_blank">
<img src="http://www.ninenik.com/img/link/1224135320.jpg" />
</a>
</div>

ตัวอย่างผลลัพธ์




บทความในหมวดที่่น่าสนใจ อื่นๆ jQuery Learning

25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 1 อ่าน 3135 25 Sep 08 เริ่มต้นกับ jquery อ่าน 2912 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 2870 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 2739 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 2609 16 Nov 08 jQuery กับการจำกัดการเลือก checkbox อ่าน 2508 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 2497 25 Sep 08 ซ่อนและแสดง เนื้อหาด้วย jquery แบบ Basic อ่าน 2471 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 2456 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 2454 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 2449 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 2376 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 2355 15 Feb 09 สร้างเมนู Accordion อย่างง่ายแบบที่ 2 ด้วย jQuery อ่าน 2313 16 Aug 09 jQuery UI คือ อะไร อ่าน 2300
จำนวนผู้เยี่ยมชม 157920 คน 2010 © Copyright ninenik.com. All rights reserved.