javascript与CSS复习(二)
更新时间：2010年06月29日 02:00:11 作者：
我们接下来讨论元素的可见性，CSS有两种不同的方式可以有效的隐藏元素，它们有各自的特点，会导致不同的结果。
visibility：在切换元素可见性的同时会保持元素在普通流中的位置和空间。它有两个值：visible（默认的）和hidden（不可见的），
例如：
浏览器中是：Hello John, how are you today? 接着我们把John所在b的visibility设置为hidden后，就会变成这样
Hello , how are you today?
display:为我们控制元素的布局提供了更丰富的选择。可以是inline、block或是none(它完全从文档中隐藏了元素,结果跟从文档中删除了该元素的情形看起来一样)。还是上面的例子，如果我们用了display:none。那么结果是
Hello , how are you today?
下面给出书中两个简单函数用于显示和隐藏元素
接下来我们来研究下透明度opacity，这可以给元素添加一个很cool的效果...看下下面这个设置元素透明度的函数。
有了这些调整元素位置、尺寸和可见性的方法，我们就能把它们结合起来创建动画。
这里有个闭包的概念，理解起来可能有些难度，感兴趣深入的园友可以去Google下，这里就不多讨论了。
接下来用setOpacity函数写个"渐显"函数：
为了代码的正确性,我写完后都去测试一下，因为发现书中会有些小错误,刚测试完上面的slideDown方法，应该把var h = fullHeight(elem);放到函数内容的第一句，不然没效果....
第二部分的复习就到这里，慢慢消化，学东西可不能急于求成哦。
例如：
复制代码 代码如下:
<p>Hello <b>John</b>, how are you today?</p>
浏览器中是：Hello John, how are you today? 接着我们把John所在b的visibility设置为hidden后，就会变成这样
Hello , how are you today?
display:为我们控制元素的布局提供了更丰富的选择。可以是inline、block或是none(它完全从文档中隐藏了元素,结果跟从文档中删除了该元素的情形看起来一样)。还是上面的例子，如果我们用了display:none。那么结果是
Hello , how are you today?
下面给出书中两个简单函数用于显示和隐藏元素
复制代码 代码如下:
//使用display隐藏元素
function hide(elem) {
//找出元素display的当前状态
var curDisplay = getStyle(elem, 'display');
//记录它的display状态
if(curDisplay != 'none')
elem.$oldDisplay = curDisplay;
//设置display为none
elem.style.display = 'none';
}
//使用display显示元素
function show(elem) {
//设置display属性为它的原始值
elem.style.display = elem.$oldDisplay || ' ';
}
function hide(elem) {
//找出元素display的当前状态
var curDisplay = getStyle(elem, 'display');
//记录它的display状态
if(curDisplay != 'none')
elem.$oldDisplay = curDisplay;
//设置display为none
elem.style.display = 'none';
}
//使用display显示元素
function show(elem) {
//设置display属性为它的原始值
elem.style.display = elem.$oldDisplay || ' ';
}
接下来我们来研究下透明度opacity，这可以给元素添加一个很cool的效果...看下下面这个设置元素透明度的函数。
复制代码 代码如下:
//设置元素的透明度(级别从0-100)
function setOpacity(elem, level) {
//如果存在filters这个属性，则它是IE
if(elem.filters) {
elem.style.filters = 'alpha(opacity=' + level + ')';
} else { //否则,使用W3C的opacity属性
elem.style.opacity = level / 100;
}
}
function setOpacity(elem, level) {
//如果存在filters这个属性，则它是IE
if(elem.filters) {
elem.style.filters = 'alpha(opacity=' + level + ')';
} else { //否则,使用W3C的opacity属性
elem.style.opacity = level / 100;
}
}
有了这些调整元素位置、尺寸和可见性的方法，我们就能把它们结合起来创建动画。
复制代码 代码如下:
function slideDown(elem) {
//从0高度开始滑动
elem.style.height = '0px';
//先显示元素(但是看不到它，因为它的高度为0)
show(elem);
//找到元素的完整的潜在高度
var h = fullHeight(elem);
//我们在1秒钟内执行一个20帧的动画
for(var i = 0; i <= 100; i += 5) {
//保证我们能够保持正确的'i'的闭包函数
(function() {
var pos = i;
//设置timeout以让它能在指定的时间点运动
setTimeout(function() {
//设置元素新的高度
elem.style.height = (pos / 100) * h + 'px';
}, (pos + 1) * 10);
})();
}
}
//从0高度开始滑动
elem.style.height = '0px';
//先显示元素(但是看不到它，因为它的高度为0)
show(elem);
//找到元素的完整的潜在高度
var h = fullHeight(elem);
//我们在1秒钟内执行一个20帧的动画
for(var i = 0; i <= 100; i += 5) {
//保证我们能够保持正确的'i'的闭包函数
(function() {
var pos = i;
//设置timeout以让它能在指定的时间点运动
setTimeout(function() {
//设置元素新的高度
elem.style.height = (pos / 100) * h + 'px';
}, (pos + 1) * 10);
})();
}
}
这里有个闭包的概念，理解起来可能有些难度，感兴趣深入的园友可以去Google下，这里就不多讨论了。
接下来用setOpacity函数写个"渐显"函数：
复制代码 代码如下:
function fadeIn(elem) {
//从0透明度开始
setOpacity(elem, 0);
//先显示元素(但是看不到它,因为它的透明度是0)
show(elem);
//我们在1秒钟内执行一个20帧的动画
for(var i = 0; i < 100; i += 5) {
//保证我们能够保持正确的'i'的闭包函数
(function(){
var pos = i;
//设置timeout以让它能在指定的事件内运行
setTimeout(function() {
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
//从0透明度开始
setOpacity(elem, 0);
//先显示元素(但是看不到它,因为它的透明度是0)
show(elem);
//我们在1秒钟内执行一个20帧的动画
for(var i = 0; i < 100; i += 5) {
//保证我们能够保持正确的'i'的闭包函数
(function(){
var pos = i;
//设置timeout以让它能在指定的事件内运行
setTimeout(function() {
setOpacity(elem, pos);
}, (pos + 1) * 10);
})();
}
}
为了代码的正确性,我写完后都去测试一下，因为发现书中会有些小错误,刚测试完上面的slideDown方法，应该把var h = fullHeight(elem);放到函数内容的第一句，不然没效果....
第二部分的复习就到这里，慢慢消化，学东西可不能急于求成哦。
相关文章
这篇文章主要为大家详细介绍了javaScript实现游戏倒计时功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
纯JavaScript 实现flappy bird小游戏实例代码
这篇文章主要介绍了纯JavaScript 实现flappy bird小游戏实例代码,b本文分七大步骤给大家介绍,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-09-09
在页面中绘制表格可以满足我们对数据的输入需求，在js中可以很容易实现，下面有个不错的示例，感兴趣的朋友可以参考下2013-09-09
layui技巧：下拉框未展示问题;下拉框的onchange事件处理;关闭弹出层,重新加载父页面;父页面如何传递参数给弹出层的iframe页面;表单元素处于禁用状态;表单提交如何获取表单元素值集合;数据表格固定列;带搜索的下拉框;表单提交阻止页面跳转;父页面和子窗口传递值2024-07-07
这篇文章主要介绍了js字符串操作函数toString、split、length、indexOf、lastIndexOf、replace、replaceAll、charAt、charCodeAt、contact、slice、substring、substr、match、exec、search、trim、includes2023-08-08
现在uni-app终于官方支持PC宽屏,下面这篇文章主要给大家介绍了关于uni-app PC端宽屏适配方案的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2023-03-03
这篇文章主要介绍了js操作table元素实现表格行列新增、删除技巧,以实例形式分析总结了JavaScript针对table表格进行行列的增加与删除相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
Bootstrap框架结合jQuery仿百度换肤功能实例解析
这篇文章主要为大家详细介绍了Bootstrap框架结合jQuery仿百度换肤功能实现代码解析,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-09-09
这篇文章主要介绍了es6 js 匹配两个数组对象的方法,实例代码介绍了判断两个数组用的value是否相等，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-03-03
这篇文章主要介绍了JavaScript中this函数使用实例解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论