|
|
|
ผมลองเขียน jQuery Plugin มีท่านช่วยว่าต้องแก้ไขตรงได้ไหมครับ |
|
|
|
|
|
|
|
งง คำถาม เอาโค้ทมาลงดีกว่าครับ
|
|
|
|
|
Date :
2012-12-10 23:46:47 |
By :
mangkunzo |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Code (JavaScript)
(function($) {
$.fn.ExpandableAdsHeader = function(options)
{
ObjAds = $(this);
ObjImgNormal = $(this).find("img")[0];
ObjImgActive = $(this).find("img")[1];
ObjImgClose = $(this).find("img")[2];
$(ObjAds).css("width",options.ads_width);
$(ObjAds).css("height",options.ads_height);
if(options.show_border)
{
$(ObjAds).css("border","#666 solid 1px");
}
$(ObjImgNormal).css("position","absolute");
$(ObjImgActive).css("display","none");
$(ObjImgActive).css("position","absolute");
$(ObjImgClose).css("width",options.bt_close_width);
$(ObjImgClose).css("height", options.bt_close_height);
$(ObjImgClose).css("display","none");
$(ObjImgClose).css("cursor","pointer");
$(ObjImgClose).css("position","relative");
$(ObjImgClose).css("left",options.bt_close_x);
$(ObjImgClose).css("top",options.bt_close_y);
$(this).hover(function()
{
$(ObjImgNormal).fadeOut(options.time_fadeout);
$(this).animate({paddingBottom:options.active_height}, options.time_animation, function()
{
$(ObjImgActive).fadeIn(options.time_fadein);
$(ObjImgClose).fadeIn(options.time_fadein);
$(ObjImgActive).css("display","block");
$(ObjImgClose).css("display","block");
}).off('hover');
});
$(ObjImgClose).click(function()
{
$(ObjImgActive).fadeOut(options.time_fadeout);
$(ObjImgActive).css("display","none");
$(ObjImgClose).fadeOut(options.time_fadeout);
$(ObjImgClose).css("display","none");
$(ObjImgNormal).fadeIn(options.time_fadein);
$(ObjAds).animate({paddingBottom:'0px'}, options.time_animation, function()
{
$(this).on('hover', function()
{
$(ObjImgNormal).fadeOut(options.time_fadeout);
$(this).animate({paddingBottom:options.active_height}, options.time_animation, function()
{
$(ObjImgActive).fadeIn(options.time_fadein);
$(ObjImgClose).fadeIn(options.time_fadein);
$(ObjImgActive).css("display","block");
$(ObjImgClose).css("display","block");
}).off('hover');
});
})
});
};
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function()
{
$("#ads-header").ExpandableAdsHeader({
active_height : '400px',
time_animation : 'slow',
time_fadeout : 1000,
time_fadein : 500,
show_border : true,
ads_width : '900px',
ads_height : '100px',
bt_close_width : '15px',
bt_close_height : '15px',
bt_close_x : '878px',
bt_close_y : '478px',
});
$("#ads-footer").ExpandableAdsHeader({
active_height : '400px',
time_animation : 'slow',
time_fadeout : 1000,
time_fadein : 500,
show_border : true,
ads_width : '900px',
ads_height : '100px',
bt_close_width : '15px',
bt_close_height : '15px',
bt_close_x : '878px',
bt_close_y : '478px',
});
});
</script>
Code (PHP)
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="500">
<div id="ads-header">
<img src="1.jpg" width="900" height="100" />
<img src="2.jpg" width="900" height="500" />
<img src="close.gif" width="15" height="15" />
</div>
</td>
<td height="500">
<div id="ads-footer">
<img src="01.jpg" width="900" height="100" />
<img src="02.jpg" width="900" height="500" />
<img src="close.gif" width="15" height="15" />
</div>
</td>
</tr>
</table>
|
ประวัติการแก้ไข 2012-12-11 00:56:53
|
|
|
|
Date :
2012-12-11 00:55:47 |
By :
Parasiteve |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
ลองศึกษาฟังก์ชั่นพื้นฐานของ jQuery เช่น show(), hide(), slildeUp(), slideDown;
สามารถให้ผลเหมือนกันกับที่คุณต้องการแต่ใช้โค้ดเพียงไม่กี่บรรทัด
|
|
|
|
|
Date :
2012-12-11 07:47:26 |
By :
dreamlover |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Load balance : Server 02
|