<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="en">
<head>
<title>js实现自动补全及手风琴效果</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="js实现自动补全及手风琴效果">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
a {
text-decoration: none;
}
ul, li {
list-style: none;
}
body {
font-size: 14px;
font-family: "微软雅黑"
}
/*设置背景*/
.bg {
/* background:
url("http://imgstore.cdn.sogou.com/app/a/100540002/714894.jpg")
no-repeat; */
background: url("http://img.netbian.com/file/2020/0710/93b4f00e30f595a020b0e7dc09338154.jpg") no-repeat;
/*background: url("image/bg.jpg") no-repeat;*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
z-index: -1;
}
#container {
width: 640px;
height: 70px;
margin: 260px auto;
}
.inputs {
width: 560px;
height: 45px;
border: none;
float: left;
text-indent: 1em;
font-family: "微软雅黑";
box-shadow: inset 0 0 1em #ccc
}
.searchBtn {
height: 45px;
background: #fff;
display: inline-block;
float: left;
width: 77px;
text-align: center;
line-height: 45px;
border-left: 1px solid #ccc;
font-size: 16px;
}
.searchBox {
border: 1px solid #ccc;
height: 45px;
}
#autoBox {
display: none;
}
#autoBox li {
height: 35px;
border-bottom: 1px solid #ccc;
line-height: 35px;
padding-left: 10px;
font-size: 12px;
}
#autoBox li:HOVER {
background: #eaeaea;
}
.itemBox {
width: 300px;
background: #fff;
position: absolute;
height: 100%;
top: 0;
left: 0;
}
.itemBox li {
overflow: hidden;
}
.items {
height: 32px;
border-bottom: 1px solid #ccc;
line-height: 32px;
transition: all 1s ease;
padding-left: 20px;
position: relative;
}
.showpan {
position: absolute;
top: 0;
left: 260px;
width: 100%;
height: 100%;
background: red;
}
</style>
<script type="text/javascript" src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$(".items").append("<div class='showpan'></div>");
$(".items").hover(function () {
$(this).find(".showpan").css("background", randomColor()).stop(true, true).animate({
left: 0
});
}, function () {
$(this).find(".showpan").css("background", randomColor()).stop(true, true).animate({
left: 260
});
});
function randomColor() {
var r = Math.floor(Math.random() * 256);
var g = Math.floor(Math.random() * 256);
var b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
});
window.onload = function () {
//实现jquery中的css方法
var keyBoxDOM = function (id) {
var dom = document.getElementById(id);
return {
css: function (opts) {
for (var key in opts) {
var v = opts[key];
if (typeof v == "number") {
v += "px";
}
dom["style"][key] = v;
}
}
}
};
window.keyBoxDOM = keyBoxDOM;
//获取input输入框
var keybox = document.getElementById("keyBox");
//获取自动提示框
var autobox = document.getElementById("autoBox");
//获取下拉框
var ulbox = document.getElementById("ulBox");
//获取按钮ID
var btnChang = document.getElementById("btnChang");
var index = -1;
//var index = 0;
//重新绑定事件
keybox.onkeyup = autoComplete;
keybox.onkeydown = autoComplete;
function autoComplete() {
//拿到input 的宽度和高度
var inw = this.offsetWidth;
var inh = this.offsetHeight;
//输入框值
var value = this.value;
//验证
var check = value.match(/@/ig);
if (check && check.length > 1) {
this.value = value.substring(0, value.length - 1);
return;
}
if (value.indexOf("@") !== -1) {
keyBoxDOM("autoBox").css({
display: "block",
width: inw,
height: "215",
marginTop: 45,
background: "#f9f9f9"
});
//拼接数据
ulbox.innerHTML = getMailHTML(value);
//动态绑定事件
var lis = ulbox.children;
for (var i = 0; i < lis.length; i++) {
lis[i].onclick = function () {
keybox.value = this.innerHTML;
keybox.onkeyup = autoComplete;
keybox.onkeydown = autoComplete;
}
}
}
}
//通过键盘控制
document.onkeyup = function (e) {
//键码38 40
var ev = e || window.event;
var code = ev.keyCode || ev.which;
//获取所有的li
var lis = ulbox.children;
/* if (code == 40) {//向下
keybox.onkeyup = null;
keybox.onkeydown = null;
if (index == lis.length) {
index = 0;
}
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = "none";
}
lis[index].style.background = "#ccc";
keybox.value = lis[index].innerHTML;
index++;
}
if (code == 38) {//向上
} */
if (code === 40) {//向下
keybox.onkeyup = null;
keybox.onkeydown = null;
if (index === lis.length - 1) {
index = 0;
} else {
index++;
if (index > lis.length - 1) {
index = 0;
}
}
if (index !== -1) {
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = "none";
}
lis[index].style.background = "#ccc";
keybox.value = lis[index].innerHTML;
}
}
if (code === 38) {//向上
if (index === -1) {
index = lis.length - 1;
} else {
index--;
if (index < 0) {
index = lis.length - 1;
}
}
if (index !== -1) {
for (var i = 0; i < lis.length; i++) {
lis[i].style.background = "none";
}
lis[index].style.background = "#ccc";
keybox.value = lis[index].innerHTML;
}
}
if (code === 13) {//回车键
autobox.style.display = "";
}
};
function getMailHTML(value) {
var arr = ["163.com", "126.com", "qq.com", "gmail.com", "sohu.com", "sina.com"];
var html = "";
for (var i = 0; i < arr.length; i++) {
//html += "<li onclick='selectMe(this);'>" + value + arr[i] + "</li>";
html += "<li>" + value + arr[i] + "</li>";
}
return html;
}
//静态绑定
/*function selectMe(obj) {
document.getElementById("keybox") = obj.innerHTML;
}*/
autobox.onmouseleave = function () {
this.style.display = "none";
};
btnChang.onmouseover = function () {
this.style.background = "#eaeaea";
};
btnChang.onmouseleave = function () {
this.style.background = "#f9f9f9";
}
}
</script>
</head>
<body>
<!-- 设置背景 -->
<div class="bg"></div>
<div id="container">
<div class="searchBox" style="">
<input type="text" class="inputs" id="keyBox" placeholder="请输入邮箱"/>
<a href="" class="searchBtn" id="btnChang">搜索</a>
<div id="autoBox">
<ul id="ulBox">
</ul>
</div>
</div>
</div>
<div>
<ul class="itemBox">
<li class="items">0</li>
<li class="items">1</li>
<li class="items">2</li>
<li class="items">3</li>
<li class="items">4</li>
<li class="items">5</li>
<li class="items">6</li>
<li class="items">7</li>
<li class="items">8</li>
<li class="items">9</li>
<li class="items">0</li>
<li class="items">1</li>
<li class="items">2</li>
<li class="items">3</li>
<li class="items">4</li>
<li class="items">5</li>
<li class="items">6</li>
<li class="items">7</li>
<li class="items">8</li>
</ul>
</div>
</body>
</html>
- 大小: 638 KB
分享到：
相关推荐
js实现横向手风琴效果
js 实现横向手风琴效果js 实现横向手风琴效果js 实现横向手风琴效果js 实现横向手风琴效果js 实现横向手风琴效果
Js实现图片手风琴效果
JS-实现手风琴效果 用jS实现的手风琴效果,大家可以看看
基于JS的多种形式的手风琴效果的实现代码
自己做的手风琴效果 没有用折叠list 每个选项中 显示的是不同的list
jquery手风琴效果
本文实例讲述了js实现可折叠展开的手风琴菜单效果。分享给大家供大家参考。具体如下： 这是一款可折叠展开的菜单，手风琴菜单，运用CSS与JavaScript技术实现的合拢与伸展的网页菜单，代码简洁，来自老外的代码作品，...
纯js(javascript)手风琴效果,无插件，非常小
最新javascript实现手风琴导航效果源码下载
javascript 实现手风琴效果,里面的数据只是例子,各位同行可以对它进行稍微修改
利用javascript封装了一个运动函数框架，实现了图片手风琴效果.查看博客还可以jquery版本的手风琴效果
刚刚介绍完jQuery打飞机游戏，现在我们来点实用的，来分享一款基于jQuery的横向手风琴图片轮播焦点图效果。手风琴效果即图片一张张层叠在一起，鼠标滑过图片时即可展开完整的图片，这样的效果很常见，所以应用也很...
JS手风琴效果
使用手风琴效果网页设计来美化自己网页内容； 整个网页是将CSS内联在了html的代码中；js中用到了for循环遍历，获取所有的li标签，添加点击事件，修改body的背景图片等一系列的操作。 希望本资源能给大家提供所需的...
JavaScript JS手风琴图片展示效果代码 JavaScript手风琴图片展示效果代码，确实效果不错的东西，鼠标放到风琴的每一个键位上，会滑出清淅大图，整体效果动感十足，这种排列方式称之为横向手风琴，还有竖向的，特效用...
很好用的jq特效，手风琴效果，横向的，动感十足，自己改css就可以做出很漂亮的效果。
自己写的js手风琴效果,主要是用的div,想和大家分享练中的点点滴滴
PC端用，本人基于jQuery制作的常用手风琴展示效果，可支持较低版本浏览器