wow 求这视频里的浮动战斗信息插件，包括控制技能提示之类的_百度知道jquery（101）
一、加载页面上元素
HTML代码：
&span style=&font-size:13&&&a id=&trigger1& href=&javascript:;& rel=&targetBox&&默认rel加载&/a&&/span&
&span style=&font-size:13&&$(&#trigger1&).powerFloat();&/span&
HTML代码：
&span style=&font-size:13&&&a id=&trigger2& href=&###&&target参数加载&/a&&/span&
&span style=&font-size:13&&$(&#trigger2&).powerFloat({
target: $(&#targetBox&)});&/span&
HTML代码：
&span style=&font-size:13&&&a id=&trigger3& href=&###&&target参数为选择器&/a&&/span&
&span style=&font-size:13&&$(&#trigger3&).powerFloat({
target: &.target_box&});&/span&
二、Ajax加载外部元素
HTML代码：
&span style=&font-size:13&&&a id=&trigger4& href=&javascript:;& rel=&/image/study/s/s256/mm1.jpg&&rel属性显示图片&/a&&/span&
&span style=&font-size:13&&$(&#trigger4&).powerFloat({
targetMode: &ajax&});&/span&
HTML代码：
&span style=&font-size:13&&&a id=&trigger5& href=&javascript:;&&target参数为图片地址&/a&&/span&
&span style=&font-size:13&&$(&#trigger5&).powerFloat({
target: &/image/study/s/s512/mm2.jpg&,
targetMode: &ajax&});&/span&
加载外部HTML片段：
HTML代码：
&span style=&font-size:13&&&button id=&trigger6&&点击切换显示&/button&&/span&
&span style=&font-size:13&&$(&#trigger6&).powerFloat({
eventType: &click&,
target: &/study/201009/html-load.html&,
targetMode: &ajax&});&/span&
加载外部页面数据失败：
HTML代码：
&span style=&font-size:13&&&button id=&trigger7&&点击测试&/button&&/span&
&span style=&font-size:13&&$(&#trigger7&).powerFloat({
eventType: &click&,
target: &/&,
targetMode: &ajax&});&/span&
三、下拉列表的显示
纯文字列表下拉：
HTML代码：
&span style=&font-size:13&&&button id=&trigger8&&点击显示姓名列表▼&/button&&/span&
&span style=&font-size:13&&$(&#trigger8&).powerFloat({
width: &inherit&,
eventType: &click&,
target: [&唐丽霞&, &徐栋梁&, &成霞&, &王庆花&, &王腊梅&, &朱小丽&, &束方娟&, &吉回秀&, &陈阳&, &&a href='##'&更多 &&&/a&&],
targetMode: &list&});&/span&
带链接的文字下拉：
HTML代码：
&span style=&font-size:13&&&a id=&trigger9& href=&/wordpress/&&更多文章▼&/a&&/span&
&span style=&font-size:13&&$(&#trigger9&).powerFloat({
width: 250,
href: &##&,
text: &这是文章1的说&
href: &##&,
text: &啊，看，文章2&
href: &##&,
text: &啊啦，不好，我把文章3忘家里了！&
href: &##&,
text: &马萨噶，这就是传说中的...文章4...&
href: &##&,
text: &什么嘛，就是文章5，害我白期待一场&
targetMode: &list&});&/span&
HTML代码：
&span style=&font-size:13&&&a id=&trigger10& href=&#&&无列表数据显示&/a&&/span&
&span style=&font-size:13&&$(&#trigger10&).powerFloat({
targetMode: &list&});&/span&
四、简单提示的显示
输入密码：
再次输入：
HTML代码：
&span style=&font-size:13&&输入密码：&input class=&pwdTrigger& type=&password& placeholder=&6~20个字符& /&再次输入：&input class=&pwdTrigger& type=&password& placeholder=&输入与上面一样的密码& /&&/span&
&span style=&font-size:13&&$(&.pwdTrigger&).powerFloat({
eventType: &focus&,
targetMode: &remind&,
targetAttr: &placeholder&,
position: &1-4&});&/span&
点击确定按钮或失去焦点后显示提示(文本框数据留空/输入奇怪字符等)：
HTML代码：
&span style=&font-size:13&&&input id=&posTrigger1& type=&text& /& &button id=&trigger11&&确定&/button&&/span&
&span style=&font-size:13&&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();
$.powerFloat.hide();
}};$(&#trigger11&).bind(&click&, fnPosTri);$(&#posTrigger1&).bind(&blur&, fnPosTri);&/span&
四、自定义浮动提示
模拟title的tip提示显示：
HTML代码：
&span style=&font-size:13&&&a class=&tipTrigger& href=&###& tip=&摸我&&摸我&/a&&a class=&tipTrigger& href=&###& tip=&我也要&&我也要&/a&&a class=&tipTrigger& href=&###& tip=&还有我&&还有我&/a&&/span&
&span style=&font-size:13&&$(&.tipTrigger&).powerFloat({
offsets: {
showDelay: 200,
hoverHold: false,
targetMode: &tip&,
targetAttr: &tip&,
position: &3-4&});&/span&
右上角固定位置的操作提示层(ajax请求中提示，页面跳转中提示等)：
HTML代码：
&span style=&font-size:13&&&span id=&targetFixed& class=&target_fixed&&&/span&&button class=&operateTrigger&&登录&/button&&button class=&operateTrigger&&提交&/button&&button class=&operateTrigger&&刷新&/button&&/span&
&span style=&font-size:13&&.target_fixed { height:25 padding:1 position: _position: top:0; right:0; }&/span&
$(&.operateTrigger&).click(function() {
var txt = $(this).text();
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&,
zIndex: 99
}).height($(document).height());
//显示操作提示，最关键核心代码
$(&#targetFixed&).powerFloat({
eventType: null,
targetMode: &doing&,
target: &正在& + txt + &中...&,
position: &1-2&
//定时关闭，测试用
setTimeout(function() {
$(&#overLay&).remove();
$.powerFloat.hide();
五、自定义装载容器
自定义容器装载外部图片(无柔化投影)：
.custom_container{position: background-color:rgba(0, 0, 0, .5); background-color:#999\9;}
.custom_container img{padding:0; position: top:-5 left:-5}
HTML代码：
&span style=&font-size:13&&&div id=&customContainer& class=&custom_container&&&/div&&input id=&trigger12& type=&button& src=&/image/study/s/s256/mm10.jpg& value=&点击我& /&&/span&
&span style=&font-size:13&&$(&#trigger12&).powerFloat({
eventType: &click&,
targetMode: &ajax&,
targetAttr: &src&,
container: $(&#customContainer&),
reverseSharp: true});&/span&
自定义容器装载页面元素：
HTML代码：
&span style=&font-size:13&&&input id=&trigger13& type=&button& src=&targetBox& value=&点击我& /&&/span&
&span style=&font-size:13&&$(&#trigger13&).powerFloat({
eventType: &click&,
targetMode: null,
targetAttr: &src&,
container: $(&#customContainer&)});&/span&
六、鼠标跟随效果
缩略图显示大图，同时鼠标跟随(垂直方向)：
&span style=&font-size:13&&.dib { display: inline- }&/span&
HTML代码：
&span style=&font-size:13&&&a class=&dib& id=&trigger14& href=&/image/study/s/s256/mm1.jpg&&
&img src=&/image/study/s/s128/mm1.jpg& /&&/a&&/span&
&span style=&font-size:13&&$(&#trigger14&).powerFloat({
targetMode: &ajax&,
targetAttr: &href&,
hoverFollow: &y&,
position: &6-8&});&/span&
缩略图显示大图，同时鼠标跟随(水平方向)：
&span style=&font-size:13&&.dib { display: inline- }&/span&
HTML代码：
&span style=&font-size:13&&&a class=&dib& id=&trigger15& href=&/image/study/s/s256/mm1.jpg&&
&img src=&/image/study/s/s128/mm1.jpg& /&&/a&&/span&
&span style=&font-size:13&&$(&#trigger15&).powerFloat({
targetMode: &ajax&,
targetAttr: &href&,
hoverFollow: &x&,
hoverHold: false,
position: &5-7&});&/span&
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：369387次
积分：5815
积分：5815
排名：第3130名
原创：193篇
转载：190篇
评论：34条
(1)(1)(1)(1)(3)(6)(4)(3)(9)(10)(1)(3)(14)(18)(23)(20)(39)(50)(1)(22)(13)(8)(21)(2)(28)(3)(17)(12)(10)(31)(1)(6)(1)dreamwear中怎么安装Jquery插件使之智能提示 ？_百度知道用js怎么把&字符换成&&amp:&-javascript技巧
var re = /&/g; var str = "?id=333&r=999&o=000";
str.replace(re,"&");
var re = /&/g; var str = "?id=333&r=999&o=000"; str.replace(re,"&");}