转一个jquery浮动代码很好

yantaoliu2006

浏览: 91912 次
性别:
来自: 北京

最近访客更多访客>>

wangyy

chengpeng_2015

牧夫天文

suncong1024

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

看原文章把，转过来后效果没以前的好了。看上去不方便。
http://www.zhangxinxu.com/study/201012/jquery-power-float-demo.html

一、加载页面上元素

默认rel加载
HTML代码：
<a id="trigger1" href="javascript:;" rel="targetBox">默认rel加载</a>
JS代码：
$("#trigger1").powerFloat();
target参数加载
HTML代码：
<a id="trigger2" href="###">target参数加载</a>
JS代码：
$("#trigger2").powerFloat({
    target: $("#targetBox")
});
target参数为选择器
HTML代码：
<a id="trigger3" href="###">target参数为选择器</a>
JS代码：
$("#trigger3").powerFloat({
    target: ".target_box"
});
二、Ajax加载外部元素

rel属性显示图片
HTML代码：
<a id="trigger4" href="javascript:;" rel="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">rel属性显示图片</a>
JS代码：
$("#trigger4").powerFloat({
    targetMode: "ajax"
});
target参数为图片地址
HTML代码：
<a id="trigger5" href="javascript:;">target参数为图片地址</a>
JS代码：
$("#trigger5").powerFloat({
    target: "http://tp3.sinaimg.cn/2305056670/180/5608200132/0",
    targetMode: "ajax"
});
加载外部HTML片段：点击切换显示
HTML代码：
<button id="trigger6">点击切换显示</button>
JS代码：
$("#trigger6").powerFloat({
    eventType: "click",
    target: "/study/201009/html-load.html",
    targetMode: "ajax"
});
加载外部页面数据失败：点击测试
HTML代码：
<button id="trigger7">点击测试</button>
JS代码：
$("#trigger7").powerFloat({
    eventType: "click",
    target: "http://www.baidu.com/",
    targetMode: "ajax"
});
三、下拉列表的显示

纯文字列表下拉：点击显示姓名列表▼
HTML代码：
<button id="trigger8">点击显示姓名列表▼</button>
JS代码：
$("#trigger8").powerFloat({
    width: "inherit",
    eventType: "click",
    target: ["唐丽霞", "徐栋梁", "成霞", "王庆花", "王腊梅", "朱小丽", "束方娟", "吉回秀", "陈阳", "<a href='##'>更多 >></a>"],
    targetMode: "list"
});
带链接的文字下拉：更多文章▼
HTML代码：
<a id="trigger9" href="/wordpress/">更多文章▼</a>
JS代码：
$("#trigger9").powerFloat({
    width: 250,
    target: [
        {
            href: "##",
            text: "这是文章1的说"
        },
        {
            href: "##",
            text: "啊，看，文章2"
        },
        {
            href: "##",
            text: "啊啦，不好，我把文章3忘家里了！"
        },
        {
            href: "##",
            text: "马萨噶，这就是传说中的...文章4..."
        },
        {
            href: "##",
            text: "什么嘛，就是文章5，害我白期待一场"
        }
    ],
    targetMode: "list"
});
无列表数据显示
HTML代码：
<a id="trigger10" href="#">无列表数据显示</a>
JS代码：
$("#trigger10").powerFloat({
    targetMode: "list"
});
四、简单提示的显示

输入密码：
再次输入：
HTML代码：
输入密码：<input class="pwdTrigger" type="password" placeholder="6~20个字符" />
再次输入：<input class="pwdTrigger" type="password" placeholder="输入与上面一样的密码" />
JS代码：
$(".pwdTrigger").powerFloat({
    eventType: "focus",
    targetMode: "remind",
    targetAttr: "placeholder",
    position: "1-4"
});
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等)：
确定
HTML代码：
<input id="posTrigger1" type="text" /> <button id="trigger11">确定</button>
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代码：
<a class="tipTrigger" href="###" tip="摸我">摸我</a>
<a class="tipTrigger" href="###" tip="我也要">我也要</a>
<a class="tipTrigger" href="###" tip="还有我">还有我</a>
JS代码：
$(".tipTrigger").powerFloat({
    offsets: {
        x: -10,
        y: 22
    },
    showDelay: 200,

    hoverHold: false,

    targetMode: "tip",
    targetAttr: "tip",
    position: "3-4"
});
右上角固定位置的操作提示层(ajax请求中提示，页面跳转中提示等)：
登录提交刷新
HTML代码：
<span id="targetFixed" class="target_fixed"></span>
<button class="operateTrigger">登录</button>
<button class="operateTrigger">提交</button>
<button class="operateTrigger">刷新</button>
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:#999\9;}
.custom_container img{padding:0; position:relative; top:-5px; left:-5px;}
HTML代码：
<div id="customContainer" class="custom_container"></div>
<input id="trigger12" type="button" src="http://image.zhangxinxu.com/image/study/s/s256/mm10.jpg" value="点击我" />
JS代码：
$("#trigger12").powerFloat({
    eventType: "click",
    targetMode: "ajax",
    targetAttr: "src",

    container: $("#customContainer"),
    reverseSharp: true
});
自定义容器装载页面元素：
HTML代码：
<input id="trigger13" type="button" src="targetBox" value="点击我" />
JS代码：
$("#trigger13").powerFloat({
    eventType: "click",
    targetMode: null,
    targetAttr: "src",

    container: $("#customContainer")
});
六、鼠标跟随效果

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

CSS代码：
.dib { display: inline-block; }
HTML代码：
<a class="dib" id="trigger14" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</a>
JS代码：
$("#trigger14").powerFloat({
    targetMode: "ajax",
    targetAttr: "href",
    hoverFollow: "y",
    position: "6-8"
});
缩略图显示大图，同时鼠标跟随(水平方向)：

CSS代码：
.dib { display: inline-block; }
HTML代码：
<a class="dib" id="trigger15" href="http://image.zhangxinxu.com/image/study/s/s256/mm1.jpg">
    <img src="http://image.zhangxinxu.com/image/study/s/s128/mm1.jpg" />
</a>
JS代码：
$("#trigger15").powerFloat({
    targetMode: "ajax",
    targetAttr: "href",
    hoverFollow: "x",
    hoverHold: false,
    position: "5-7"
});
七、动态Ajax地址

本条目2012年1月28日新增！target参数支持function以实现动态Ajax请求地址效果！

CSS代码：
.dib { display: inline-block; }
HTML代码：
<a href="/image/study/s/s256/mm1.jpg" class="dib triggerImage"><img src="/image/study/s/s128/mm1.jpg" /></a>
<a href="/image/study/s/s256/mm2.jpg" class="dib triggerImage"><img src="/image/study/s/s128/mm2.jpg" /></a>
<a href="/image/study/s/s256/mm3.jpg" class="dib triggerImage"><img src="/image/study/s/s128/mm3.jpg" /></a>
JS代码：
$(".triggerImage").powerFloat({
    targetMode: "ajax",
    target: function() {
        return $(this).attr("href");
    },
    hoverHold: false,
    position: "5-7"
});

分享到：