1.jQuery 效果 - animate() 方法
改变 "div" 元素的高度:
$(".btn1").click(function(){
$("#box").animate({height:"300px"});
});
定义和用法
animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 "margin:30px")。字符串值无法创建动画(比如 "background-color:red")。
注释:使用 "+=" 或 "-=" 来创建相对动画(relative animations)。
语法 1
$(selector).animate(styles,speed,easing,callback)
(补充:1em=16px -- 12px=0.75em,10px=0.625em。)
语法 2
$(selector).animate(styles,options)
styles 必需。规定产生动画效果的 CSS 样式和值(同上)。
options 可选。规定动画的额外选项。
可能的值:
speed - 设置动画的速度
easing - 规定要使用的 easing 函数
callback - 规定动画完成之后要执行的函数
step - 规定动画的每一步完成之后要执行的函数
queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始
specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
详情:http://www.w3school.com.cn/jquery/effect_animate.asp
2015-6-2 新增例子,返回顶部:
$('#gotop').click(function(){ $('body,html').animate({ scrollTop: 0 }, 800);//点击回到顶部按钮,缓懂回到顶部,数字越小越快 return false; })
2.CSS3 opacity 属性
语法
opacity: value|inherit;
value 规定不透明度。从 0.0 (完全透明)到 1.0(完全不透明)。
inherit 应该从父元素继承 opacity 属性的值。
3.关于append
$dl = $(".ybcun").find("dl"),
$dl2 = $(".ybctj").find("dl"),
dd = document.createElement("dd"),
html = '<a href="/project/searchResult?psId='+data+'" target="_blank">'+newName+'</a>'
dd.innerHTML = html;
$dl.append(dd);
$dl2.append(dd);
//这样追加内容的话,dl会添加失败。相同, 如果改成 先执行$dl2.append(dd); 在执行$dl.append(dd);的话, dl2会添加失败;
解决方法:
html = '<a href="/project/searchResult?psId='+data+'" target="_blank">'+newName+'</a>'
dd.innerHTML = html;
$dl.append(dd);
//重新定义一个对象
dd2 = document.createElement("dd"),
dd2.innerHTML = html;
$dl2.append(dd2);
//这样追加 新的对象就不会出现上面的问题
4.JQuery给元素绑定click事件多次执行的解决方法
原绑定方法:
$("#sdfsd").on("click",function(e){ ***** });
这种方法只会在原click方法中继续添加新方法;
解决办法更改绑定方法为:
$("#sdfsd").unbind("click").click(function(e){ ***** });
在绑定新click方法前对元素所绑定的click方法解绑
5.js冲突问题:
$(".x").load("")加载页面时,防止加载的页面与父页面的js冲突
6.判断数据返回类型(js判断undefined类型)--typeof
var id = $(this).attr("id").substring(0,9);
这个看似没问题,但如果当前标签下不存在id属性, 那么$(this).attr("id")就会返回
一个undefined,此时.substring就会抛异常,(.substring为截取字符串,显然undefined
不是一个有效的字符串)
这时就要使用typeof判断:
var idStr = $(this).attr("id");
//判断是否能获取到id(
//typeof 返回的是字符串,有六种可能:"number"、"string"、
"boolean"、"object"、
"function"、"undefined")
if(typeof(idStr) == "undefined"){
}else{
var id = idStr.substring(0,9);
$("#favoriteId").val(id);
}
一、HTML <link> 标签的 media 属性
<link rel="stylesheet" type="text/css" href="/ncss/print.css" media="print"/>
<link rel="stylesheet" type="text/css" href="/ncss/style.css" media="screen"/>
定义和用法
media 属性规定被链接文档将显示在什么设备上。
media 属性用于为不同的媒介类型规定不同的样式。
兼容性
所有浏览器都支持值为 "screen"、"print" 以及 "all" 的 media 属性。
属性值
值 描述
screen 计算机屏幕(默认)。
tty 电传打字机以及类似的使用等宽字符网格的媒介。
tv 电视机类型设备(低分辨率、有限的滚屏能力)。
projection 放映机。
handheld 手持设备(小屏幕、有限带宽)。
print 打印预览模式/打印页面。
braille 盲人点字法反馈设备。
aural 语音合成器。
all 适用于所有设备。
二、HTML <td> 标签的 valign 属性
valign 属性规定单元格中内容的垂直排列方式。
语法
<td valign="value">
属性值
值 描述
top 对内容进行上对齐。
middle 对内容进行居中对齐(默认值)。
bottom 对内容进行下对齐。
baseline 与基线对齐。
baseline 值
基线是一条虚构的线。在一行文本中,大多数字母以基线为基准。baseline 值设置行中的所有表格数据都分享相同的基线。
该值的效果常常与 bottom 值相同。不过,如果文本的字号各不相同,那么 baseline 的效果会更好。
三、margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
说明
这个简写属性设置一个元素所有外边距的宽度,或者设置各边上外边距的宽度。
块级元素的垂直相邻外边距会合并,而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地,浮动元素的外边距也不会合并。允许指定负的外边距值,不过使用时要小心。
注释:允许使用负值。
例子 1
margin:10px 5px 15px 20px;
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
例子 2
margin:10px 5px 15px;
- 上外边距是 10px
- 右外边距和左外边距是 5px
- 下外边距是 15px
例子 3
margin:10px 5px;
- 上外边距和下外边距是 10px
- 右外边距和左外边距是 5px
例子 4
margin:10px;
- 所有 4 个外边距都是 10px
0 |
no |
CSS1 |
object.style.margin="10px 5px" |
可能的值
auto | 浏览器计算外边距。 |
length | 规定以具体单位计的外边距值,比如像素、厘米等。默认值是 0px。 |
% | 规定基于父元素的宽度的百分比的外边距。 |
inherit | 规定应该从父元素继承外边距。 |
相关推荐
一款简单好用的HTML5 3D标签云动画旋转代码,不需要额外的CSS样式,可使用鼠标与标签进行互动,鼠标悬停标签云停止旋转,所指向tag标签文字颜色高亮显示,其它标签文字则变暗。
实现效果: html5 canvas文字标签云3D旋转动画特效,在企业网站中加号是哪个这个的效果,我觉得也还是很不错的一个特效吧,php中文网推荐大家下载!
HTML标签 时间间隔动画 javascript 你只要会复制粘贴,就可以让你的网页动起来~; 一起进步…
HTML5 + D3.js 实现有创意的服装弹性标签动画效果源码.zip
AlloyStick 是采用HTML5技术开发的一个骨骼动画引擎,可以用于HTML5动画开发、HTML5游戏开发;AlloyStick 主要由骨骼动画引擎和骨骼动画...AlloyStick: js动画库beta 动画编辑器working... 标签:AlloyStick
HTML5 SVG可变颜色动画标签栏.zip
CSS3动画内容标签切换.zip
CSS3文本框动画输入标签效果.zip
html5实现腾讯QQ登录界面背景动画特效(QQ背景动态)+js,可以有效的学习html标签,制作出所见即所得的东西。高大上的背景!
2.修改封装weixinAudio.js 实现仿微信语音播放动画 3.项目集成ffmpeg for linux 后台直接调用转换 4.内置jsp、html语音播放测试页 5.此样例只集成linux版ffmpeg 如部署环境为windows 请自行替换相应系统ffmpeg文件 6...
3、完美支持为单个元素同时添加多个animate.css动画效果(无需进行HTML标签的嵌套),并且,可以随意控制这些动画效果的播放方式。 4、能够设置每一个动画效果的播放方式:同步播放、依次播放、循环播放。 5、能够...
基于HTML5+CSS+JS完成小红书首页项目相似度99%,附源码+素材,可用于毕业设计
js实现tab标签效果,在项目中经常用到,今天抽点时间把我写的js实现tab标签效果源码分享给大家,对js tab标签代码需要的朋友参考下 废话不多说了,直接给大家贴代码了: <html> <head> <meta ...
Fanvas是一个把swf转为html5 canvas动画的系统,由两部分组成:Actionscript实现的解析器、js运行库。Flash做动画是最成熟最高效的方式,但由于终端基本不支持Flash播放,这给终端的动画制作带来了不少麻烦。Fanvas...
文本 137 3.1 文本的描边与填充 137 3.2 设置字型属性 141 3.3 文本的定位 144 3.3.1 水平与垂直定位 144 3.3.2 将文本居中 146 3.3.3 文本的度量 147 3.3.4 绘制坐标轴旁边的文本标签 148 3.3.5 绘制数值...
HTML5,javascript,canvas,Three.js,动画,颜色。 什么是? 我以一个prebuild three.js,并添加了精美的动画背景色,并调整了一些参数,例如行数,透视图和颜色。 现在已准备好供所有人使用。 在线演示 预习 这...
本文实例讲述了JS基于HTML5的canvas标签实现色相球效果。分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <meta charset=UTF-8 /> <...
简单又令人惊艳的hover效果表单案例 HTML+CSS实现3D旋转卡片 HTML+CSS打造伸缩式导航栏 有点小酷的input输入框动画 HTML+CSS制作闪亮的玻璃图标悬浮效果 HTML+CSS制作富有弹性的导航栏标签 HTML+CSS制作弹性旋转菜单...
CSS3实现的3d标签云动画
html5基础教程 css,js,基本标签使用 css,js动画 事件触发 canvas等