`

JQ 合成事件

 
阅读更多

style.css

*{margin:0;padding:0;}	
body { font-size: 13px; line-height: 130%; padding: 60px }
#panel { width: 300px; border: 1px solid #0050D0 }
.head { padding: 5px; background: #96E555; cursor: pointer }
.content { padding: 10px; text-indent: 2em; border-top: 1px solid #0050D0;display:block;display:none; }

 

demo1.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").hover(function(){
	    $(this).next("div.content").show();
	},function(){
	    $(this).next("div.content").hide();   
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
        jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
        操作DOM、处理事件、执行动画和开发Ajax。
        它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
	</div>
</div>
</body>
</html>

 

demo2.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function(){
    $("#panel h5.head").click(function(){
			$(this).next("div.content").toggle();
	})
})
</script>
</head>
<body>
<div id="panel">
	<h5 class="head" style="display:block;">什么是jQuery?</h5>
	<div class="content">
		jQuery是继Prototype之后又一个优秀的JavaScript库,它是一个由 John Resig 创建于2006年1月的开源项目。
        jQuery凭借简洁的语法和跨平台的兼容性,极大地简化了JavaScript开发人员遍历HTML文档、
        操作DOM、处理事件、执行动画和开发Ajax。
        它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程方式。
	</div>
</div>
</body>
</html>

 

效果图:



 

 

 

  • 大小: 30.3 KB
  • 大小: 43.5 KB
分享到:
评论

相关推荐

    jquery的时间绑定事件与合成事件小例

    本篇文章将深入探讨jQuery中的时间绑定事件`bind()`以及合成事件`hover()`,并结合一个名为`jqueryDemo`的示例代码进行解析。 ### 1. `bind()` 方法 `bind()`是jQuery中用于绑定事件处理函数到指定元素的方法。它...

    JQ8900-16P模式配置工具(附语音合成软件).rar

    JQ8900 语音模块资源列表:MP3格式转换器mp3文件测试音频串口测试程序语音合成软件config.txtJQ8900-16P语音模块使用说明书V1.3.docJQ8900-16P语音模块使用说明书V1.3.pdfJQ8900-16P语音模块原JQ8900-16P语音模块原...

    JQ8400-FN/JQ8400-FL语音芯片/模块、应用电路及程序

    JQ8400系列是专为语音合成和播放而设计的高性能芯片,具有集成度高、音质优良、功耗低等特点。JQ8400-FN与JQ8400-FL的主要区别在于它们的封装形式和接口类型,分别适用于不同的硬件设计需求。 2. **语音合成软件**...

    JQ8400-FL语音模块-资料包(MP3格式转换器、语音合成软件、串口测试程序)

    JQ8400-FL语音模块-资料包(MP3格式转换器、语音合成软件、串口测试程序) 1、支持 MP3 WAV 硬件解码 2、支持 FAT 文件系统 3、支持采样率(KHz):8/11.025/12/16/22.05/24/32/44.1/48 4、24 位 DAC 输出内部采用 DSP...

    jQuery拖动合成海报图片 国庆节活动 (原创).zip

    在本项目中,"jQuery拖动合成海报图片 国庆节活动 (原创).zip" 提供了一个使用jQuery实现的国庆节活动应用。这个应用的核心功能是让用户能够通过拖动图片来合成一张国庆节主题的海报。以下是这个项目涉及到的一些...

    JQ8900语音模块资料包

    JQ8900是一款广泛应用在单片机控制领域的高性能语音合成模块,支持多种微控制器如89C52、STM32和Arduino进行接口通信。该模块提供了丰富的功能,包括语音合成、音频格式转换、音量调节以及各种操作模式配置等。下面...

    JQ8900语音模块资料包.zip

    JQ8900是一款广泛应用在嵌入式系统中的语音模块,以其强大的语音合成功能和良好的性价比赢得了广大开发者和工程师的喜爱。本文将深入探讨该模块的核心特性,以及如何通过STM32微控制器进行有效的集成和控制。 一、...

    jQuery照片墙小图合成大图动画代码.zip

    总结来说,“jQuery照片墙小图合成大图动画代码”通过jQuery的事件处理、DOM操作和动画功能,实现了一种互动性强且视觉效果良好的图片展示方式。它不仅展示了jQuery的强大之处,也为网页设计提供了一种创新的思路。...

    jQuery点击照片墙合成大图代码.zip

    在网页设计中,jQuery是一种广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画制作以及Ajax交互。"jQuery点击照片墙合成大图代码"是一个示例项目,它展示了如何利用jQuery来实现一个功能,即当用户点击...

    JQ8X00_Arduino.rar

    这个压缩文件包含了一系列的控制实例和资料,帮助用户学习如何利用Arduino对JQ8X00进行串口控制或单线控制,同时涉及到语音合成转换为MP3或WAV格式的技术。 首先,让我们深入了解一下JQ8X00系列语音芯片。JQ8X00是...

    JQ8400语音模块资料包

    通过串行接口,你可以发送命令来控制模块播放预录的声音或者实现语音合成。串口调试通常涉及波特率、数据位、停止位和校验位的设置。了解这些参数并正确配置,可以确保数据传输的稳定性和准确性。 2. **模块资料...

    jQuery多张图片上传合成插件

    本插件“jQuery多张图片上传合成插件”是针对网页上多图上传并合成为一张图片的功能,这在设计、摄影展示、社交媒体分享等多个场景下非常实用。下面将详细介绍该插件的工作原理、主要功能以及如何实现。 1. **工作...

    JQ8900-16P语音模块资料包V1.1

    JQ8900语音模块的相关资料,内容包括JQ8900-16P语音模块使用说明书,JQ8900-16P语音模块原理图,以及JQ8900-16P的模式配置工具,以及串口调试软件,还有一点小小的福利,内包括语音合成软件和MP3格式转换器。

    JQ8900-TF语音模块使用说明书串口测试程序等资料包.rar

    JQ8900-TF语音模块使用说明书串口测试程序等资料包:‘ JQ8900-TF语音模块使用说明书V2.1.pdf MP3格式转换器 串口测试程序 串口调试软件.exe 播放模式-配置工具.exe 测试音频 语音合成软件

    语音合成工具资源分享

    现在一般都是用语音合成软件,直接把文字变 成 wav 格式的语音文件,虽然声音有些生硬,但可提高效率。 可惜的是,本软件只能生成wav文件,而我们M6语音识别模块只能 播放MP3格式的文件,所以我们还需要将合成后得到...

    JQ8400-FL语音模块-资料包

    该模块基于JQ8400芯片,这是一种高集成度的语音处理芯片,能够实现语音的合成与播放。在本资料包中,包含了以下关键组成部分: 1. **串口测试程序**:这是一个用于验证模块与51单片机通信功能的程序。通过串行接口...

    JQ语音识别

    这个库基于浏览器的Web Speech API,该API提供了语音识别和语音合成的功能。annyang库简化了与Web Speech API的接口,开发者无需深入了解底层复杂的语音识别机制,就可以轻松地将语音控制集成到自己的网页应用中。 ...

    jquery仿盖章效果并合成图片.zip

    总结来说,"jQuery仿盖章效果并合成图片"项目结合了jQuery的事件处理、CSS3的动画特性以及HTML5的canvas技术,提供了一种在网页上模拟盖章并与图片合成的方法。这对于提升网页的用户体验和互动性具有很大的帮助。在...

Global site tag (gtag.js) - Google Analytics