js动画html标签（持续更新中）
编程技术 / houtizong 发布于 3年前 177
- 上外边距是 10px
- 右外边距是 5px
- 下外边距是 15px
- 左外边距是 20px
- 上外边距是 10px
- 右外边距和左外边距是 5px
- 下外边距是 15px
- 上外边距和下外边距是 10px
- 右外边距和左外边距是 5px
- 所有 4 个外边距都是 10px
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;
例子 2
margin:10px 5px 15px;
例子 3
margin:10px 5px;
例子 4
margin:10px;
| 0 |
| no |
| CSS1 |
| object.style.margin="10px 5px" |
可能的值
| auto | 浏览器计算外边距。 |
| length | 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。 |
| % | 规定基于父元素的宽度的百分比的外边距。 |
| inherit | 规定应该从父元素继承外边距。 |
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
