JS右下角弹窗两例

共10个文件

gif：3个

css：2个

html：2个

3星 · 超过75%的资源需积分: 50 98 浏览量 2017-11-21 16:26:57 上传评论 1 收藏 66KB RAR 举报

在网页设计和开发中，用户交互是至关重要的一个环节，而弹窗作为一种常见的用户提示方式，经常被用于显示消息、警告、确认等信息。本文将详细介绍两种实现JS右下角弹窗的方法，一种基于jQuery库，另一种则是使用原生JavaScript。 jQuery右下角弹窗是一种利用jQuery库高效简便实现弹窗的方式。jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。要创建右下角弹窗，首先需要在项目中引入jQuery库。接着，可以创建一个HTML结构来表示弹窗，并通过CSS进行样式设置，使其定位在页面的右下角。例如： ```html <div id="jquery_popup" style="display:none; position:fixed; bottom:20px; right:20px;"> 这是jQuery右下角弹窗的内容 <button id="close_popup">关闭</button> </div> ``` 然后，使用jQuery的事件监听和动画效果来控制弹窗的显示和隐藏： ```javascript $(document).ready(function() { $("#jquery_popup").fadeIn("slow"); $("#close_popup").click(function() { $("#jquery_popup").fadeOut("slow"); }); }); ``` 这段代码会在页面加载完成后渐显弹窗，并在点击“关闭”按钮时渐隐弹窗。接下来，我们探讨原生JavaScript实现右下角弹窗的方法。原生JavaScript虽然没有jQuery那么简洁，但提供了更多的灵活性和对性能的控制。同样构建HTML和CSS，然后使用JavaScript来操控弹窗的显示和隐藏： ```html <div id="native_popup" style="display:none; position:fixed; bottom:20px; right:20px;"> 这是原生JS右下角弹窗的内容 <button onclick="closeNativePopup()">关闭</button> </div> ``` ```javascript function showNativePopup() { var popup = document.getElementById('native_popup'); popup.style.display = 'block'; setTimeout(function() { popup.style.opacity = 1; }, 10); } function closeNativePopup() { var popup = document.getElementById('native_popup'); popup.style.opacity = 0; setTimeout(function() { popup.style.display = 'none'; }, 500); } window.onload = function() { showNativePopup(); } ``` 这个例子中，`showNativePopup`函数用于显示弹窗，而`closeNativePopup`则负责关闭。我们使用了`setTimeout`来模拟动画效果。总结来说，无论是使用jQuery还是原生JavaScript，实现右下角弹窗都涉及到HTML布局、CSS样式和JavaScript的事件处理。jQuery提供了一种更简洁的方式来实现动画和事件绑定，而原生JavaScript则允许开发者深入定制和优化性能。根据项目需求和团队技能，可以选择适合的方法来实现这种常见的用户交互功能。

资源推荐

资源详情

资源评论

收起资源包目录

右下角弹窗两例.rar （10个子文件）

jQuery右下角弹窗

jiaoben3272

index.html 2KB

images

imgad.jpg 29KB

jquery-1.8.3.min.js 91KB

ads.js 3KB

css

main.css 38B

原生js右下角弹窗

jiaoben1937

index.html 2KB

images

tanchu_03.gif 196B

tanchu_10.gif 1KB

tanchu_05.gif 1KB

css

style.css 1KB

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery右下角悬浮广告展示代码</title>  <script src="js/jquery-1.8.3.min.js"></script> <script src="js/ads.js"></script> <style> html,body,h2{margin:0;} img{border:none} #pop{background:#fff;width:300px; height:282px;font-size:12px;position:fixed;right:0;bottom:0;} #popHead{line-height:32px;background:#f6f0f3;border-bottom:1px solid #e0e0e0;font-size:12px;padding:0 0 0 10px;} #popHead h2{font-size:14px;color:#666;line-height:32px;height:32px;} #popHead #popClose{position:absolute;right:10px;top:1px;} #popHead a#popClose:hover{color:#f00;cursor:pointer;} </style> </head> <body> dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd dd <div id="main"> <div id="pop" style="display:none;"> <div id="popHead"> <a id="popClose" title="关闭">关闭</a> <h2>赞助广告</h2> </div> <div id="popContent"> <a href="http://www.w3school.com.cn" target="_blank"> <img src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif"> <img src="http://www.w3school.com.cn/i/ct_html5_canvas_image.gif"> 测试 </a> </div> </div> <script> var popad=new Pop(); </script> </div> </body> </html>

评论收藏

内容反馈