首页 > 代码库 > 两个小的js效果，页面翻转和智能提示
两个小的js效果，页面翻转和智能提示
最近项目在做页面，有两个js的效果，个人感觉还是挺不错的，给大家共享一下。
各位要是瞧上眼了，就拿去用。
放张霉霉图片镇一下
分割线
这个是实现输入内容智能提示补充的，我是用在邮箱填写上的、
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>monster</title>
<script>
//输入内容改变调用的函数
function textChange()
{
var input=document.getElementById("email").value;
var temp=document.getElementById("email1");
var content="";
temp.innerHTML="";
//在此处写入要补充的字符串
var a = new Array("@qq.com", "@163.com", "@126.com", "@sina.com");
for(var t in a){
content+="<option value="http://www.mamicode.com/;
content+=input+a[t]+">"
}
temp.innerHTML=content;
}
</script>
</head>
<div>
<input style="border-radius:5px;" id="email" onkeyup="textChange();" required="required" list="email1" type="text" placeholder="Email">
<datalist id="email1">
</datalist>
<span class="fa fa-envelope form-control-feedback"></span>
</div>
<body>
</body>
</html>
第二个js是div翻转效果，可用在登录的时候找回密码上，或者其他地方，主要思路是两块div，一块是block，一块none，翻转的时候两个交替，比如block的块从0-90，none的块从270-360，然后再把块的display属性none和block互相交换，这边我写的函数有点蠢，因为在setInterval这个函数中要传递参数比较麻烦，我又是个麻烦的人，我就多copy了几个函数就解决了。好吧，就这样了 拜拜。。。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
//实现页面反转
var x,y,ny=0,nx=270,rotYINT
function begin(){
y=document.getElementById("rotatey1");
x=document.getElementById("rotatey2");
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate11()",5);
setTimeout("setValue()",500);
}
function end(){
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate21()",5);
setTimeout("setValue1()",500);
}
function setValue(){
y.style.display="none";
x.style.display="block";
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate12()",5);
}
function setValue1(){
x.style.display="none";
y.style.display="block";
clearInterval(rotYINT);
rotYINT=setInterval("startYRotate22()",5);
}
//从270到360 1
function startYRotate12()
{
nx=nx+1;
x.style.transform="rotateY(" + nx + "deg)";
x.style.webkitTransform="rotateY(" + nx + "deg)";
x.style.OTransform="rotateY(" + nx + "deg)";
x.style.MozTransform="rotateY(" + nx + "deg)";
if (nx>=360)
{
nx=270;
clearInterval(rotYINT);
}
}
//从270到360 2
function startYRotate22()
{
nx=nx+1;
y.style.transform="rotateY(" + nx + "deg)";
y.style.webkitTransform="rotateY(" + nx + "deg)";
y.style.OTransform="rotateY(" + nx + "deg)";
y.style.MozTransform="rotateY(" + nx + "deg)";
if (nx>=360)
{
nx=270;
clearInterval(rotYINT);
}
}
//从0-90 把1
function startYRotate11()
{
ny=ny+1;
y.style.transform="rotateY(" + ny + "deg)";
y.style.webkitTransform="rotateY(" + ny + "deg)";
y.style.OTransform="rotateY(" + ny + "deg)";
y.style.MozTransform="rotateY(" + ny + "deg)";
if (ny>=90){
ny=0;
clearInterval(rotYINT);
}
}
// 0-90 把2
function startYRotate21()
{
ny=ny+1;
x.style.transform="rotateY(" + ny + "deg)";
x.style.webkitTransform="rotateY(" + ny + "deg)";
x.style.OTransform="rotateY(" + ny + "deg)";
x.style.MozTransform="rotateY(" + ny + "deg)";
if (ny>=90){
ny=0;
clearInterval(rotYINT);
}
}
</script>
</head>
<div id="rotatey1" style="display:block;width:200px; height:200px; background-color:pink;">
<button onclick="begin();">我是正面</button>
</div>
<div id="rotatey2" style="display:none;width:200px;height:200px; background-color:pink;">
<button onclick="end();">我是反面</button>
</div>
<body>
</body>
</html>
效果演示：http://139.199.67.243/myserver/20170727 这是小弟的一个腾讯云，安全做的很烂，求各位做安全的大佬放过。
拜拜
两个小的js效果，页面翻转和智能提示