jquery底部弹出广告（兼容）资源-CSDN文库

共4个文件

html：2个

js：1个

jpg：1个

jquery

底部弹出广告

4星 · 超过85%的资源需积分: 49 117 浏览量 2014-01-09 08:59:17 上传评论收藏 193KB RAR 举报

在IT行业中，jQuery是一种广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。本教程将详细讲解如何利用jQuery实现一个兼容各种浏览器的底部弹出广告功能。我们需要了解jQuery的基本用法。jQuery通过选择器（如$("#id")或$(".class")）选取DOM元素，然后对这些元素执行操作。在这个底部弹出广告的场景中，我们可能需要选取页面底部的某个特定元素，如一个div，作为广告容器。 1. **创建广告容器** 在HTML中，我们可以创建一个固定在底部的div元素，用于显示广告。例如： ```html <div id="bottomAd" style="position: fixed; bottom: 0; width: 100%; text-align: center;"></div> ``` 这个div将在页面底部占据整个宽度，并居中显示内容。 2. **加载jQuery库** 在HTML文件中，我们需要引入jQuery库，这通常通过CDN链接完成： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` 3. **编写jQuery代码** 接下来，我们编写jQuery代码来控制广告的显示和消失。可以使用`.show()`和`.hide()`方法来实现这一目标。同时，可以设置动画效果，比如淡入淡出，使用户体验更佳。以下是一个简单的示例： ```javascript $(document).ready(function() { var adDelay = 5000; // 广告显示后自动消失的延迟时间，单位为毫秒 // 创建广告内容，这里可以是HTML字符串或动态生成的内容 var adContent = '<p>这是一个底部弹出广告</p>'; // 初始化时隐藏广告 $('#bottomAd').hide(); // 在页面加载完成后显示广告 $('#bottomAd').html(adContent).fadeIn(500); // 淡入效果 // 设置广告自动消失 setTimeout(function() { $('#bottomAd').fadeOut(500, function() { // 淡出效果 $(this).html(''); // 清空广告内容 }); }, adDelay); }); ``` 4. **添加控制按钮** 为了允许用户手动控制广告的显示和关闭，我们还可以添加控制按钮。例如，一个关闭按钮： ```html <button id="closeAd">关闭广告</button> ``` 然后在jQuery代码中添加相应的事件监听器： ```javascript $('#closeAd').click(function() { $('#bottomAd').fadeOut(500, function() { $(this).html(''); }); }); ``` 5. **浏览器兼容性** jQuery库本身具有很好的浏览器兼容性，可以支持大部分现代和旧版浏览器。然而，对于某些特定的CSS属性（如`position: fixed`）和动画效果，可能需要检查并适配旧版IE浏览器。可以使用条件注释或者polyfill库（如Modernizr）来解决这些问题。 6. **优化与测试** 在实现功能后，进行充分的测试，确保在不同的浏览器和设备上都能正常工作。考虑性能优化，避免过度使用动画导致页面卡顿。通过以上步骤，我们就能够创建一个兼容多浏览器的jQuery底部弹出广告。记住，用户体验至关重要，因此在设计广告时要尽量减少对用户浏览网页的干扰，同时提供清晰的关闭选项。

资源推荐

资源详情

资源评论

收起资源包目录

.rar （4个子文件）

底部弹出效果

yuandan.jpg 181KB

test.html 4KB

jquery-1.7.1.min.js 92KB

bottom_pop.html 4KB

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>测试</title> <style type="text/css"> .divCss{ padding:0px; height:25px; overflow:hidden; position:absolute; } .contentCss{ background:#cccccc; width:200px; height:200px; } .contentCssHeight{ } .titleCss{ width:200px; height:25px; line-height:25px; text-align:right; margin:0px; background:#999999; } #close{ cursor:pointer; } </style> <script language="javascript" type="text/javascript" src="jquery-1.7.1.min.js"></script> 代码 <script language="javascript" type="text/javascript"> $(function(){ //获取当前浏览器的宽度 var winWidth=$(window).width(); //获取当前浏览器的高度 var winHeight=$(window).height(); //标题层的高度--提示打开或关闭 var titHeight=$("#ditTitle").height(); //内容层的高度 var conHeight=$("#divContent").height(); //临时变量,存储内容层的高度 var temp = conHeight; //alert(conHeight); //加载时设置层的位置 $("#msgDiv").css({top:$(window).height()-$("#ditTitle").height(),left:$(window).width()-$("#ditTitle").width()-16}); //窗体改变大小时,重新设置 $(window).resize(function(){ //重新获取窗口的宽高 winWidth=$(window).width(); winHeight=$(window).height(); $("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight,left:winWidth-$("#ditTitle").width()-16}); }); $(window).scroll(function(){ //重新获取窗口的宽高 winWidth=$(window).width(); winHeight=$(window).height(); $("#msgDiv").css({top:winHeight-$("#ditTitle").height()-conHeight+$(window).scrollTop()}); }); //打开过关闭 function openTips(){ //改变提示 $("#close").text("关闭"); //还原内容层的高度 //alert(titHeight+conHeight); //return; $("#divContent").height(temp); conHeight=temp; //动画--一秒内消息层高度增加,top增加 //$("#msgDiv").height($(this).height()+temp); $("#msgDiv").animate({top:winHeight-titHeight-conHeight+$(window).scrollTop(),height:titHeight+conHeight},1000,function(){ //展开后执行的函数 }); } function closeTips(){ //改变提示 $("#close").text("打开"); //alert(temp+" "+titHeight); $("#msgDiv").animate({top:winHeight-titHeight+$(window).scrollTop(),height:titHeight},1000,function(){ //关闭后执行的函数 conHeight=0; //设置内容层的高度为0 $("#divContent").height(0); }); } openTips(); setTimeout(closeTips,3000); //执行 /*var myTimer,i=8; function starFun() { //触发click事件,显示 if(i==4) { $("#close").click(); } //清除timeout,触发click事件,关闭层 if(i==0) { window.clearTimeout(myTimer); if($("#close").text()!="打开") $("#close").click(); } myTimer=window.setTimeout(starFun,1000); i=i-1; } starFun() */ }); </script> </head> <body> <div id="msgDiv" class="divCss"> <div id="ditTitle" class="contentCssHeight titleCss"> <span id="close">打开</span></div> <div id="divContent" class="contentCss"> 这是一些测试内容</div> </div> </body> </html>

评论收藏

内容反馈