`
yantaoliu2006
  • 浏览: 91910 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

转一个jquery浮动代码 很好

 
阅读更多
看原文章把,转过来后效果没以前的好了。看上去不方便。
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"
});
分享到:
评论

相关推荐

    jquery简单的鼠标悬停按钮显示浮动提示框效果代码

    本文将深入探讨如何使用jQuery实现一个简单的鼠标悬停按钮时显示浮动提示框的效果,这对于网页交互设计至关重要。 首先,让我们理解基本概念。`悬停`是鼠标指针在元素上停留的事件,而`浮动提示框`则是一种常见的UI...

    简洁易用的jQuery左右对称浮动广告代码.zip

    对于那些希望定制广告显示方式或者改进现有广告功能的开发者来说,这无疑是一个很好的起点。 标签 "jquery代码"、"jquery特效" 和 "jquery插件" 提供了更多的上下文信息。这说明我们处理的代码是使用JavaScript库...

    jQuery右侧滚动条浮动在线客服代码点击展开收缩

    在网页设计中,为了提供更好的用户体验,很多网站都会在页面右侧设置一个浮动的在线客服系统。这种系统通常包含一个可展开和收缩的聊天窗口,用户可以随时点击与客服人员进行交流。在实现这样的功能时,JavaScript库...

    jQuery网页右侧浮动二维码返回顶部代码.zip

    7. **代码结构**:压缩包中的"说明.htm"可能是对整个功能的详细解释和示例展示,而"jQuery网页右侧浮动二维码返回顶部代码"很可能是实际的HTML、CSS和JavaScript代码。开发者需要将这些代码整合到自己的项目中,根据...

    jQuery表单浮动文字标签代码.zip

    本资源"jQuery表单浮动文字标签代码.zip"提供了一种创新的解决方案,它实现了表单输入元素的文字标签在不同位置浮动的效果,以增强用户填写表单时的引导体验。 首先,我们要理解“标签上浮动”、“标签右浮动”和...

    网页左侧浮动jQuery客服 jQuery网页左侧浮动在线QQ客服代码.zip

    网页左侧浮动jQuery客服是一种常见的网页...对于初学者来说,这是一个很好的实践项目,有助于提升前后端交互和JavaScript动态效果的实现能力。而对于有经验的开发者,这个代码可以作为一个快速实现在线客服功能的模版。

    bootstrap+jQuery点击打开浮动确认框代码.zip

    对于初学者或希望增强网页交互性的开发者来说,这个压缩包提供了一个很好的学习实例。你可以通过查看和分析这些文件,了解如何结合Bootstrap和jQuery来实现特定的用户交互功能。同时,由于代码具有可扩展性,有能力...

    页面 浮动层定位 jquery

    在提供的`div浮动层定位.html`文件中,很可能会包含一个实际的示例,展示如何应用上述代码。通过打开并查看这个文件,你可以更直观地理解浮动层定位的工作原理,并从中学习如何在自己的项目中实现类似的功能。 总之...

    jQuery表单输入框浮动标签文字代码.zip

    这个实例对于开发者来说是一个很好的学习资源,它展示了如何结合HTML5、CSS和jQuery来创建交互式和响应式的网页元素。无论是初学者还是经验丰富的开发者,都能从中学习到如何提高表单输入的用户体验。如果你对此感...

    jquery UI万能浮动

    同时,由于基于jQuery,它的性能优化做得很好,即使处理大量元素也能保持流畅。 **6. 其他组件** 除了Dialog和Tooltip,jQuery UI 还提供了诸如日期选择器(Datepicker)、滑块(Slider)、排序(Sortable)、拖放...

    基于jQuery精美浮动层效果(JS+CSS),完整源码,运行可看效果

    【jQuery精美浮动层效果详解】 在网页设计中,浮动层是一种常见的交互元素,它能够吸引用户的注意力,提供信息提示或者进行交互操作。...这是一个很好的学习和实践的资源,对于提升前端开发技能大有裨益。

    jQuery页面右下角浮动窗口代码.zip

    对于初学者,这是一个很好的实践案例,不仅可以学习到jQuery的基本用法,还能了解到如何创建自定义的交互式UI组件。而对于经验丰富的开发者来说,这个代码可以作为一个基础模板,根据实际需求进行扩展和优化,比如...

    jquery右侧浮动广告,随滚动条上下滚动,效果很好哦.

    描述中的“效果很好哦”意味着这种实现方式不仅实现了基本功能,而且在用户体验和视觉效果上也做得不错。这通常意味着代码执行流畅,没有闪烁或卡顿现象,同时广告的设计和颜色搭配也与网页整体风格协调。 在提供的...

    jQuery万能浮动框插件

    jQuery万能浮动框插件是一种基于JavaScript库jQuery的交互式用户界面组件,它允许开发者创建在页面上浮动的对话框或者提示框。这种插件在网页设计中非常常见,用于显示警告、信息、确认对话框,甚至承载复杂的内容...

    jquery左侧浮动层热门新闻列表滑动动画展示

    这对于初学者和经验丰富的开发者来说都是一个很好的学习资源,尤其是对jQuery以及web插件开发感兴趣的人员,可以深入理解如何利用jQuery实现动态效果。 关于【标签】"jQuery插件",jQuery是一个广泛使用的...

    HTML5视频播放器窗口浮动代码.zip

    HTML5视频播放器窗口浮动代码.zip是一个包含网页特效资源的压缩包,主要涉及jQuery特效、CSS特效以及HTML5视频播放器的设计与实现。这个压缩包很可能是为了帮助开发者或者网页设计师创建一个可以在页面中浮动的视频...

    基于jQuery+CSS实现的浮动html菜单效果分享代码.zip

    总的来说,这个项目提供了一个实用的示例,展示了如何利用jQuery和CSS创建一个浮动HTML菜单,这对于初学者来说是一个很好的学习资源,对于经验丰富的开发者也是一个可复用的组件。通过深入研究和实践,你可以掌握...

    非常好看的jQuery网站右侧固定在线客服代码.rar

    在网页设计中,为了提供更好的用户体验,很多网站都会选择在页面右侧设置一个固定的在线客服系统。这个"非常好看的jQuery网站右侧固定在线客服...对于学习和实践网页交互设计的开发者来说,这是一个很好的参考资料。

    简单jquery鼠标跟随左侧浮动菜单.zip

    对于初学者,这是一个很好的学习资源,可以借此理解如何将jQuery与CSS和HTML结合,实现动态交互效果。 总结来说,这个“简单jquery鼠标跟随左侧浮动菜单”实例展示了如何利用jQuery的事件处理和DOM操作功能创建一个...

    天猫jQuery左侧浮动折叠菜单_(固定浮动、智能定位、CSS3折叠)

    在IT行业中,网页交互设计是提升用户体验的关键环节之一,而jQuery作为一款强大的JavaScript库,为开发者提供了丰富...这是一个很好的学习案例,可以帮助开发者掌握Web前端开发中关于交互设计和响应式布局的基本技巧。

Global site tag (gtag.js) - Google Analytics