$(document).ready(function(){
            $('#swticher-large').click(function(){
                var $speech = $('div.speech');
                var currectSize = $speech.css('fontSize');
                var num = parseFloat(currectSize,10);   //parseFloat()函数会将字符串转换为几进制数字,还会去掉结尾的非数字字符
                var unit = currectSize.slice(-2);     //.slice()方法返回字符串中从指定的字符开始的一个子字符,此处指从倒数第二个字符开始取,即px.
                num*=1.4;
                $speech.css('fontSize',num+unit);
            });
        });

通过$('div.speech').css('fontSize')可以取得当前字体大小,不过由于返回的值中既包含数字值与包含度量单位,所以需要把这两部分保存到各自的变量中,在乘出新的字体大小后,再重新加上单位。

创建自定义动画效果

.animate()方法可控制很多属性,它接受四个参数:

1.一个包含样式属性及值得映射

2.可选的速度参数,即可是预置字符串(slow,normal,fast)也可是一个毫秒数值。

3.可选的缓动类型

4.可选的回调函数

例:

$(document).ready(function(){

  $('div.label').click(function(){

    $('div.button').animate({left:500,height:38},'slow');      //使按钮向右移的同时高度增加到38,速度为缓慢

$('div.button').animate({left:500},'slow')

            .animate({height:38},'slow')

            .fadeTo('slow',0.5)

            .slideUp('slow');      //使按钮排队实现效果,即先将按钮向左移动再增加高度再将透明度减退为0.5最后将它们滑到最上方隐藏它们

  });

});

很多效果有可能是同时发生的也有可能是排队发生的,对此总结:

(1)一组元素上的效果:

  1.当在一个.animate()方法中以多个属性的方式应用时,是同时发生的。

  2.当以方法连缀的形式应用时,是按顺序发生的(排队效果)。

(2)多组元素上的效果:

  1.默认情况下是同时发生的。

2.当在事件处理程序的回调函数中应用时,是按顺序发生的(排队效果)。

修改内联CSS(点击按钮连续改变文字大小、位置,.animate()方法)的更多相关文章

  1. 利用css去除input按钮上的文字的几种方法

    相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...

  2. JavaScript 获取和修改 内联样式

    JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...

  3. webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)

    在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...

  4. vue点击时动态改变样式 ------- 最简单的方法

    vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...

  5. css点击按钮,依次动态展开面板动画效果

    <a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...

  6. 进阶版css点击按钮动画

    1. html <div class="menu-wrap"> <input type="checkbox" class="togg ...

  7. 进阶实战 css 点击按钮的样式

    1.  html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...

  8. 点击按钮如何改变当前窗口的url

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. css 两边是线,中间文字的多种实现方法

    <div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> < ...

随机推荐

  1. Elasticsearch + logstash中文指南

    http://kibana.logstash.es/content/logstash/examples/nginx-access.html http://es.xiaoleilu.com/030_Da ...

  2. jquery的toFixed方法的正确使用

    最近一段时候公司的项目中遇到这么个事情,需要计算手续费,而这个手续费必须是保留小数点后面两位,且是由小数点后面第三位四舍五入,就这么个场景: 说说我计算的过程,下面是前两个数是测试用的: howMuc ...

  3. excel转换日期格式,将yyyymmdd类型日期转换成yyyy-mm-dd等日期类型方法

    源数据日期格式:例如: 20160420 20160422 目标日期格式类型: 2016-4-20 2016-4-22 或 2016/04/20 2016/04/22 方法: 一.选中相应数据的单元格 ...

  4. ajax异步处理时,如何在JS中获取从Servlet或者Action中session,request

    ssh项目中,我需要登陆某个页面(如a.jsp),通过onblur()鼠标失去焦点后来触发js函数(函数是ajax请求)请求到相应的action,处理完成后将数据存放到session对象里面,然后在a ...

  5. ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL

    ASP.NET MVC URL重写与优化(1)-使用Global路由表定制URL 引言--- 在现今搜索引擎制霸天下的时代,我们不得不做一些东西来讨好爬虫,进而提示网站的排名来博得一个看得过去的流量. ...

  6. elasticsearch客户端连接选择

    elasticsearch支持两种协议: http协议. Native Elasticsearch binary protocol(本地elasticsearch二进制协议):elasticsearc ...

  7. 用jxl导出数据到excel

    需要jxl.jar 测试结果没问题,代码: package com; import java.io.File; import java.io.IOException; import java.util ...

  8. [Python]如何获取目录下,最后更新的文件

    #-*- coding: utf-8 -*- __author__ = 'tsbc' import time import datetime import os day = time.strftime ...

  9. 【前端】String.prototype.match() 用法详解

    var str="1 plus 2 equal 3" // 正则表达式 console.log(str.match(/\d+/g)); // ["1", &qu ...

  10. Python3基础 把一个列表中内容给另外一个列表,形成两个独立的列表

    镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...