Is there better way to write this in Javascript and JQuery?
<div class="video">
<span class="videoNewIcon"><img src="somenewicon.gif" width="26" height="11" /></span>
<a class="videoThumb" href="somevideoname.aspx">
<img src="http://somesite.com/someimagename.jpg" alt="description" longdesc="rtmp://somertmp.com/someapplication/mp4:somevide.f4v"/>
</a>
<span class="videoTitle">some title</span>
<span class="videoInfo videoInfoViews"><strong>some views</strong></span>
<span class="videoInfo videoInfoUpTime"><strong>some up time </strong></span>
<span class="videoInfo videoInfoCategory"><strong><a href="some category.aspx">some category</a></strong></span>
<span class="videoInfo videoInfoDuration"><strong>some duration</strong></span>
</div>
$(document).ready(function () {
$(".video").hover(
function () {
$(this).oneTime(1000, "hide", function () {
$(".videoThumb").children("img").show();
$("object").remove();
$(this).children(".videoThumb").children("img").hide();
var href = $(this).children(".videoThumb").attr("href");
var longdesc = $(this).children(".videoThumb").children("img").attr("longdesc");
$("<object classid='clsid:d27cdb6e-ae6d-11cf-96b8-444553540000' width='180' height='135' id='videoHolder' align='middle'><param name='movie' value='videoHolder.swf?vid=" + longdesc + "&url=" + href + "' /><param name='quality' value='high' /><param name='bgcolor' value='#000000' /><param name='play' value='true' /><param name='loop' value='true' /><param name='wmode' value='window' /><param name='scale' value='showall' /><param name='menu' value='true' /><param name='devicefont' value='false' /><param name='salign' value='' /><param name='allowScriptAccess' value='sameDomain' /><!--[if !IE]>--><object type='application/x-shockwave-flash' data='videoHolder.swf?vid=" + longdesc + "&url=" + href + "' width='180' height='135'><param name='movie' value='videoHolder.swf' /><param name='quality' value='high' /><param name='bgcolor' value='#000000' /><param name='play' value='true' /><param name='loop' value='true' /><param name='wmode' value='window' /><param name='scale' value='showall' /><param name='menu' value='true' /><param name='devicefont' value='false' /><param name='salign' value='' /><param name='allowScriptAccess' value='sameDomain' /><!--<![endif]--><a href='http://www.adobe.com/go/getflash'><img src='http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a><!--[if !IE]>--></object><!--<![endif]--></object>").appendTo($(this).children(".videoThumb"));
});
},
function () {
$(this).stopTime("hide");
$("object").remove();
$(this).children(".videoThumb").children("img").show();
}
);
});
Basically what I have is a <div class="video">
, onhover of which I replace <a class="videoThumb">
with an image to a flash player with 开发者_C百科movie preview. I inserted a jQuery timer to create a delay so once I hover over div.video
's first one will stop playing before the second one starts.
I would use a jquery template in this instance.
Check out my answer here How to prepend a big DIV? for an example usage.
精彩评论