ทำให้ Link & Image ของคุณมีสไตล์ เด้งได้ด้วย jQuery

Dancing Image3

บทความนี้ก็เป็น trick ในการทำให้ข้อความลิงค์และรูปภาพดูมีชีวิตชีวาขึ้นมากโดยอาศัยการทำงานของ jQuery (อีกแล้ว)

สำหรับตัวอย่างผมไม่สามารถ ได้ในบล็อกนี้ เพราะมันขัดแย้งกับ Jd Smoot gallery ที่ผมได้ติดตั้งไว้ก็เลย ให้เพื่อนสมาชิกที่สนใจออกแรงคลิกไปดูตัวอย่างก่อนตัดสินใจติดตั้งได้ที่ลิงค์ด้านล่าง


วิธีติดตั้ง

ขั้นที่ 1 ติดตั้ง jQuery ลงไปในแม่แบบ โดย..


ไปที่แผงควบคุม >>รูปแบบ  >> แก้ไข HTML

ค้นหาโค้ด

</head>

วางโค้ดต่อไปนี้ลงไปถัดจากโค้ดดังกล่าว และบันทึกแม่แบบครับ

<!--Dancing Link Edit By Hackublog-->
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
$(document).ready(function() {
$('a.hacku').hover(function() { //mouse in
$(this).animate({ paddingLeft: '20px' },400);
}, function() { //mouse out
$(this).animate({ paddingLeft: 0 }, 400);
});
});
</script>
<!--Dancing Link Stop-->



ขั้นที่ 2 การนำไปใช้

2.1 นำไปใช้กับข้อความ Link

ปกติรูปแบบของข้อความ Link จะเป็น

<a href="ใส่ LINK" >Link-Text</a>

ถ้าต้องการให้เกิด effect ที่ Link ใดก็เติม class hacku เข้าไป เช่น

<a href="ใส่ LINK" class="hacku" >Link-Text</a>

และถ้าต้องการทำเป็น List ก็ใช้ชุดโค้ดดังนี้

<a href="ใส่ LINK1" class="hacku" >Link-Text1</a>
<a href="ใส่ LINK2" class="hacku" >Link-Text2</a>
<a href="ใส่ LINK3" class="hacku" >Link-Text3</a>


หรือ

<li><a href="ใส่ LINK1" class="hacku" >Link-Text1</a></li>
<li><a href="ใส่ LINK2"class="hacku" >Link-Text2</a></li>
<li><a href="ใส่ LINK3" class="hacku" >Link-Text3</a></li>





2.2 การนำไปใช้กับรูปภาพ

ปกติรูปแบบโค้ดของรูปภาพที่มี Link จะเป็น

<a href="ใส่ LINK" ><img src="ใส่ URL ของรูป"/></a>

ถ้าต้องการให้เกิด effect ที่ Link ใดก็เติม class hacku เข้าไป เช่น

<a href="ใส่ LINK" class="hacku" ><img src="ใส่ URL ของรูป"/></a>

และถ้าต้องการทำเป็น List ของรูปภาพก็ใช้ชุดโค้ดดังนี้ (ในตัวอย่างนี้ใส่ 3 รูป)

<a href="ใส่ LINK1" class="hacku" >img src="ใส่ URL ของรูปที่1"/></a><a href="ใส่ LINK2" class="hacku" >img src="ใส่ URL ของรูปที่2"/></a><a href="ใส่ LINK3"class="hacku" >img src="ใส่ URL ของรูปที่3"/></a>


หมายเหตุ สคริปต์นี้จะใช้ไม่ได้ผลกับ Template ที่ติดตั้ง jd Smoot gallery  ครับ

เครดิต: nwhite.net + Hackublog

ตอนนี้มีความคิดเห็น : 0 ความคิดเห็น
หากคุณมีปัญหาหรือข้อสงสัยใดๆ สามารถสอบถามได้จากกล่อง comment ด้านล่างนี้ได้เลยครับ

แสดงความคิดเห็น

ถ้าต้องการโพส HTML ให้แปลงโค้ดที่เครื่องมือด้านล่างนี้ก่อนครับ

สร้างบล็อก Facebook SEO บล็อก Linkwheel iMacros Link Wheel