css+js_初
一、鼠标移动变色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pg-header{ position: fixed; right: 1px; left: 1px; top: 0; height:48px; background-color: #2459a2; line-height: 48px; } .pg-body{ margin-top: 50px; } .w{ width: 980px; margin: 0 auto; } .pg-header .menu{ display: inline-block; padding: 0 30px 0 30px; color: white; } .pg-header .menu:hover{ background-color: blue; } /* .pg-header .menu:hover 当鼠标移动到当前标签时，以下css属性才生效*/ </style> </head> <body> <div class="pg-header"> <div class="w"> <a class="logo">LOGO</a> <a class="menu">全部</a> <a class="menu">42区</a> <a class="menu">段子</a> <a class="menu">1024</a> </div> </div> <div class="pg-body"> <div class="w"> abc </div> </div> </body> </html>
二、返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>返回顶部—多层</title> </head> <body> <div onclick="GoTop();"style="width: 50px;height: 40px;background-color: white; position: fixed; bottom: 20px; right: 20px; ">返回顶部 </div> <div style="height: 5000px;background-color: #dddddd;"> 1234567890 </div> <script> function GoTop(){ document.body.scrollTop = 0; } </script> </body> </html>
三、赋新值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="i1">我是刘东</div> <a>123</a> <a>abc</a> <a>123abc</a> <script> document.getElementById('i1'); document.getElementById('i1').innerText; document.getElementById('i1').innerText = '新内容'; document.getElementsByTagName('a')[1]; document.getElementsByTagName('a')[1].innerText = '666'; tags = document.getElementsByTagName('a'); for(var i=0;i<tags.length;i++){tags[i].innerText=777;} </script> </body> </html>
四、登录框内有用户密码图片
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 35px;width: 400px;position: relative;padding: 10px 0;"> <input type="text" style="height: 35px;width: 370px;padding-right: 30px;" /> <span style="display:inline-block;position: absolute;right: 10px;top: 20px;background-image: url(图片/i_name.jpg);height: 16px;width: 16px;"></span> </div> <div style="height: 35px;width: 400px;position: relative;"> <input type="text" style="height: 35px;width: 370px;padding-right: 30px;" /> <span style="display:inline-block;position: absolute;right: 10px;top: 10px;background-image: url(图片/i_pwd.jpg);height: 16px;width: 16px;"></span> </div> </body> </html>
五、幻灯片循环显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="color: red;background-color: #BEBEBE;height: 40px;"> <h1 id="i1">欢迎光临-前来指导</h1> </div> <script> function liu(){ //根据ID获取指定<div>标签的内容，定于局部变量接受 var tag = document.getElementById('i1') //获取标签内部的内容 var content = tag.innerText; //取字符串取第一个字符，赋值给f var f = content.charAt(0); //把第2个字符到最后一个字符赋值给g var g = content.substring(1,content.length); //把两个新赋的值加在一起 var new_content = g + f; //重新赋值 tag.innerText = new_content; } setInterval('liu()',500); </script> </body> </html>
六、定时器
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <script> setInterval("alert(123)",5000) //创建定时器5秒弹出一次 </script> </body> </html>
七、头部固定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>头部固定</title> <style> .pg-header{ height: 48px; background-color:black; position: fixed; top:0; right: 0; left: 0; } .pg-body{ background-color:#dddddd; height: 5000px; margin-top: 50px; } </style> </head> <body> <div class="pg-header">头部</div> <div class="pg-body">内容</div> </body> </html>
八、大图片选择按照设置的坐标显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div style="height: 100px;"></div> <div style="background-image: url(icon_18_118.png);background-repeat: no-repeat;height:20px;width: 20px;border: 1px solid red;background-position-x: 0;background-position-y: -25px"></div> </body> </html>
九、多层折叠显示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } .c1{ position: fixed; left: 0; top: 0; right: 0; bottom: 0; background-color: black; opacity: 0.6; z-index: 9; } .c2{ width: 500px; height: 400px; background-color: white; position: fixed; left: 50%; top: 50%; margin-left: -250px; margin-top: -250px; z-index: 10; } </style> </head> <body> <div> <input type="button" value="添加" onclick="liu()" /> </div> <!-- 遮罩层开始--> <div id="i1" class="c1 hide"></div> <!-- 遮罩层结束--> <!-- 弹出框开始--> <div id="i2" class="c2 hide"> <p><input type="text" /></p> <p><input type="text" /></p> <p> <input type="button" value="取消" onclick="dong()" /> <input type="button" value="确定" /> </p> </div> <!-- 弹出框结束--> <script> function liu(){ document.getElementById('i1').classList.remove('hide'); document.getElementById('i2').classList.remove('hide'); } function dong(){ document.getElementById('i1').classList.add('hide'); document.getElementById('i2').classList.add('hide'); } </script> </body> </html>