jQuery自定义方向气泡提示框代码.zip资源-CSDN文库

共9个文件

js：4个

css：2个

png：1个

版权申诉

javascript

html5

jQuery

115 浏览量 2022-11-24 12:30:47 上传评论收藏 84KB ZIP 举报

资源推荐

资源详情

资源评论

收起资源包目录

jQuery自定义方向气泡提示框代码.zip （9个子文件）

jQuery自定义方向气泡提示框代码

jQuery自定义方向气泡提示框代码.jpg 27KB

jiaoben4308

css

grumble.min.css 1KB

grumble.css 2KB

images

bubble-sprite.png 25KB

index.html 6KB

jquery-1.11.0.min.js 94KB

jquery.grumble.js 8KB

jquery.grumble.min.js 7KB

Bubble.js 5KB

<!DOCTYPE html>     <html lang="zh">  <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery自定义方向气泡提示框代码 - 网页模板</title> <link rel="stylesheet" href="css/grumble.min.css?v=5"> <style> body { font-size: 16px; line-height: 24px; background: #fff; color: #330; } #container { width: 690px; margin: 50px auto; } p, li { margin: 16px 0 16px 0; width: 550px; } p.break { margin-top: 35px; } .contact { background: transparent; color: #441; } .contact:active, .contact:hover { background: transparent; } h1#demo1{ margin-top: 40px; display:inline-block; } b.header { font-size: 18px; } span.alias { font-size: 14px; font-style: italic; margin-left: 20px; } table { margin: 16px 0; padding: 0; } tr, td { margin: 0; padding: 0; } td { padding: 9px 15px 9px 0; } td.definition { line-height: 18px; font-size: 14px; } code, pre, tt { font-family: Consolas, "Lucida Console", monospace; font-size: 12px; line-height: 18px; color: #444; } code { margin-left: 20px; } pre { font-size: 12px; padding: 2px 0 2px 12px; border-left: 6px solid hotpink; margin: 0px 0 10px; } li pre { padding: 0; border-left: 0; margin: 6px 0 6px 0; } #diagram { margin: 20px 0 0 0; } </style> <style> .ex { display:inline-block; width: 150px; padding-left:10px; height:30px; border:1px solid #ddd; font-size: 12px; } .grumble-button { font-size:11px; } </style> </head> <body> <div id="container"> <header> <h1 id="demo1">grumble.js</h1> </header> <div id="main" role="main"> <h2>Examples</h2> <p>下面是一组气泡动画效果，<a href="#" id="ex1">点击这里</a>来查看效果。</p> <span class="ex" id="grumble1">没有文字</span> <span class="ex" id="grumble2">不同的样式</span> <span class="ex" id="grumble3">带关闭按钮</span> <span class="ex" id="grumble4">大气泡效果</span> <br/><br/> <pre> $('#grumble1').grumble( { text: '', angle: 200, distance: 3, showAfter: 1000, hideAfter: 2000 } ); $('#grumble2').grumble( { text: 'Ohh, blue...', angle: 180, distance: 0, showAfter: 2000, type: 'alt-', hideAfter: 2000 } ); $('#grumble3').grumble( { text: 'Click me!', angle: 150, distance: 3, showAfter: 3000, hideAfter: false, hasHideButton: true, buttonHideText: 'Pop!' } ); $('#grumble4').grumble( { text: 'Whoaaa, this is a lot of text that i couldn\'t predict', angle: 85, distance: 50, showAfter: 4000, hideAfter: 2000, } ); );</pre> </div> <p> Can I haz callbacks? Sure. </p> <pre> $('#myElement').grumble({ showAfter: 1000, hideAfter: 2000, onShow: function(){ console.log('triggered when show animation completes'); }, onBeginHide: function(){ console.log('triggered when hide animation begins'); }, onHide: function () { console.log('triggered when hide animation completes'); } }); </pre> <h2 id="thedarkside">The darkside of grumble.js</h2> <p> grumble.js 暴露了三个方法：'show'、'hide' 和 'adjust'。adjust方法可以用来更新grumble的位置或角度。 </p> <p> Warning: Clicking on this link may damage your <abbr title="User Experience">UX</abbr>. <a href="#" id="darkside">点击这里看看(:p)</a> </p> <pre> $('#darkside').click(function(e){ var $me = $(this), interval; e.preventDefault(); $me.grumble( { angle: 130, text: 'Look at me!', type: 'alt-', distance: 10, hideOnClick: true, onShow: function(){ var angle = 130, dir = 1; interval = setInterval(function(){ (angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir)); $me.grumble('adjust',{angle: angle}); },25); }, onHide: function(){ clearInterval(interval); } } ); }); </pre> </div>  <script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="js/jquery.grumble.min.js?v=7"></script> <script> $('h1#demo1').grumble( { text: 'Bubble-tastic!', angle: 85, distance: 100, showAfter: 500 } ); var isSequenceComplete = true; $('#ex1').click(function(e){ e.preventDefault(); if(isSequenceComplete === false) return true; isSequenceComplete = false; $('#grumble1').grumble( { text: '', angle: 200, distance: 3, showAfter: 1000, hideAfter: 2000 } ); $('#grumble2').grumble( { text: 'Ohh, blue...', angle: 180, distance: 0, showAfter: 2000, type: 'alt-', hideAfter: 2000 } ); $('#grumble3').grumble( { text: 'Click me!', angle: 150, distance: 3, showAfter: 3000, hideAfter: false, hasHideButton: true, // just shows the button buttonHideText: 'Pop!' } ); $('#grumble4').grumble( { text: 'Whoaaa, this is a lot of text that i couldn\'t predict', angle: 85, distance: 50, showAfter: 4000, hideAfter: 2000, onHide: function(){ isSequenceComplete = true; } } ); }); $('#darkside').click(function(e){ var $me = $(this), interval; e.preventDefault(); $me.grumble( { angle: 130, text: 'Look at me!', type: 'alt-', distance: 10, hideOnClick: true, onShow: function(){ var angle = 130, dir = 1; interval = setInterval(function(){ (angle > 220 ? (dir=-1, angle--) : ( angle < 130 ? (dir=1, angle++) : angle+=dir)); $me.grumble('adjust',{angle: angle}); },25); }, onHide: function(){ clearInterval(interval); } } ); }); </script> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p> <p>来源：<a href="http://www.moobnn.com/" target="_blank">网页模板</a></p> </div> </body> </html>

评论收藏

内容反馈

版权申诉