JQurey--动画

最新推荐文章于 2022-05-21 21:23:58 发布
最新推荐文章于 2022-05-21 21:23:58 发布
阅读量101 收藏
点赞数
分类专栏： javascript jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qw160/article/details/115672820
版权
animate函数实现div的平移缩放动画

bottom,left,right,top平移
height+=缩放
js

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({bottom:'100px',height:'+=100px',width:'+=100px'});
  });
});
</script>

html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({bottom:'100px',height:'+=100px',width:'+=100px'});
  });
});
</script> 
</head>
 
<body>
<button>开始动画</button>
<p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>

</body>
</html>

参考菜鸟教程

危笑qwq
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
09-jQuery-动画-显示和隐藏元素
记录java学习日常~
05-24 2697
在 show() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素显示出来，动画完成后执行回调函数。在 slideUp() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型将元素收缩，动画完成后执行回调函数。在 hide() 方法中传入了动画时长 1000 毫秒和完成后的回调函数，表示需要在 1000 毫秒内以默认缓动类型隐藏元素，动画完成后执行回调函数。
表白网页-js-jqurey
08-27
JavaScript是一种广泛应用于客户端网页开发的脚本语言，而jQuery则是一个轻量级的JavaScript库，它极大地简化了JavaScript的API，使得开发者能更高效地操作DOM（文档对象模型），处理事件，进行动画效果，以及执行...
jQuery练习
alibaba2015的博客
03-24 119
jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程。 jQuery 库可以通过一行简单的标记被添加到网页中。 jQuery 库 - 特性 jQuery 是一个 JavaScript 函数库。 jQuery 库包含以下特性： HTML 元素选取 HTML 元素操作 CSS 操作 HTML 事件函数 J...
jQuery超详细入门教程
MsWRight的博客
05-21 4461
jquery其实总的来说东西不是很多 期间发现一点问题就是界面中使用本地存储之后，刷新后虽然数据不会丢失，但是刷新会整个页面重新渲染，有些只想在修改数据之前加载的内容也会被重新加载。 然后是我jquery总结的一些知识点 jQuery $是jQuery的别称，jQuery顶级对象 jQuery是一个js函数库，包含以下功能 html元素选取 html元素操作 css操作 html事件函数 js特效和动画 html DOM遍历和修改 AJAX Utilities 除此之外，jQuer还提供了大量的插件 j
Position属性之relative用法
热门推荐
evilcry2012的专栏
11-24 2万+
Position属性之relative用法 投稿：mrr 字体：[增加 减小] 类型：转载 时间：2015-12-14 我要评论 Relative是position的一个属性，是相对定位，通过本篇文章给大家介绍Position属性之relative用法，对position属性relative相关知识感兴趣的朋友一起学习吧 Relat
jQuery笔记
weixin_30325487的博客
02-19 61
一、jQuery引用 方法一、<head><script src="jQuery"></script></head> 方法二、<head><script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>...
jqurey-1.2.6
05-06
jQuery是JavaScript库的一个经典代表，它的出现极大地简化了网页中的DOM操作、事件处理、动画制作以及Ajax交互。这里我们关注的是jQuery的1.2.6版本，这是一个在2009年发布的较早版本，但它仍然是许多旧项目依赖的...
jquery-1.11.1.min.js_javascript_security_
09-29
在Web开发领域，jQuery是一个不可或缺的JavaScript库，它极大地简化了DOM操作、事件处理、动画制作以及Ajax交互。本文将深入探讨jQuery 1.11.1.min.js这一版本，以及它在JavaScript安全方面的考量和应用。 jQuery ...
jqurey 插件-很好的树和tab效果
12-21
这里提到的"jqurey 插件-很好的树和tab效果"是针对jQuery的一些特定插件，旨在增强网站的用户体验，提供美观且功能丰富的树形视图和选项卡组件。 1. **simpleTree**：这是一个jQuery插件，用于创建可折叠的树状结构...
关于通过jquery来理解position的relative及absolute
weixin_30802171的博客
02-25 234
一个多月前刚刚开始系统接触Javascript/css/html的时候一直对position属性的relative及absolute不是很了解。今天在接触jquery中无意间发现通过slideToggle（） 的滑动效果可以更加方便清楚的了解position属性的含义。下面是代码。 <!DOCTYPE html><html><head><script...
CSS 相对/绝对(relative/absolute)定位与jQuery的控制显示隐藏
Tz。
08-19 5574
http://codepen.io/tianzi77/pen/GJayoR
CSS 元素的定位之相对定位 position: relative
歪脖先生的博客
02-21 1万+
定位在CSS中，通过 position属性来对元素进行定位，可选的定位类型有 static | relative | absolute | fixed，默认值为 static，表示没有定位，元素保持在它原本应该在的位置上。要对页面元素使用定位技术，必须 position属性设置为 static 之外的其它 3 个属性值，即相对定位、绝对定位、固定定位。相对定位当一个元素的 position属性设置...
【前端笔记】jquery实现的动画小游戏
supercolorpower的博客
08-09 779
实现下图排序游戏（按从小到大顺序点击左右两端三角排序，首尾只能单向移动） 元素到达它的位置时候，左右两边的三角消失，且边距为0. 排序完成时 设计如下的DOM结构 &lt;body&gt; &lt;div&gt;&lt;p&gt;6&lt;/p&gt;&lt;span class="right"&gt;&lt;/span&gt;&lt;/div&g
实现div里的img图片水平垂直居中
amberom的专栏
11-17 1093
body结构 <body> <div> <img src="1.jpg" alt="haha"> </div> </body> 方法一： 将display设置成table-cell，然后水平居中设置text-align为center，垂直居中设置vertical-align为middle。 <style type="text/css"> *{margin: 0;padding: 0;} div{ wid
jQuery 定位和偏移操作
qq_36194388的博客
07-29 582
offset()方法 offset()方法用于获取元素相对当前窗体的偏移量。 其返回对象包括两个属性：top和left。方法如下： $(selector).offset() var offset= $("p").offset(); var left=offset.left; var top=offset.top; 该示例用于获得元素p的偏移量。 offset()只对可见元素有效。 position()方法 position()方法用于获取元素与最近的个position样式属性设置为r.
ajax--后台springboot向html传参
qw160的博客
04-30 1110
前几天弄js向后台传参网上有很多教程，但是反过来就都是一些繁琐的方法，我参考php/asp向前端传参的方式改了一下 ccc.html 注意：这里面的ajax代码有一个参数str,本例未使用（随便给了个字符），这个参数可以用来帮助数据库的模糊查询等等功能 点击按钮即可显示后台传的参数 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title&
ajax+springboot获取遍历文件夹
qw160的博客
05-19 985
思路 老办法ajax前后端互传参数，前端表单提交需要遍历哪个父文件夹，后端遍历父文件夹并发送json数组给js,js接收后显示在页面上 两个不太好的地方 sp1:判断对象是文件夹还是文件，这里采用了正则表达式判断文件名，如果只有数字字母下划线则判断为文件夹（文件带后缀.dov） sp2:输入文件夹名字时由于要传给ajax,获取input输入内容没有用表单而 是document.getElementById(“foldername”).value函数，需要额外设置一个按钮使其提交 前端代码 <!DOCT
jqurey完整实例
最新发布
09-06
jQuery是一款轻量级的JavaScript库，用于简化HTML文档遍历、事件处理、动画等操作。下面是一个jQuery完整实例。 ```html <!DOCTYPE html> <html> <head> <title>jQuery实例</title> <script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script> <style> div { width: 100px; height: 100px; background-color: red; margin: 10px; } </style> </head> <body> <h1>jQuery实例</h1> <div></div> <div></div> <div></div> <script> // 通过jQuery选择器选取所有div元素 var $divs = $("div"); // 遍历所有div元素，并为每个元素添加鼠标点击事件 $divs.each(function(index, element) { $(element).click(function() { // 在点击时改变背景颜色 $(this).css("background-color", "blue"); }); }); </script> </body> </html> ``` 这个实例演示了如何使用jQuery进行操作。我们引入了jQuery库，并在页面中创建了3个div元素。通过使用`$("div")`选择器，我们将选取所有的div元素，并通过`.each()`方法遍历它们。在遍历过程中，我们为每个div元素添加了鼠标点击事件，当点击时，通过`.css()`方法改变背景颜色为蓝色。 通过这个实例，我们可以看到jQuery的简洁语法和强大的功能，使得JavaScript开发更加容易和高效。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值