码迷,mamicode.com
首页 > Web开发 > 详细

两个小的js效果,页面翻转和智能提示

时间:2017-07-27 11:33:25      阅读:205      评论:0      收藏:0      [点我收藏+]

标签:翻转   color   分享   innerhtml   new   extc   setvalue   utf-8   image   

最近项目在做页面,有两个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=";
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效果,页面翻转和智能提示

标签:翻转   color   分享   innerhtml   new   extc   setvalue   utf-8   image   

原文地址:http://www.cnblogs.com/monster5475/p/7243696.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!