HTMO DOM部分---小练习;列表之间移动、日期选择、好友选中、滑动效果、滚动条效果、飞入飞出效果。
2016-11-14 10:34
507 查看
一:列表之间数据移动
第一个列表里面有内容,第二个里面没有
实现功能:
点击左侧列表选中一项内容,点击按钮,复制到右侧
点击复制所有按钮,将左侧列表所有数据,复制到右侧
扩展功能:右侧列表实现去重复
<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:500px; height:500px} #left{ width:200px; height:500px; float:left} #zhong{ width:100px; height:500px; float:left} #right{ width:200px; height:500px; float:left} </style> </head> <body> <br /> <div id="wai"> <div id="left"> <select style="width:200px; height:300px" id="selleft" multiple="multiple"> <option value="山东">山东</option> <option value="淄博">淄博</option> <option value="张店">张店</option> </select> </div> <div id="zhong"> <div style="margin-left:10px; margin-top:20px"> <input style="width:60px; height:30px" type="button" value=">>" onclick="moveall()" /> </div> <div style="margin-left:10px; margin-top:30px"> <input style="width:60px; height:30px" type="button" value=">" onclick="moveone()" /> </div> </div> <div id="right"> <select id="selright" multiple="multiple" style="width:200px; height:300px"></select> </div> </div> <script type="text/javascript"> function moveone() { var left = document.getElementById("selleft"); var right = document.getElementById("selright"); var xz = left.value; var str = "<option value='"+xz+"'>"+xz+"</option>"; //判断 //alert(right.childNodes.item(0)); var bs = 0; for(var i=0;i<right.childNodes.length;i++) { if(right.childNodes.item(i).text==xz) { bs = 1; } } if(bs==0) { //追加 right.innerHTML = right.innerHTML+str; } } function moveall() { var left = document.getElementById("selleft"); var right = document.getElementById("selright"); right.innerHTML = left.innerHTML; } </script>
二
二:日期选择
实现当前年份的前5后5年的日期选择
实现功能:年份和月份页面加载完成使用JS循环添加,天数根据月份的变化动态添加改变
扩展功能:天数可以根据闰年平年变化
<body> <select id="nian" onclick="biantian()"></select>年 <select id="yue" onclick="biantian()"></select>月 <select id="tian"></select>日 <script type="text/javascript"> FillNian(); FillYue(); FillTian(); function FillNian() { var b = new Date(); //获取当前时间 var nian = parseInt(b.getFullYear()); var str = ""; for(var i=nian-5;i<nian+6;i++) { str = str+"<option value='"+i+"'>"+i+"</option>";//添加<option>标签 } document.getElementById("nian").innerHTML = str; } function FillYue() { var str = ""; for(var i=1;i<13;i++) { str = str+"<option value='"+i+"'>"+i+"</option>"; } document.getElementById("yue").innerHTML = str; } function FillTian() { var yue = document.getElementById("yue").value; var nian = document.getElementById("nian").value; var ts = 31; if(yue==4 || yue==6 || yue==9 || yue==11) { ts=30; } if(yue==2) { if((nian%4==0 && nian%100 != 0) || nian%400==0) { ts = 29; } else { ts = 28; } } var str = ""; for(var i=1;i<ts+1;i++) { str = str+"<option value='"+i+"'>"+i+"</option>"; } document.getElementById("tian").innerHTML = str; } function biantian() { FillTian(); } </script> </body>
三
<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:150px; height:300px;} .list{ width:150px; height:40px; background-color:#66F; text-align:center; line-height:40px; vertical-align:middle; color:white; border:1px solid white;} .list:hover{ cursor:pointer; background-color:#F33} </style> </head> <body> <br /> <div id="wai"> <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">张三</div> <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">李四</div> <div class="list" onclick="xuan(this)" onmouseover="bian(this)" onmouseout="huifu()">王五</div> </div> </body> <script type="text/javascript"> function xuan(d) { //清 var list = document.getElementsByClassName("list"); for(var i=0;i<list.length;i++) { list[i].removeAttribute("bs"); list[i].style.backgroundColor = "#66F"; } //选 d.setAttribute("bs",1); d.style.backgroundColor = "#F33"; } function bian(d) { //清 var list = document.getElementsByClassName("list"); for(var i=0;i<list.length;i++) { if(list[i].getAttribute("bs")!="1") { list[i].style.backgroundColor = "#66F"; } } //选 d.style.backgroundColor = "#F33"; } function huifu() { var list = document.getElementsByClassName("list"); for(var i=0;i<list.length;i++) { if(list[i].getAttribute("bs")!="1") { list[i].style.backgroundColor = "#66F"; } } } </script>
四 滑动
<style type="text/css"> *{ margin:0px auto; padding:0px} #wai{ width:100%; height:500px;} #left{height:500px; background-color:#63C; float:left} #right{ height:500px; background-color:#FC3; float:left} #anniu{ width:50px; height:50px; background-color:#F30; position:absolute; top:225px; z-index:10; } #anniu:hover{ cursor:pointer} </style> </head> <body> <div id="wai"> <div id="left" style="width:200px"></div> <div id="right" style="width:800px"></div> </div> <div id="anniu" style="left:175px" onclick="hua()"></div> <script type="text/javascript"> var id; function hua() { id = window.setInterval("dong()",10); } //滑动的方法,调一次滑动3px function dong() { //改蓝色的宽度 200px var zuo = document.getElementById("left"); kd = zuo.style.width; if(parseInt(kd.substr(0,kd.length-2))>=800) { window.clearInterval(id); return; } kd = parseInt(kd.substr(0,kd.length-2))+3; zuo.style.width = kd+"px"; //改黄色的宽度 var you = document.getElementById("right"); ykd = you.style.width; ykd = parseInt(ykd.substr(0,ykd.length-2))-3; you.style.width = ykd+"px"; //改红色的left var hong = document.getElementById("anniu"); hleft = hong.style.left; hleft = parseInt(hleft.substr(0,hleft.length-2))+3; hong.style.left = hleft+"px"; } </script>
五 随滚动条滚动改样式
<style type="text/css"> *{ margin:0px auto; padding:0px} </style> </head> <body> <div style="width:100%; height:100px; background-color:#63F"></div> <div id="menu" style="width:100%; height:50px; background-color:#F36;"></div> <input type="button" value="滚动" onclick="gun()" /> <div style="width:100%; height:1000px; background-color:#FF6"></div> </body> <script type="text/javascript"> window.onscroll = function(){ var d = document.getElementById("menu"); if(window.scrollY >= 100) { d.style.position = "fixed"; d.style.top = "0px"; } else { d.style.position = "relative"; } } function gun() { window.scrollTo(0,100); } </script>
六 图片的飞入飞出效果
<style type="text/css"> *{ margin:0px auto; padding:0px} #tp{ width:900px; height:400px; overflow:hidden} #img{ position:relative; } </style> </head> <body> <input type="button" value="飞入" onclick="feiru()" /> <input type="button" value="飞出" onclick="feichu()" /> <div id="tp"> <img id="img" style="top:-400px; left:-900px" src="images/201610281326233959.jpg" width="900" height="400px" /> </div> <script type="text/javascript"> function feiru() { fei(); } function fei() { var img = document.getElementById("img"); var topstr = img.style.top; var top = parseInt(topstr.substr(0,topstr.length-2))+4; img.style.top=top+"px"; var leftstr = img.style.left; var left = parseInt(leftstr.substr(0,leftstr.length-2))+9; img.style.left = left+"px"; if(top<-100) { window.setTimeout("fei()",10); } else if(top>=-100 && top<0) { window.setTimeout("fei()",30); } } </script>
相关文章推荐
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
- 手势检测实现相册的左右滑动(并加上移动与旋转的特效) 首先,activity_main.xml里,使用ViewFlipper组件(可使用动画控制多个组件之间的切换效果) <?xml version="
- 仿StickyListHeaders 实现listview的header滑动效果(类似QQ好友列表)
- DOM的小练习,两个表格之间数据的移动
- Jquery mobiscroll 移动设备(手机)wap日期时间选择插件以及滑动、滚动插件
- Eric的日期选择下拉列表小控件
- Girdview实现滚动条效果,并且Head部分不滚动
- 日期选择下拉列表小控件
- 腾讯QQ网页在线客服,随网页滚动条上下移动的效果一
- Eric的日期选择下拉列表小控件
- jQuery日期弹出选择框Datepicker效果
- 下拉列表自动选中当前日期
- Eric的日期选择下拉列表小控件
- [练习]菜单滑动效果 兼容 ie ff opera
- css+js的排行、滑动切换新闻列表效果
- 随网页滚动条上下移动的效果 浮动QQ在线客服&网站QQ在线咨询
- 极品推荐输入框日期选择效果
- 打造完美SWT日期选择控件:(四)下拉列表的整体设计
- 弹出式日期选择组件日历显示VS2005重写部分
- 按下按钮后页面的滚动条向下(或向上)滑动,松开之后便停留在当前位置的效果如何实现?