jquery 插件（四）精选动画仿flash插件2_excel同时插两个flash插件-优快云博客

本文链接：https://blog.youkuaiyun.com/brainwkernighan/article/details/6572667

本文展示了几个简易的弹窗与动画效果实例，包括泡泡弹窗、基本弹窗和导航菜单。通过简单的CSS和JavaScript，实现了弹窗的显示、隐藏及动画过渡，以及导航菜单的延迟淡出效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.codePop:这是一个简单的bubble effect的弹出框，有一些动画效果来展示，代码比较简单，可以不用单独的js。

js作用是控制显示和显示速度，css作用是将显示的框定位和层控制

<mce:style type="text/css" media="screen"></mce:style><style type="text/css" media="screen" mce_bogus="1"> * { margin: 0; padding: 0; } body { padding: 10px; } h1 { margin: 14px 0; font-family: 'Trebuchet MS', Helvetica; } p { margin: 14px 0; font-family: 'Trebuchet MS', Helvetica; } .bubbleInfo { position: relative; top: 150px; left: 100px; width: 500px; } .trigger { position: absolute; } /* Bubble pop-up */ .popup { position: absolute; display: none; z-index: 50; border-collapse: collapse; } .popup td.corner { height: 15px; width: 19px; } .popup td#topleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-1.png); } .popup td.top { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-2.png); } .popup td#topright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-3.png); } .popup td.left { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-4.png); } .popup td.right { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-5.png); } .popup td#bottomleft { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-6.png); } .popup td.bottom { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-7.png); text-align: center;} .popup td.bottom img { display: block; margin: 0 auto; } .popup td#bottomright { background-image: url(http://static.jqueryfordesigners.com/demo/images/coda/bubble-8.png); } .popup table.popup-contents { font-size: 12px; line-height: 1.2em; background-color: #fff; color: #666; font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", sans-serif; } table.popup-contents th { text-align: right; text-transform: lowercase; } table.popup-contents td { text-align: left; } tr#release-notes th { text-align: left; text-indent: -9999px; background: url(http://jqueryfordesigners.com/demo/images/coda/starburst.gif) no-repeat top right; height: 17px; } tr#release-notes td a { color: #333; }</style> <mce:script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" mce_src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body id="page"> <h1>Coda Bubble Example</h1> <p>This shows a demonstration of the 'puff' popup bubble effect as seen over the download link on the <a href="http://www.panic.com/coda/" mce_href="http://www.panic.com/coda/">Coda web site</a>.</p> <p>Roll the mouse over and out from the download image to see the popup fade in and out of view, while gently gliding upwards.</p> <p><a href="http://jqueryfordesigners.com/coda-popup-bubbles" mce_href="http://jqueryfordesigners.com/coda-popup-bubbles">Read the article, and see the screencast this demonstration relates to</a></p> <p><small>Note that the transparency doesn't work in IE - this is the same on the Coda web site where the images were sourced.</small></p> <div class="bubbleInfo"> <div> <img class="trigger" src="http://jqueryfordesigners.com/demo/images/coda/nav-download.png" mce_src="http://jqueryfordesigners.com/demo/images/coda/nav-download.png" id="download" /> </div> <table id="dpop" class="popup"> <tbody><tr> <td id="topleft" class="corner"></td> <td class="top"></td> <td id="topright" class="corner"></td> </tr> <tr> <td class="left"></td> <td><table class="popup-contents"> <tbody><tr> <th>File:</th> <td>coda 1.1.zip</td> </tr> <tr> <th>Date:</th> <td>11/30/07</td> </tr> <tr> <th>Size:</th> <td>17 MB</td> </tr> <tr> <th>Req:</th> <td>Mac OS X 10.4+</td> </tr> <tr id="release-notes"> <th>Read the release notes:</th> <td><a title="Read the release notes" href="./releasenotes.html" mce_href="releasenotes.html">release notes</a></td> </tr> </tbody></table> </td> <td class="right"></td> </tr> <tr> <td class="corner" id="bottomleft"></td> <td class="bottom"><img width="30" height="29" alt="popup tail" src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png" mce_src="http://static.jqueryfordesigners.com/demo/images/coda/bubble-tail2.png"/></td> <td id="bottomright" class="corner"></td> </tr> </tbody></table> </div>

2.simpleModal basic

simpleModal是一个弹出框，有默认的css和js可供修改，可以弹出html，弹出文档结构，页面中的内容或者弹出我们所想要的内容，使用起来比较简单。

把所需要的js引入后，只要加载下面这段js即可达到效果：

jQuery(function ($) { // Load dialog on page load //$('#basic-modal-content').modal(); // Load dialog on click $('#basic-modal .basic').click(function (e) { //$.modal('<p><b>HTML</b> elements</p>'); // HTML $('#basic-modal-content').modal(); $.modal(document.getElementById('basicModalContent')); return false; }); });

3.Smooth Navigational Menu

navigation栏具有延迟淡出效果，实现起来也很简单，有水平和竖直两种方式，两个css，js包含后，用以下的js语句既可以实现：

ddsmoothmenu.init({ //ddsmoothmenu为js定义变量 mainmenuid: "smoothmenu1", //menu DIV id orientation: 'h', //Horizontal or vertical menu: Set to "h" or "v" classname: 'ddsmoothmenu', //class added to menu's outer DIV //customtheme: ["#1c5a80", "#18374a"], contentsource: "markup" //"markup" or ["container_id", "path_to_menu_file"] })

网址：http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm