鼠标滑过显示相关信息
2017-08-06 本文已影响0人
风筝啊
这是之前的项目里用到的，数据提取出来就是li格式创建好的，但是要ajax动态获取相关信息，当鼠标划过时，显示。并且点击选中checkbox框。当然ajax部分省略了。没有不能展示。哈哈。
<!DOCTYPE html>
<html>
<!--
//后台数据直接输出的li标签以及内容的循环。
//为每个li标签要添加信息展示
//所以要创建标签并通过Ajax添加内容
-->
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta name="misapplication-tap-highlight" content="no" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<title>这是个栗子-糖炒的</title>
<script src="js/jquery-1.7.2.min.js"></script>
<style type="text/css">
#this_ li,#this_1 li,#this_2 li{
position: relative;
cursor: pointer;
}
.infoBoxcon{
box-sizing: border-box;
width: 200px;
position: absolute;
top:8px;
left: 140px;
background: #c1c1c1;
z-index: 2;
border-radius: 6px;
padding: 10px;
}
</style>
</head>
<body>
<div id="this_">一个栗子
<ul>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><label for=""><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1188" type="checkbox">这是栗子</label></li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1189" type="checkbox">这是栗子这是栗子</li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1190" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1191" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1192" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1193" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1194" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1195" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1196" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1197" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1198" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1199" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1200" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1201" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1203" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1202" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1204" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1205" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1206" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1207" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1208" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1209" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1210" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1211" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1212" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1213" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1214" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1215" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1216" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2227" type="checkbox">这是栗子 </li>
</ul>
</div>
<div id="this_1">两个栗子
<ul>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="1262" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1263" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1264" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1265" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1266" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1268" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2225" type="checkbox">这是栗子这是栗子 </li>
</ul>
</div>
<div id="this_2">三个栗子
<ul>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="1812" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" checked="" value="2035" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2068" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2069" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2070" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2071" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2072" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2073" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2074" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2075" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2076" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2077" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2078" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2079" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2080" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2081" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2082" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2083" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2084" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2085" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2086" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2087" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2088" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2089" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2090" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2091" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2092" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2093" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2094" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2095" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2096" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2097" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2098" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2099" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2100" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2101" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2102" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2103" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2104" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2105" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2133" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2192" type="checkbox">这是栗子这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2219" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2222" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2223" type="checkbox">这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2224" type="checkbox">这是栗子-田兵 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2229" type="checkbox">这是栗子这是栗子 </li>
<li style="list-style-type:none;display: inline-block;padding: 4px 20px;width: 20%"><input style="margin-right: 4px;vertical-align: text-top;margin-top: 4px" name="check_box" value="2239" type="checkbox">这是栗子 </li>
</ul>
</div>
<script>
//调用函数
showBox('#this_','li');
showBox('#this_1','li');
showBox('#this_2','li');
//点击li选中input
function showBox(items,tags){
$(items).find(tags).on('click',function(){
// alert($(this).find('input:checkbox').attr('checked'))
if($(this).find('input:checkbox').attr('checked') == 'checked'){
$(this).find('input:checkbox').attr('checked',false);
}else{
$(this).find('input:checkbox').attr('checked','checked');
}
});
//鼠标滑过li时显示信息函数，li标签可换。css样式中infoBoxcon为外层div样式。
$(items).find(tags).on('mouseenter',function(){
var boxTop = $(this).offset().top;//获取当前元素距离文档顶部距离
var liHeight = $(this).outerHeight(true);//获取当前元素高度
var winHeight = $(window).scrollTop() + $(window).height();//获取当前浏览器可视底部距文档顶部的距离
var infoBox = $('<div class="infoBoxcon"></div>')
$(this).append(infoBox);//创建填充内容区域
//---添加区域内容开始
infoBox.append('<p>姓名：不告诉你</p>');
infoBox.append('<p>年龄：壮如牛</p>');
infoBox.append('<p>距离顶部：'+ boxTop +'</p>');
infoBox.append('<p>浏览器可视区域：'+ winHeight +'</p>');
infoBox.append('<p>距离底部：'+ (winHeight - boxTop) +'</p>');
//---添加内容区域结束
var boxHeight = $(this).find('.infoBoxcon').height();//获取div的高度
//如果当前div距离底部小于div的高度，那么他的top值改变
if((winHeight - (boxTop+liHeight))<boxHeight){ //获取当前元素距离底部的距离是否小于div的高度
//当div在li上面显示时，调整底边对齐的位置，更改数字。如果div在li下显示时去调整css（infoBoxcon）样式top的值
$(this).find('.infoBoxcon').css('top','-'+(boxHeight-4)+'px')
}
//console.log(boxHeight)
$(this).siblings().find('.infoBoxcon').remove();//除了当前元素其他元素下的div删除
}).on('mouseleave',function(){//鼠标离开清除div
$(this).find('.infoBoxcon').remove()
});
}
</script>
</body>
</html>
