jquery 기포 알림 효과
68228 단어 jquery
코드 주석 은 가능 한 한 상세 하고 더 이상 말 하지 않 겠 습 니 다.
jquery 를 쓰 면 쓸 수록 좋아 하 는데...
bubble.js:
/*
* @date: 2010-5-30 11:57:22
* @author:
* Depends:
* jquery.js
*
* function:
* use:$("selectors").bubble({fn:getdata, width:width, height:height});
* bubble ，
* fn , fn
* div :
* width\height contents width\height
* width left.width + contents.width + right.width
* height top.height + contents.height + bottom.height
*/
(
function
($) {
$.fn.bubble
=
function
(options) {
Bubble
=
function
(){
this
.defaults
=
{
distance :
10
,
time :
250
,
hideDelay :
500
,
width:
100
,
height:
100
};
this
.options
=
$.extend(
this
.defaults, options);
this
.hideDelayTimer
=
new
Array();
this
.shown
=
new
Array();
this
.beingShown
=
new
Array();
this
.popup
=
new
Array();
this
.trigger
=
new
Array();
this
.makebubble
=
function
(w, h){
var
tpl
=
$(
'
<div class="bubble-popup"></div>
'
).append(
'
<div class="topleft"></div>
'
).append(
'
<div class="top"></div>
'
)
.append($(
'
<div class="topright"></div>
'
)).append(
'
<div class="left"></div>
'
)
.append(
'
<div class="contents"></div>
'
).append(
'
<div class="right"></div>
'
)
.append(
'
<div class="bottomleft"></div>
'
)
.append($(
'
<div class="bottom"></div>
'
)
.append($(
'
<div class="bottomtail"></div>
'
)))
.append(
'
<div class="bottomright"></div>
'
).appendTo(
'
body
'
);
tpl.width(w + 38);
tpl.find(
'
.left, .right, .contents
'
).each(
function
(){$(
this
).height(h)});
tpl.find(
'
.top, .bottom, .contents
'
).each(
function
(){$(
this
).width(w)});
return
tpl;
};
this
.add
=
function
(triggers, options){
//
options add , fn, width height
//
console.debug("length:"+triggers.length);
var
t
=
this
.trigger.length;
//
trigger
for
(
var
j
=
0
;j
<
triggers.length;j
++
)
this
.trigger.push(triggers[j]);
//
console.debug("trigger.length:" + this.trigger.length);
var
hout
=
this
.handleout;
var
hover
=
this
.handleover;
var
obj
=
this
;
//
triggers.each(
function
(ind){
$(
this
).unbind(
'
mouseover
'
).mouseover(
function
(){
hover(t
+
ind, obj, options);
}).unbind(
'
mouseout
'
).mouseout(
function
(){
hout(t
+
ind, obj, options);
});
});
};
this
.handleover
=
function
(i, obj, options){
//
console.debug("hideDelayTimer.length:" + obj.hideDelayTimer.length);
//
if
(obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
if
(obj.beingShown[i]
||
obj.shown[i]) {
//
return
;
}
else
{
var
trigger
=
$(obj.trigger[i]);
//
obj.beingShown[i]
=
true
;
//
obj.popup[i]
=
obj.makebubble(options.width
||
obj.options.width, options.height
||
obj.options.height);
//
obj.popup[i].mouseover(
function
(){obj.handleover(i, obj)}).mouseout(
function
(){obj.handleout(i, obj)});
//
fn
obj.options.fn(obj.trigger[i],
function
(data){
obj.popup[i].find(
'
.contents
'
).text(data);
});
//
,
obj.popup[i].css({
top: trigger.offset().top
-
obj.popup[i].height(),
left: trigger.offset().left
+
trigger.width()
/
2 - obj.popup[i].width()
/
2
,
display:
'
block
'
}).animate(
//
IE PNG , IE
$.browser.msie
?
{
top:
'
-=
'
+
obj.options.distance
+
'
px
'
}:{
top:
'
-=
'
+
obj.options.distance
+
'
px
'
,
opacity:
1
}, obj.options.time,
'
swing
'
,
function
() {
obj.beingShown[i]
=
false
;
obj.shown[i]
=
true
;
});
}
return
false
;
};
this
.handleout
=
function
(i, obj, options){
//
console.debug("hideDelayTimer["+i+"]:"+obj.hideDelayTimer[i]);
//
if
(obj.hideDelayTimer[i]) clearTimeout(obj.hideDelayTimer[i]);
obj.hideDelayTimer[i]
=
setTimeout(
function
() {
obj.hideDelayTimer[i]
=
null
;
try{
obj.popup[i].animate(
$.browser.msie
?
{
top:
'
-=
'
+
obj.options.distance
+
'
px
'
}:{
top:
'
-=
'
+
obj.options.distance
+
'
px
'
,
opacity:
0
//
}, obj.options.time,
'
swing
'
,
function
() {
obj.shown[i]
=
false
;
obj.popup[i].css(
'
display
'
,
'
none
'
);
obj.popup[i]
=
null
;
});}catch(e){};
}, obj.options.hideDelay);
return
false
;
};
};
$.bubble
=
new
Bubble();
//
$.bubble.add(
this
, options);
};
})(jQuery);
사용 할 스타일:
<style type="text/css" media="screen">
<!--
*
{
margin
:
0
;
padding
:
0
;
}
body
{
padding
:
10px
;
}
h1
{
margin
:
14px 0
;
font-family
:
'Trebuchet MS', Helvetica
;
}
.bubbletrigger
{
}
/*
Bubble pop-up
*/
.bubble-popup
{
position
:
absolute
;
display
:
none
;
z-index
:
50
;
border-collapse
:
collapse
;
}
.bubble-popup .topleft
{
width
:
19px
;
height
:
15px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-1.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-1.png')
;
/*
IE6
*/
}
.bubble-popup .top
{
width
:
100px
;
height
:
15px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-2.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-2.png')
;
/*
IE6
*/
}
.bubble-popup .topright
{
width
:
19px
;
height
:
15px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-3.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-3.png')
;
/*
IE6
*/
}
.bubble-popup .left
{
clear
:
left
;
width
:
19px
;
height
:
30px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-4.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-4.png')
;
/*
IE6
*/
}
.bubble-popup .contents
{
white-space
:
normal
;
word-break
:
break-all
;
float
:
left
;
font-size
:
12px
;
line-height
:
1.2em
;
background-color
:
#fff
;
color
:
#66BDED
;
font-family
:
"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans",
sans-serif
;
}
.bubble-popup .right
{
width
:
19px
;
height
:
30px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-5.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-5.png')
;
/*
IE6
*/
}
.bubble-popup .bottomleft
{
clear
:
left
;
width
:
19px
;
height
:
15px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-6.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-6.png')
;
/*
IE6
*/
}
.bubble-popup .bottom
{
width
:
100px
;
height
:
15px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-7.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/bubble/bubble-7.png')
;
/*
IE6
*/
text-align
:
center
;
}
.bubble-popup .bottomtail
{
width
:
30px
;
height
:
29px
;
margin
:
0 auto
;
display
:
block
;
background-image
:
url(../images/bubble/bubble-tail2.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-tail2.png')
;
/*
IE6
*/
}
.bubble-popup .bottomright
{
width
:
19px
;
height
:
15px
;
float
:
left
;
background-image
:
url(../images/bubble/bubble-8.png)
;
/*
ie6PNG bug
*/
_background-image
:
none
;
/*
IE6
*/
_filter
:
progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=noscale, src='images/bubble/bubble-8.png')
;
/*
IE6
*/
}
-->
</style>
사용 방법: (사용 하 는 그림 스타일 img.zip, 경로 에 주의 하 세 요. 그림 이 없 으 면 보기 싫 습 니 다.)
<
script
src
="../js/jquery-1.4.2.min.js"
type
="text/javascript"
></
script
>
<
script
src
="../js/bubble-1.0.js"
type
="text/javascript"
></
script
>
<
script
type
="text/javascript"
>
<!--
aa
=
function
(obj, callback){
$.ajax({
type :
'
POST
'
,
data : {word:$(obj).attr(
'
alt
'
),rand:Math.random()},
url :
'
http://localhost/xun/ajax.svl?method=getdetailinfo
'
,
dataType :
'
text
'
,
timeout :
1000
,
success :
function
(data){
callback(data);
}
});
};
bb
=
function
(obj, callback){
$.ajax({
type :
'
POST
'
,
data : {word:$(obj).attr(
'
alt
'
),rand:Math.random()},
url :
'
http://localhost/xun/ajax.svl?method=getdetailinfo
'
,
dataType :
'
text
'
,
timeout :
1000
,
success :
function
(data){
callback(data
+
"
aaaa
"
);
}
});
};
$(
function
(){
$(
'
.bubbletrigger
'
).bubble({width:
150
, height:
100
, fn:aa});
$(
'
#a
'
).bubble({fn:bb});
});
//
-->
</
script
>
</
head
>
<
body
id
="page"
>
<
h1
>
jQuery Bubble Example
</
h1
>
<
div
>
<
br
/>
aaaaaaaaaa
<
br
/>
aaaaaaaaaaaaaaaaaaaa
<
br
/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaa
<
br
/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<
br
/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
<
br
/>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</
div
>
<
div
style
="padding-left:100px;"
>
<
img
class
="bubbletrigger"
alt
="a"
src
="../images/bubble/starburst.gif"
/>
<
img
class
="bubbletrigger"
alt
="b"
src
="../images/bubble/starburst.gif"
/>
<
img
class
="bubbletrigger"
alt
="c"
src
="../images/bubble/starburst.gif"
/>
<
img
class
="bubbletrigger"
alt
="d"
src
="../images/bubble/starburst.gif"
/>
<
img
id
="a"
alt
="e"
src
="../images/bubble/starburst.gif"
/>
</
div
>
</
body
>
servlet 는 문자열 만 되 돌려 주면 됩 니 다. 붙 이지 않 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
jQuery 전후 예이 기사에서는 jquery after() 및 before() 메소드의 예를 볼 것입니다. before() 메서드는 선택한 요소 앞에 지정된 콘텐츠를 삽입합니다. after() 메서드는 선택한 요소 뒤에 지정된 콘텐츠...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
