孤影棧

因為有朋友有這樣的需求,剛好在玩jQuery,
所以就寫了一個,但是還沒有寫成外掛的方式,
不過code還算簡單,所以大家可以玩玩看,有空再來改!

其中也使用到了jQuery.flash.js這個外掛來產生flash的物件

floaingbox.js的內容如下,要使用只需修改flash的檔名路徑及寬度高度.
然後將jquery.js,jquery.flash.js及floatingbox.js一起放在要顯示的網頁中即可.

// file path of flash
var flashName = "http://l.yimg.com/f/a/tw/erinlin/751896_1113_350x200.swf";
// width of flash
var flashWidth = 200;
// height of flash
var flashHeight = 200;

var flashDivName = "floatDiv";
var flashYloc = null;

$(document).ready(function() {
    $("body").append("<div id='" + flashDivName + "'><div>");
    $("#" + flashDivName).css({ position: "absolute" });
    $("#" + flashDivName).flash({ src: flashName, width: flashWidth, height: flashHeight });
    FloatingPosition();
    flashYloc = GetFloatingTop();
    $(window).scroll(function() {
        var offset = flashYloc + $(document).scrollTop() + "px";
        $("#" + flashDivName).animate({ top: offset }, { duration: 100, queue: false });
    });

    $(window).resize(function() {
        FloatingPosition();
        flashYloc = GetFloatingTop();
    });
});
function GetFloatingTop() {
    return ($(window).height() / 2) - ($("#" + flashDivName).height() / 2);
}
function FloatingPosition() {
    var divTop = GetFloatingTop() + "px";
    var divLeft = $(window).width() - $("#" + flashDivName).width() - 10 + "px";
    $("#" + flashDivName).animate({ top: divTop, left: divLeft }, { duration: 100, queue: false });
}

 

範例 : http://demo.dotblogs.com.tw/ajun/demo/floatingbox.htm

原始檔 : http://demo.dotblogs.com.tw/ajun/files/floatingbox.zip