修改内联CSS(点击按钮连续改变文字大小、位置,.animate()方法)
$(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()方法)的更多相关文章
- 利用css去除input按钮上的文字的几种方法
相信很多时候input上的文字困扰着web前端开发者,必须要通过修改html代码中的value值才能清空按钮上的文字,但很多人不愿意去动html代码,一方面麻烦,另外主要的原因还在于保留文字对seo有 ...
- JavaScript 获取和修改 内联样式
JavaScript 获取和修改 内联样式 版权声明:未经授权,严禁转载分享! 元素的样式 HTML 元素的 style 属性返回一个 CSSStyleDeclaration 类型的对象. Style ...
- webpack4对第三方库css,项目全局css和vue内联css文件提取到单独的文件(二十二)
在讲解提取css之前,我们先看下项目的架构如下结构: ### 目录结构如下: demo1 # 工程名 | |--- dist # 打包后生成的目录文件 | |--- node_modules # 所有 ...
- vue点击时动态改变样式 ------- 最简单的方法
vue点击时动态改变样式 template中 <li :class="{ active:index==isActive }" @click="changeValue ...
- css点击按钮,依次动态展开面板动画效果
<a href="#one">按钮1</a> <a href="#two">按钮2</a> <a href ...
- 进阶版css点击按钮动画
1. html <div class="menu-wrap"> <input type="checkbox" class="togg ...
- 进阶实战 css 点击按钮的样式
1. html结构 <div class="menu-wrap"> <input type="checkbox" class="t ...
- 点击按钮如何改变当前窗口的url
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css 两边是线,中间文字的多种实现方法
<div class="soild_text_one"> <fieldset> <legend>历史活动一</legend> < ...
随机推荐
- MVC项目实践,在三层架构下实现SportsStore,从类图看三层架构
在"MVC项目实践,在三层架构下实现SportsStore-02,DbSession层.BLL层"一文的评论中,博友浪花一朵朵建议用类图来理解本项目的三层架构.于是就有了本篇: I ...
- 带AI的俄罗斯方块源码
好久没写俄罗斯方块的游戏了.从学习编程到现在,相继用Win32 API.MFC.C.C#.JS.iOS写过大约二十款左右的俄罗斯方块游戏.最近用Cocos2d-x写了一下,第一次完全将游戏逻辑与UI层 ...
- 将编码从GB2312转成UTF-8的方法汇总(从前台、程序、数据库)
这篇文章主要介绍了将编码从GB2312转成UTF-8的方法汇总(从前台.程序.数据库),需要的朋友可以参考下 一个网站如果需要国际化,就需要将编码从GB2312转成UTF-8,其中有很多的问题需要注意 ...
- HTTP协议 keep-alive连接 与 BS(firefox-thttpd)实验
什么是 keep-alive 连接 https://en.wikipedia.org/wiki/HTTP_persistent_connection HTTP persistent connectio ...
- javascript对json对象的序列化与反序列化
首先引入一个json2.js.官方的地址为:https://github.com/douglascrockford/JSON-js 这里为了方便我直接贴上源代码 /* json2.js 2013-05 ...
- ReferenceEquals和 == 和equals()的比较
对于这几点的区别网上经常有各种答案,而且常常会出现答案之间是互相矛盾的.要嘛就是根本含糊的解释不清楚,只是把测试结果扔上来并没有言简意赅的写出他们之间的比较.难道面试的时候考官问你,你也要在纸上写一大 ...
- MVC5关联表读取相关表数据
SchoolName = db.Sys_Company.Find(gr.SchoolCode).FullName 只需Model中指定好SchoolCode是Sys_Company的主键就行了!
- Thinking in UML-1-为什么需要UML
1 从面向过程到面向对象 面向过程认为我们的世界是由一个个相互关联的小系统组成.逻辑严密.环环相扣.井然有序.但是我们这个世界从来不是一成不变的.世界的复杂性和频繁变革不是面向过程可以轻易应付应付的. ...
- 使用 Centos 7 的 systemctl 管理服务
CentOS 7的服务systemctl脚本存放在:/usr/lib/systemd/,有系统(system)和用户(user)之分,像需要开机不登陆就能运行的程序,存系统服务里即:/usr/lib/ ...
- 前端开发面试题JS
1.介绍js的基本数据类型. Undefined.Null.Boolean.Number.String. ECMAScript 2015 新增:Symbol(创建后独一无二且不可变的数据类型 ) 2. ...