首页 > 其他分享 >无涯教程-jQuery - Scale方法函数

无涯教程-jQuery - Scale方法函数

时间:2023-07-29 11:34:40浏览次数:44  
标签:jQuery Scale hide show 无涯 width scale 默认值

Scale 效果可以与show/hide/toggle一起使用。这会使元素缩小或增长一个百分比因子。

Scale - 语法

selector.hide|show|toggle( "scale", {arguments}, speed );

这是所有参数的描述-

  • direction               - 方向。可以是"both","垂直(vertical)"或"horizontal"。默认值是两者。

  • from                      - 开始时的状态,通常不需要。这将是一个对象,并将以{height:..,width:..}的形式给出。

  • origin                    - 消失点。这是一个数组,默认情况下设置为['middle','center']。

  • 百分比(percent) - 要缩放为数字的百分比。默认值为0/100。

  • 比例(scale)         - 元素的哪些区域将被调整大小:'both','box','content'Box调整元素的边框和填充的大小Content调整其内部内容的大小元素。默认值是两者。

Scale - 示例

以下是一个简单的示例,简单说明了此效果的用法-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type="text/javascript" 
         src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
      </script>
		
      <script type="text/javascript" language="javascript">
   
         $(document).ready(function() {

            $("#hide").click(function(){
               $(".target").hide( "scale", {percent: 200, direction: 'horizontal'}, 2000 );
            });

            $("#show").click(function(){
               $(".target").show( "scale", {percent: 200, direction: 'vertical' }, 2000 );
            });
				
         });
			
      </script>
		
      <style>
         p {background-color:#bca; width:200px; border:1px solid green;}
         div{ width:100px; height:100px; background:red;}
      </style>
   </head>
	
   <body>
      <p>Click on any of the buttons</p>
		
      <button id="hide"> Hide </button>
      <button id="show"> Show</button> 
  
      <div class="target">
      </div>
   </body>
</html>

这将产生以下输出-

参考链接

https://www.learnfk.com/jquery/effect-scale.html

标签:jQuery,Scale,hide,show,无涯,width,scale,默认值
From: https://blog.51cto.com/u_14033984/6891236

相关文章

  • 无涯教程-jQuery - Highlight方法函数
    Highlight效果可以与effect()方法一起使用。这将以特定的颜色突出显示元素的背景,默认为黄色(yellow)。Highlight-语法selector.effect("highlight",{arguments},speed);这是所有参数的描述-color  - 高亮显示颜色。默认值为"#ffff99"。model - 效果的模式......
  • 无涯教程-jQuery - Puff方法函数
    吹气效果可以与show/hide/toggle一起使用。通过按比例放大元素并同时隐藏它,可以形成粉扑效果。Puff-语法selector.hide|show|toggle("puff",{arguments},speed);这是所有参数的描述-model         - 效果的模式。可以是"显示(show)"或"隐藏(hide)"......
  • 无涯教程-jQuery - show( )方法函数
    show()方法仅显示匹配元素中的每个元素(如果隐藏)。此方法还有另一种形式,可以控制动画的速度。show()-语法selector.show();show()-示例以下是一个简单的示例,简单说明了此方法的用法-<html><head><title>ThejQueryExample</title><scripttype=......
  • 关于Jquery jqGrid的使用
    [color=red][b]官方文档[/b][/color]:[url]http://www.trirand.com/jqgridwiki/doku.php?id=wiki:jqgriddocs[/url]jqGrid使用总结[url][/url]jqGrid的属性列表:[url]http://www.helloweba.com/view-blog-162.html[/url]jqgrid的一些操作动态增加列用......
  • jquery 中全选checkbox
     JavaScript部分:functioncheckAll(obj){$("#boxinput[type='checkbox']").prop('checked',$(obj).prop('checked'));}html部分:<divid="box"><inputtype="checkbox"onclick="check......
  • jQuery 打开wode文档
    jQuery打开wode文档什么是jQuery?jQuery是一个快速、简洁、功能丰富的JavaScript库。它通过封装复杂的JavaScript代码,提供了一套简单的API来处理HTML文档操作、事件处理、动画效果、AJAX等各种常见的Web开发任务。jQuery的目标是让Web开发变得更加简单、更加高效。如何使用jQuer......
  • jquery 打印
    jQuery打印jQuery是一个快速,简洁的JavaScript库。它简化了HTML文档遍历、事件处理、动画等操作。在本文中,我们将介绍如何使用jQuery来进行打印操作。什么是打印打印是将电子文档转换为纸质文档的过程。在Web开发中,我们经常需要将网页内容打印到纸张上,以便用户可以离线阅读或保......
  • jquery 正则替换
    jQuery正则替换正则表达式(RegularExpression)是一种强大的文本处理工具,它可以用来匹配、查找和替换文本中的特定模式。在Web开发中,我们经常需要对文本进行处理和替换操作。在jQuery中,我们可以使用正则表达式进行替换操作来快速、高效地处理文本。正则表达式基础在使用正则表达式......
  • jquery 操作某个td
    如何使用jQuery操作某个td概述在本文中,我将教你如何使用jQuery来操作一个HTML表格中的某个td元素。首先,让我们了解一下整个过程。过程概览下面是一张表格,它包含了三行三列的td元素:列1列2列3行1td1td2td3行2td4td5td6行3td7td8td9我......
  • jquery 整除
    实现jQuery整除功能介绍在jQuery中,没有直接提供整除的方法,但我们可以通过一些简单的步骤来实现这个功能。在本篇文章中,我将向你介绍如何用jQuery实现整除功能,帮助你快速掌握这个技巧。实现步骤下面是实现整除功能的步骤,我们将使用jQuery的一些方法和语法来完成这个过程......