一款jQuery网页提示插件PowerTip.js,页面给出了多种提示特效,有从不同方位提示的,有鼠标滑过固定区域提示的等等,具体看演示页面的效果。
页面的head部分,需引入插件的样式文件,简单设置演示页面的样式,并引入jQuery库和提示插件,代码如下:
<link type="text/css" rel="stylesheet" href="css/jquery.powertip-dark.min.css" />
<style type="text/css">
#placement-examples div { text-align: center; }
#placement-examples input { margin: 10px; padding: 10px; }
#placement-examples .east { margin-left: 450px; }
#mousefollow-examples div { background-color: #EEE; text-align: center; line-height: 400px; margin: 0 auto; height: 400px; width: 100%; }
#mouseon-examples div { background-color: #EEE; text-align: center; width: 400px; padding: 40px; }
#events-examples input, #api-examples input { margin: 10px; padding: 10px 30px; }
</style>
<!-- Include jQuery and PowerTip -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.powertip.js"></script>
页面的body部分,分别设置好不同效果的的容器、内容和对应参数等,代码如下:
<h1>jQuery网页提示插件PowerTip.js</h1>
<!-- Placement Examples -->
<div id="placement-examples">
<h2>Placement examples</h2>
<div>
<input type="button" class="north-west-alt" value="North West Alt" title="North west alt placement" />
<input type="button" class="north-west" value="North West" title="North west placement" />
<input type="button" class="north" value="North" title="North placement" />
<input type="button" class="north-east" value="North East" title="North east placement" />
<input type="button" class="north-east-alt" value="North East Alt" title="North east alt placement" /><br />
<input type="button" class="west" value="West" title="West placement" />
<input type="button" class="east" value="East" title="East placement" /><br />
<input type="button" class="south-west-alt" value="South West Alt" title="South west alt placement" />
<input type="button" class="south-west" value="South West" title="South west placement" />
<input type="button" class="south" value="South" title="South placement" />
<input type="button" class="south-east" value="South East" title="South east placement" />
<input type="button" class="south-east-alt" value="South East Alt" title="South east alt placement" />
</div>
</div>
<script type="text/javascript">
$(function() {
// placement examples
$('.north').powerTip({ placement: 'n' });
$('.east').powerTip({ placement: 'e' });
$('.south').powerTip({ placement: 's' });
$('.west').powerTip({ placement: 'w' });
$('.north-west').powerTip({ placement: 'nw' });
$('.north-east').powerTip({ placement: 'ne' });
$('.south-west').powerTip({ placement: 'sw' });
$('.south-east').powerTip({ placement: 'se' });
$('.north-west-alt').powerTip({ placement: 'nw-alt' });
$('.north-east-alt').powerTip({ placement: 'ne-alt' });
$('.south-west-alt').powerTip({ placement: 'sw-alt' });
$('.south-east-alt').powerTip({ placement: 'se-alt' });
});
</script>
<!-- Mouse-Follow Example -->
<div id="mousefollow-examples">
<h2>Mouse follow example</h2>
<div title="Mouse follow">
The PowerTip for this box will follow the mouse.
</div>
</div>
<script type="text/javascript">
$(function() {
// mouse follow example
$('#mousefollow-examples div').powerTip({ followMouse: true });
});
</script>
<!-- Mouse on to tooltip example -->
<div id="mouseon-examples">
<h2>Mouse on to tooltip example</h2>
<div>
The PowerTip for this box will appear on the right and you will be able to interact with its content.
</div>
</div>
<script type="text/javascript">
$(function() {
// mouse-on example
var mouseOnDiv = $('#mouseon-examples div');
var tipContent = $(
'<p><b>Here is some content</b></p>' +
'<p> Maybe a link </p>'
);
mouseOnDiv.data('powertipjq', tipContent);
mouseOnDiv.powerTip({
placement: 'e',
mouseOnToPopup: true
});
});
</script>
<!-- Custom event examples -->
<div id="events-examples">
<h2>Custom show and hide event examples</h2>
<input id="click-click-example" type="button" title="Show and hide on click" value="Show and hide tooltip on click" />
<input id="mouseenter-mouseenter-example" type="button" title="Show and hide on mouse enter" value="Show and hide tooltip on mouse enter" />
<input id="mouseenter-clickMouseleave-example" type="button" title="Show on mouse enter, hide on click and mouse leave" value="Show tooltip on mouse enter, hide on click and mouse leave" />
<input id="click-null-example" type="button" title="Show on click" value="Show tooltip on click" />
</div>
<script type="text/javascript">
$(function() {
// click-click example
$('#click-click-example').powerTip({
openEvents: [ 'click' ],
closeEvents: [ 'click' ]
});
// mouseenter-mouseenter example
$('#mouseenter-mouseenter-example').powerTip({
openEvents: [ 'mouseenter' ],
closeEvents: [ 'mouseenter' ]
});
// mouseenter-click example
$('#mouseenter-clickMouseleave-example').powerTip({
openEvents: [ 'mouseenter' ],
closeEvents: [ 'click', 'mouseleave' ]
});
// click-null example
$('#click-null-example').powerTip({
openEvents: [ 'click' ],
closeEvents: []
});
});
</script>
<!-- API Examples -->
<div id="api-examples">
<h2>API examples</h2>
<input id="api-open" type="button" value="Show mouse-on tooltip" />
<input id="api-close" type="button" value="Close any open tooltips" />
<input id="api-manual" type="button" title="Manual Tooltip" value="Manually applied tooltip (click)" />
<div id="api-manual-mouse">
Delegated manual mouseover, with lazy-loaded tooltip:
<input type="button" value="Child 1" />
<input type="button" value="Child 2" />
</div>
</div>
<script type="text/javascript">
$(function() {
// api examples
$('#api-open').on('click', function() {
$.powerTip.show($('#mouseon-examples div'));
});
$('#api-close').on('click', function() {
$.powerTip.hide();
});
$('#api-manual')
.powerTip({
manual: true
})
.on('click', function() {
$(this).powerTip('show');
})
.on('mouseleave', function() {
$(this).powerTip('hide', true);
});
$('#api-manual-mouse')
.on('mouseenter', 'input', function(evt) {
if (!$(this).data('powertip')) {
$(this)
.data('powertip', 'Tooltip added: ' + (new Date()))
.powerTip({
manual: true
});
}
$(this).powerTip('show', evt);
})
.on('mouseleave', 'input', function() {
$(this).powerTip('hide');
});
});
</script>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791