jQuery实现页面广告自动弹现与隐藏示例

34 浏览量更新于2024-08-30 收藏 71KB PDF 举报

本文档主要介绍了如何使用jQuery库在网页上实现页面定时弹出广告效果。通过结合HTML、CSS和JavaScript，特别是jQuery库，作者展示了以下几个关键步骤： 1. **引入jQuery**: 首先，需要在页面中引入jQuery库，以便能够利用其强大的DOM操作和动画功能。引用的jQuery版本是1.8.3，这确保了兼容性和稳定性。 2. **页面加载函数**: 使用jQuery的`$(document).ready()`或简写形式`$(function(){...})`，这是一个文档加载完成后的回调函数，确保在页面结构准备好后执行后续操作。 3. **广告图片显示与隐藏**: - **显示广告图片**: 创建一个名为`showAd()`的函数，通过`$("#img_2").slideDown(3000)`使用jQuery的`slideDown()`方法，使广告图片以滑动的方式在页面上显示，持续时间为3秒。 - **隐藏广告图片**: 用`hiddenAd()`函数来隐藏图片，使用`slideUp(3000)`方法，同样以滑动的方式隐藏，保持一致的动画效果。 4. **定时操作**: - 在页面加载完成后，设置一个定时器`setInterval("showAd()",3000)`，每隔3秒调用`showAd()`函数，显示广告。 - 显示广告后，清除当前的显示定时器，并设置一个新的定时器来隐藏广告。 - 同理，隐藏广告后，再次清除定时器。 5. **样式和布局**: 文档中还提到一个CSS部分，设置了广告容器（#father）和广告图层（#logo、.top）的样式，包括边框、宽度和高度，以及广告图片的位置。 6. **HTML结构**: 提供了简单的HTML结构，包括一个`<head>`区域，包含`<meta>`标签和`<title>`标签，以及一个`<body>`区域，其中嵌套了广告容器和广告图片元素`<img>`。总结来说，这篇文章的核心内容是创建一个动态的广告轮播系统，利用jQuery控制图片的显示和隐藏，并通过定时器实现了广告的定时弹出效果。这在提高用户体验的同时，也为网站提供了动态营销手段。

使用使用jQuery实现页面定时弹出广告效果实现页面定时弹出广告效果

1、、JQuery效果效果

2、步骤分析：、步骤分析：

第一步：引入jQuery相关的文件

第二步：书写页面加载函数

第三步：在页面加载函数中，获取显示广告图片的元素。

第四步：设置定时操作(显示广告图片的函数)

第五步：在显示广告图片的函数中，使用jQuery的方法让广告图片显示(show())

第六步：清除显示广告图片的定时操作

第七步：设置定时操作(隐藏广告图片的函数)

第八步：在隐藏广告图片的函数中，使用jQuery的方法让广告图片隐藏(hide())

第九步：清除隐藏广告图片的定时操作

$(function(){

//1.书写显示广告图片的定时操作

time=setInterval("showAd()",3000);

});

//2.书写显示图片的函数

function showAd(){

//3.获取广告图片，并让其显示

//$("#img_2").show(1000);

$("#img_2").slideDown(3000); //滑入

//4.清除显示图片的定时操作

clearInterval(time);

//5.设置隐藏图片的定时操作

time=setInterval("hiddenAd()",3000);

}

function hiddenAd(){

//6.获取广告图片让其隐藏

//$("#img_2").hide();

$("#img_2").slideUp(3000); //滑出

//7.清除隐藏图片的定时操作

clearInterval(time);

}

</script>

3、最终实现代码：、最终实现代码：

<!DOCTYPE html>

<html>

<head>

下载后可阅读完整内容，剩余6页未读，立即下载

weixin_38622962

粉丝: 3
资源: 903

jQuery实现页面广告自动弹现与隐藏示例

jquery气泡弹出框

一天搞定jQuery(一)——使用jQuery完成定时弹出广告

jQuery Easy UI基础篇

jquery实现div弹出效果

如何使用jquery实现点击按钮弹出一个对话框

使用jQuery实现点击按钮弹出一个有确定和取消按钮的对话框

jquery移动端底部弹出组件

jquery 弹出页面

如何使用jQuery实现整体页面下滑效果

1.如何使用jquery实现点击按钮弹出一个对话框 请写出代码

最新资源

1.如何使用jquery实现点击按钮弹出一个对话框请写出代码