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

ส่วนของ 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 อ่าน 1880 14 Mar 09 สร้าง tooltip กล่องข้อความตัวช่วยเหลือได้ง่ายด้วย jQuery อ่าน 1849 18 Oct 08 การประยุกต์ใช้ฟังก์ขัน after() กับ text input อ่าน 1777 25 Sep 08 เริ่มต้นกับ jquery อ่าน 1745 01 Feb 09 สร้างกล่องแจ้งข้อความ คล้าย MSN ด้วย jQuery อ่าน 1667 30 Dec 08 การใช้งาน ajax ใน jQuery อย่างง่าย อ่าน 1642 25 Sep 08 การกำหนด selectors ด้วย jQuery เกี่ยวกับ form อ่าน 1634 04 Nov 08 การจำกัดจำนวนตัวอักษร ใน textarea ด้วย jquery อ่าน 1587 16 Nov 08 jQuery กับการจำกัดการเลือก checkbox อ่าน 1543 26 Feb 09 การกำหนดให้ input text เลื่อนโฟกัส focus เองอัตโนมัติ ด้วย jQuery อ่าน 1535 26 Mar 09 แสดงข้อความบนรูปภาพพื้นหลังสีจางด้วย CSS และ jQuery อ่าน 1522 17 Aug 09 สร้างเมนู เทคนิค ลูกตาปลา ด้วย jQuery อย่างง่าย อ่าน 1505 22 Nov 08 ซ่อนและแสดงเนื้อหาแบบหีบเพลง (accordion) ด้วย jquery อย่างง่าย อ่าน 1483 25 Sep 08 ตัวอย่างการใช้งานฟังก์ชันของ jQuery ในการเรียกใช้ Class ใน CSS อ่าน 1456 25 Sep 08 jquery สคริปแรกของคุณ อ่าน 1451
จำนวนผู้เยี่ยมชม 88073 คน 2010 © Copyright ninenik.com. All rights reserved.