<html>
<head>
<style type="text/css">
div{width: 150px;height: 150px;background: red;margin-bottom:5px;
}
</style>
<title></title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script type="text/javascript">
windowonload = function() {
var divs = documentgetElementsByTagName("div");//获取所有的div
for(var i = 0; i<divslength; i++) {//循环让每个div都有效果
divs[i]onmouseover = function(){
thisstyleopacity = 05;
}
divs[i]onmouseout =function(){
thisstyleopacity = 1;
}
}
}
</script>
</body>
</html>
1、先用documentcreateElement方法创建一个input元素！ var newInput = documentcreateElement("input");
2、设定相关属性，如name,type等
newInputtype=mytype;
newInputname="input1";
3、用appendChild方法,将元素追加到某个标签内容中！
TemOappendChild(newInput);
<html >
<head>
<title>动态添加表单元素</title>
</head>
<script language="javascript">
function AddElement(mytype){
var mytype,TemO=documentgetElementById("add");
var newInput = documentcreateElement("input");
newInputtype=mytype;
newInputname="input1";
TemOappendChild(newInput);
var newline= documentcreateElement("br");
TemOappendChild(newline);
}
</script>
<body>
<form action="" method="get" name="frm">
<div id="add">
<input type="text" name="textfield">
</div>
</form>
<input name="" type="button" value="新建文本框" onClick="AddElement('text')" />
<input name="" type="button" value="新建复选框" onClick="AddElement('checkbox')" />
<input name="" type="button" value="新建单选框" onClick="AddElement('radio')" />
<input name="" type="button" value="新建文件域" onClick="AddElement('file')" />
<input name="" type="button" value="新建密码框" onClick="AddElement('password')" />
<input name="" type="button" value="新建提交按钮" onClick="AddElement('submit')" />
<input name="" type="button" value="新建恢复按钮" onClick="AddElement('reset')" />
</body>
</html>
运行效果：
首先回忆一下d窗的实现，一般我们分为两层，d出窗口层（popus）和遮罩层（mask）,通常情况下我习惯就这两元素全部设成fixed定位，具体和absolute区别一试便知。对于mask层自不用多少，我们如下给他设置属性,让他铺满整个屏幕。
mask{position:fixed;top:0px;bottom:0px;left:0px;right:0px;background-color:#000;opacity:06;filter:alpha(opacity=60)}
popus层则要稍微麻烦点儿，这里我们有两种实现方法
1已知大小的d窗，如下，主要通过top,left与负的margin来实现。
popus{width:300px;height:200px;position:fixed;left:50%;top:50%;margin-left:-150px;margin-top:-100px;background-color:#000}
2未知d窗大小，则通过js获取d窗层的width与height，然后在进行如上设置，在此不多述。
3在支持css3的情况下，我们不需要知道d窗的宽高，便可进行如下设置
popus{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%)}
主要通过translate属性来设置，偏移的值百分比是相对于本身的宽高，因此从原理上来说跟第一种写法有异曲同工之妙，不过使用却更方便。
言归正传，下面我们回归到正题，即让元素实现ps中高斯模糊的效果。
这里引出一个css属性：filter，注意这里的filter并不是ie中的filter，filter有很多值，感兴趣的可以点击这里，作者讲的非常详细。我们今天只讲其中的一个blur，首先看下面的预览图
ps:目前来说该属性只支持webkit浏览器，所以我们直接使用了css3属性，效果也需要在webkit浏览器中查看
是不是很神奇，其中起作用的代码就这一行 -webkit-filter:blur(8px) ，后面的像素值即代表模糊程度，当然在日常项目中，我们还可以加一些动画，使页面更加的生动，本案例完整代码如下：
<div class='bg'>
<img src='bgjpg' />
</div>
<div class='popus'>
效果是不是要好过纯色加透明呢
<div>
<div class='left btn '>确实不错</div>
<div class='right btn'>也就那样</div>
</div>
</div>
css：
{padding:0px;margin:0px}
img{width:100%;margin:0px auto;display:block}
bgblur{-webkit-filter:blur(8px)}
popus{width:400px;color:#000;;position:fixed;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);font-family:"微软雅黑";padding:20px 0px;font-weight:bold;background-color:rgba(255,255,255,06);border-radius:18px;text-align:center;padding:30px 0px;box-shadow:0px 0px 10px rgba(0,0,0,04);display:none}
popus div{width:220px;margin:10px auto}
popus divbtn{width:80px;padding:5px 10px;color:#000}
left{float:left;border:1px solid #000}
popus divbtnright{float:right;color:#666}
js：
$('bg')on('click',function(){
consolelog(98)
$(this)addClass('blur');
$('popus')show();
})
$('btn')on('click',function(){
$('bg')removeClass('blur');
$('popus')hide();
})
这样是不是就完了？很明显不是，看控制台
当我们d出窗口外，肯定要禁止掉我们其他层的点击事件，但是我们发现目前我们虽然将其他层模糊化了，但是并没有禁止掉相应的事件，当然解决办法也很简单，我们可以加一层没有背景颜色的遮罩层，覆盖在页面上，这样我们每次点击作用在遮罩层上，自然不会触发底层的事件了。
写一个空的div，然后隐藏起来，等需要打开蒙层的时候动态设置其长宽，并显示出来，并且其位置从00开始，设置position为absolute。并设置透明度opacity。然后蒙层就有了！然后在这基础上加内容。
if(documentdocumentElement&&documentdocumentElementscrollTop)
{
scrollTop=documentdocumentElementscrollTop;
}
else if(documentbody)
{
scrollTop=documentbodyscrollTop;
}
if(scrollTop>50)
{
documentgetElementById('obj')styleopacity='0';
}
//淡入效果(含淡入到指定透明度)
function fadeIn(elem, speed, opacity){
/
参数说明
elem==>需要淡入的元素
speed==>淡入速度,正整数(可选)
opacity==>淡入到指定的透明度,0~100(可选)
/
speed = speed || 20;
opacity = opacity || 100;
//显示元素,并将元素值为0透明度(不可见)
elemstyledisplay = 'block';
iBaseSetOpacity(elem, 0);
//初始化透明度变化值为0
var val = 0;
//循环将透明值以5递增,即淡入效果
(function(){
iBaseSetOpacity(elem, val);
val += 5;
if (val <= opacity) {
setTimeout(argumentscallee, speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
function fadeOut(elem, speed, opacity){
/
参数说明
elem==>需要淡入的元素
speed==>淡入速度,正整数(可选)
opacity==>淡入到指定的透明度,0~100(可选)
/
speed = speed || 20;
opacity = opacity || 0;
//初始化透明度变化值为0
var val = 100;
//循环将透明值以5递减,即淡出效果
(function(){
iBaseSetOpacity(elem, val);
val -= 5;
if (val >= opacity) {
setTimeout(argumentscallee, speed);
}else if (val < 0) {
//元素透明度为0后隐藏元素
elemstyledisplay = 'none';
}
})();
}
var btns = documentgetElementById('demo');
btnsonclick = function(){
fadeIn(btns);
}
btnsonclick = function(){
fadeOut(btns,40);
}
<p id="demo" style="width:300px;height:300px;background:#f00;">淡入淡出</p>
试试吧
以上就是关于javascript.中。如何给多个元素添加同一个JS事件全部的内容，包括:javascript.中。如何给多个元素添加同一个JS事件、js 元素添加方法、如何用JS和CSS3制作炫酷的d窗效果等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）