jQuery ------ 操作动画(实例）完结

最新推荐文章于 2024-07-05 14:21:58 发布
最新推荐文章于 2024-07-05 14:21:58 发布
阅读量129 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42412646/article/details/103104548
版权 
<html>
	<head>
		<title>jQuery操作动画</title>
		<meta charset="UTF-8"/>
		<script src="jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//在一个函数中实现点击触发---jQuery和js相结合的实现方法，（不推荐）
			var flag=false;        //最开始设置为不显示，所以设置为false，以为规定了false对应的会执行下拉的操作
//			function testCl(){        //实现点击一次下拉显示。再次点击收起
//				if(flag){
//					$("#showdiv").slideUp(2000);
//					$("#lb1").attr("src","../img/labledown.jpg"");
//					flag=false;
//				}else{
//					$("#showdiv").slideDown(2000);
//					$("#lb1").attr("src","../img/lableUp.jpg"");	
//					flag=true;
//				}	
//			}
			//仅仅利用jQuery实现,在不使用onclick的方法实现
//			$(function(){       //相当于$(document)的效果，页面加载的时候置入
				$("ul>label").bind("click",function() //利用bind也可以实现这个操作，而且可以修改其事件触发的机制
//				$("ul>label").click(function(){     //利用ul>label得到属性子对象，然后进行其属性的操作
//					if(flag){
//						$("#showdiv").slideUp(2000);
//						$("#lb1").attr("src","../img/labledown.jpg");
//						flag=false;
//					}else{
//						$("#showdiv").slideDown(2000);
//						$("#lb1").attr("src","../img/lableUp.jpg");   //改变标签的图标
//						flag=true;
//					}	
//				});
//			})    //直接利用$进行页面操作，在其函数的内部是一个标签的点击属性操作
			//利用分散的方法实现鼠标移动的操作
			$(function(){
				$("ul>label").bind("mouseout",function(){
					$("#showdiv").slideUp(2000);
					$("#lb1").attr("src","../img/labledown.jpg");
				});
				$("ul>label").bind("mouseover",function(){
					$("#showdiv").slideDown(2000);
					$("#lb1").attr("src","../img/lableUp.jpg");
				});
			})     //在页面操作中有两个对象的操作来分别控制两个事件
		</script>
		<style type="text/css">
			ul li{
				list-style-type: none;
			}
			img{
				width: 160px;
				height: 100px;
				margin-left: 70px;
			}
			#lb1{
				width: 30px;
				height: 20px;
				margin-top: 80px;
				margin-left: 80px;
			}
		</style>
	</head>
	<body>
		<ul>
			<img src="../img/labledown.jpg" id="lb1"/>&nbsp;&nbsp;<label for=""><b>Clannad展示</b></label>;
			<div id="showdiv" style="display: none;">  <!--设置刚开始的不进行显示-->
				<li><img src="../img/0.jpg"/></li>
				<li><img src="../img/dangao.jpg"/></li>
			</div>
		</ul>
	</body>
</html>

 

qq_42412646
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery-ui.min.js 插件
lllllllllaaa的博客
09-02 1万+
1、导入js库： script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js">script>       2、用法： 附赠案例一份： html> html> head lang="en">     meta charset="UTF-8">     title>折叠title>     script
jQuery-动画效果（轮播图案例）
weixin_69036336的博客
10-29 1506
jQuery-动画效果（轮播图案例）
jQuery操作动画完整实例分析
11-27
本文实例讲述了jQuery操作动画。分享给大家供大家参考，具体如下： <html> <head> <title>jQuery操作动画</title> <meta charset="UTF-8"/> <script src="http://huoche.7234.cn/images/jb51/5v5qp0k2amo.html""); // flag=false; // }else{ // $("#showdiv").slideDown(2000); // $("#lb1").attr("src","../img/lableUp.jpg""); // flag=true
jQuery 效果- 动画
奋斗的日子最甜美，在科技的海洋里，永无止境。
12-28 299
jQuery 效果- 动画 jQuery animate() 方法允许您创建自定义的动画。 jQuery 动画实例 jQuery jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法： $(selector).animate({params},speed,callback);
jquery--DOM操作
m0_74194490的博客
07-05 799
在javaScript的基础上创建的属于js的框架，是继Prototype之后又一个优秀的javaScript代码库（javaScript框架）有一些人嫌弃js用着不好，把 很多具有特殊功能的代码的集合，写在一个js文件中，名为jquery.js。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery-自定义动画animate
qq_39111074的博客
10-11 308
animate()使用方法 animate(要改边的属性集合，动画速度，切换效果，回调函数) 要改边的属性集合- - - 以对象的形式传递，必须写，属性名可以不用带引号，如果是复合属性需要采用驼峰命名法，如 backgroundColor。 动画速度- - -“slow”、“normal”、“fast”或者动画时长的毫秒数值（eg：1000- - -1秒） 切换效果- - -默认是“swing”（先快后慢），可以用“liner”（匀速） 回调函数- - -动画完成时执行的函数，每个元素执行一次。 要改边的属
jQuery-ui 中 拖放排序插件Sortable.js
qq_31362557的博客
03-11 2374
发
jQuery 效果 - 动画 方法实例
believe_YouCwy的博客
07-07 202
jQuery animate() 方法允许您创建自定义的动画。 jQuery 动画 - animate() 方法 jQuery animate() 方法用于创建自定义动画。 语法：’ $(selector).animate({params},speed,callback); 必需的 params 参数定义形成动画的 CSS 属性。 可选的 speed 参数规定效果的时长。它可以取以下值：“slow”、“fast” 或毫秒。 可选的 callback 参数是动画完成后所执行的函数名称。 下面的例子演示 an
Jquery-zTree的基本用法
Miss_kun的专栏
08-11 877
Jquery-zTree的基本用法 【简介】 zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件  兼容 IE、FireFox、Chrome 等浏览器  在一个页面内可同时生成多个 Tree 实例  支持 JSON 数据  支持一次性静态生成 和 Ajax 异步加载 两种方式  支持多种事件响应及反馈  支持
jquery-3.4.1.rar
11-16
3. **链式操作**：jQuery对象返回的是jQuery实例，因此可以连续调用多个方法，如`$('p').addClass('highlight').css('color', 'red')`。 4. **插件开发**：通过$.fn.extend()，可以创建自己的jQuery插件，扩展...
jquery-3.4.1.min.zip
08-15
3. **链式操作**：jQuery对象返回的是jQuery实例，因此方法调用可以链式进行，如`$("#element").css("color", "red").addClass("highlight")`。 4. **CSS操作**：jQuery提供了一系列方法来操作CSS属性，如`css()`, ...
jquery-steps demo
08-31
在“jquery-steps demo”中，我们可以看到该插件的实例应用和功能展示。 ### 1. 插件安装与引入 在项目中使用`jQuery Steps`首先需要下载`jquery.steps-1.1.0`压缩包，其中包括`jquery.steps.js`和对应的CSS文件。...
jquery-1.7
12-28
总结起来，jQuery 1.7不仅提升了性能，还引入了更先进的API和方法，让开发者能够更高效地编写JavaScript代码，尤其在处理DOM操作、事件绑定、动画控制以及AJAX请求等方面，jQuery 1.7无疑为Web开发带来了显著的便利...
jquery-ui-1.8.2.custom.min.js,jquery-ui-1.8.4.custom.css
11-20
总的来说，`jquery-ui-1.8.2.custom.min.js`和`jquery-ui-1.8.4.custom.css`是jQuery UI早期版本的实例，它们展示了如何通过定制和最小化来满足特定项目的需要。尽管版本较旧，但理解这些文件背后的原理和用途，有助...
jquery-animateNumber数字动画插件
如果我年少有为不自卑
12-11 1392
jquery-animateNumber数字动画插件 实例一、基础动画 //html代码，下面例子相同。 &lt;p&gt;This plugin only &lt;span id="lines"&gt;0&lt;/span&gt; lines of code.&lt;/p&gt; //JS 代码，请把代码放入script标签内，下面例子相同 $('#lines').animateNumber({...
jQuery-动画效果（图片抽奖案例）
weixin_69036336的博客
10-29 1032
jQuery-动画效果（图片抽奖案例）
ubuntu20.04安装教程.docx
07-09
安装 Ubuntu 20.04（Focal Fossa）的步骤如下所示。确保在开始安装之前备份重要数据，以防万一。 1. 下载 Ubuntu 20.04 镜像文件 访问 Ubuntu 官网（https://ubuntu.com/download/desktop）下载 Ubuntu 20.04 的镜像文件。根据你的计算机架构选择合适的版本（通常是 64 位的）。 2. 制作启动盘 你可以使用以下两种方法制作 Ubuntu 的启动盘： 使用 Rufus 制作启动盘（适用于 Windows）： 下载并安装 Rufus。 插入空白 USB 驱动器。 打开 Rufus，选择你下载的 Ubuntu 镜像文件。 点击 "开始" 制作启动盘。 使用 Etcher 制作启动盘（跨平台）： 下载并安装 Etcher。 打开 Etcher，选择 Ubuntu 镜像文件和你的 USB 驱动器。 点击 "Flash!" 制作启动盘。 3. 安装 Ubuntu 20.04 制作完成后，将 USB 启动盘插入到需要安装 Ubuntu 的计算机上，然后按照以下步骤进行安装： 启动计算机：在 BIOS 设置
贵阳市建筑物矢量数据（Shp格式+带高度）.txt
最新发布
07-09
因文件较多，数据存放网盘，txt文件内包含下载链接及提取码，永久有效。失效会第一时间进行补充。
jquery实现动画效果实例
05-30
以下是一个使用 jQuery 实现动画效果的例子： HTML 代码： ```html <div id="box"></div> 点击 ``` CSS 代码： ```css #box { width: 100px; height: 100px; background-color: red; position: relative; ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值