jQuery万能浮动框插件测试

JS代码：$(“#trigger8”).powerFloat({ width: “inherit”, eventType: “click”, target: [“唐丽霞”, “徐栋梁”, “成霞”, “王庆花”, “王腊梅”, “朱小丽”, “束方娟”, “吉回秀”, “陈阳”, “更多 >>“], targetMode: “list” });

带链接的文字下拉：更多文章▼

HTML代码：更多文章▼

JS代码：$(“#trigger9”).powerFloat({ width: 250, target: [ { href: “##”, text: “这是文章1的说” }, { href: “##”, text: “啊，看，文章2” }, { href: “##”, text: “啊啦，不好，我把文章3忘家里了！” }, { href: “##”, text: “马萨噶，这就是传说中的…文章4…” }, { href: “##”, text: “什么嘛，就是文章5，害我白期待一场” } ], targetMode: “list” });

无列表数据显示

HTML代码：无列表数据显示

JS代码：$(“#trigger10”).powerFloat({ targetMode: “list” });

四、简单提示的显示

输入密码：

再次输入：

HTML代码：输入密码：再次输入：

JS代码：$(“.pwdTrigger”).powerFloat({ eventType: “focus”, targetMode: “remind”, targetAttr: “placeholder”, position: “1-4” });

点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等)：

确定

HTML代码： 确定

JS代码：var fnPosTri = function() { var oPosTri = $(“#posTrigger1”), vPosTri = $.trim(oPosTri.val()); if (vPosTri === “”) { oPosTri.powerFloat({ eventType: null, targetMode: “remind”, target: “输入内容不能为空！”, position: “1-4” }).focus(); } else if (/W/g.test(vPosTri)) { oPosTri.powerFloat({ eventType: null, targetMode: “remind”, target: “只能输入英文字符、数字和下划线”, position: “1-4” }).focus(); } else { $.powerFloat.hide(); } }; $(“#trigger11”).bind(“click”, fnPosTri); $(“#posTrigger1”).bind(“blur”, fnPosTri);

四、自定义浮动提示

模拟title的tip提示显示：摸我我也要还有我

HTML代码：摸我我也要还有我

JS代码：$(“.tipTrigger”).powerFloat({ offsets: { x: -10, y: 22 }, showDelay: 200, hoverHold: false, targetMode: “tip”, targetAttr: “tip”, position: “3-4” });

右上角固定位置的操作提示层(ajax请求中提示，页面跳转中提示等)：

登录提交刷新

HTML代码： 登录提交刷新

CSS代码：.target_fixed { height:25px; padding:1px; position:fixed; _position:absolute; top:0; right:0; }

JS代码：

$(".operateTrigger").click(function() {
    var txt = $(this).text();
    //IE6位置
    if (!window.XMLHttpRequest) {
        $("#targetFixed").css("top", $(document).scrollTop() + 2);
    }
    //创建半透明遮罩层
    if (!$("#overLay").size()) {
        $('<div id="overLay"></div>').prependTo($("body"));
        $("#overLay").css({
            width: "100%",
            backgroundColor: "#000",
            opacity: 0.2,
            position: "absolute",
            left: 0,
            top: 0,
            zIndex: 99
        }).height($(document).height());
    }
    //显示操作提示，最关键核心代码
    $("#targetFixed").powerFloat({
        eventType: null,
        targetMode: "doing",
        target: "正在" + txt + "中...",
        position: "1-2"
    });
    //定时关闭，测试用
    setTimeout(function() {
        $("#overLay").remove();
        $.powerFloat.hide();
    }, 2000);
});

五、自定义装载容器

自定义容器装载外部图片(无柔化投影)：

CSS代码：

.custom_container{position:absolute; background-color:rgba(0, 0, 0, .5); background-color:#9999;}
.custom_container img{padding:0; position:relative; top:-5px; left:-5px;}

HTML代码：

JS代码：$(“#trigger12”).powerFloat({ eventType: “click”, targetMode: “ajax”, targetAttr: “src”, container: $(“#customContainer”), reverseSharp: true });

自定义容器装载页面元素：

HTML代码：

JS代码：$(“#trigger13”).powerFloat({ eventType: “click”, targetMode: null, targetAttr: “src”, container: $(“#customContainer”) });

六、鼠标跟随效果

缩略图显示大图，同时鼠标跟随(垂直方向)：

CSS代码：.dib { display: inline-block; }

HTML代码：

JS代码：$(“#trigger14”).powerFloat({ targetMode: “ajax”, targetAttr: “href”, hoverFollow: “y”, position: “6-8” });

缩略图显示大图，同时鼠标跟随(水平方向)：

CSS代码：.dib { display: inline-block; }

HTML代码：

JS代码：$(“#trigger15”).powerFloat({ targetMode: “ajax”, targetAttr: “href”, hoverFollow: “x”, hoverHold: false, position: “5-7” });

地址：http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html