滚果鼠标到指定位置,想实现的效果:scrollTop()>350 触发 openwin() 事件;scrollTop()<350 触发closewin() 事件。代码不会么写。。。求代码!!求实例。。。
<style type="text/css">
#contact {
margin:0 auto;z-index:9997;width:100%;;height:140px; padding:0px 0px; position:fixed;bottom:0px; background: none;
/* IE6 */
_position:absolute;
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
_bottom:auto;
overflow:visible;
}
#lefttips {
z-index:9999;width:50px;;height:117px; padding:0px 0px; position:fixed;bottom:0px; background:#EC7515; text-align:left; margin-bottom:210px;
/* IE6 */
_position:absolute;
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);
_bottom:auto;
overflow:visible;
}
.bg{ width:100%; height:200px; background:#000; -moz-opacity:0.6; -webkit-opacity:0.6; opacity:0.6; filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=60); }
.con{ width:100%; height:200px; color:#fff; position:relative; margin-top:-200px; }
.demo5 {
font: 16px/1 'Roboto', sans-serif;
text-align: center;
color: #555;
background: #ddd;
}
.demo {
padding: 0px 0;
border-bottom: 1px solid #aaaaaa;
background: #eee;
}
.demo:nth-child(odd) {
background: none;
}
.demo:last-child {
border: 0;
}
input[type='text1'] {
width: 120px;
padding: 10px 10px 12px 70px;
font-size: 15px;
color: #555;
border: 1px solid #aaaaaa;
background-color: #fff;
}
input[type='text2'] {
width: 120px;
padding: 10px 10px 12px 82px;
font-size: 15px;
color: #555;
border: 1px solid #aaaaaa;
background-color: #fff;
}
.css {
display: inline-block;
position: relative;
margin: 2px 2px 2px 2px;
}
.css input {
transition: .1s all linear;
}
.css label {
position: absolute;
top: 13px;
left: 10px;
font-size: 12px;
color: #000;
transition: .1s all linear;
cursor: text;
}
.demo5 .css.active label {
top: 8px;
left: 10px;
padding: 5px;
color: #fff;
background: #EC7515;
}
</style>
<div style="width:100%;margin:0 auto;">
<div id="contact" style="display:none ">
<form action="activityinfo_submit.html" method="post" name="form1" style="padding:0; margin:0">
<input type="hidden" name="pro" value="获取报价">
<div class="bg"></div>
<div class="con">
<table width="100%" border="0" cellspacing="0" cellpadding="0" >
<tr>
<td colspan="3" align="right" height="17" style="color:#ffffff"><span style="cursor:pointer;" οnclick="closewin()"><font size="3px">关闭 </span></td>
</tr>
<tr>
<td></td>
<td><table width="1050" align="center" b border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="310" rowspan="2"><img src="images/b1.png" width="300" height="48" /></td>
<td width="212"><div class="demo demo5">
<div class="css">
<label>您的姓名</label>
<input type="text1" name="Tname" id="linkman"/>
</div></td>
<td width="212"><div class="demo demo5">
<div class="css">
<label>您的手机号</label>
<input type="text2" name="tel" id="mobile"/>
</div></td>
<td rowspan="2" width="110" align="center"><input type="image" src="images/bm12.jpg" width="85" align="middle"/></td></a>
<td width="221" rowspan="2"><div align="center" style="color:#ffffff"><font size="5px"><strong>免费报价电话</strong></font> </div><br><p align="center" style="color:#EC7515">
<font size="5px"><strong>0510-85525598</strong></font></td>
</tr>
<tr>
<td width="212"><div class="demo demo5">
<div class="css">
<label>楼盘名称</label>
<input type="text1" name="loupan" id="mobile"/>
</div></td>
<td width="212"><div class="demo demo5">
<div class="css">
<label>建筑面积</label>
<input type="text2" name="addr" id="linkman"/>
</div></td>
<script src="js/baojia.js"></script>
</tr>
</table></td>
<td></td>
</tr>
</table></div>
</form>
</div>
<div id="lefttips" style="display:block">
<span style="cursor:pointer;" οnclick="openwin()"><img src="images/bmm.jpg"></span></td>
</div>
<div id="pageTop"></div>
<script type="text/javascript">
function openwinds(title,url){
layer.open({
type: 2,
title: title,
maxmin: true,
shadeClose: true, //点击遮罩关闭层
area : ['430px' , '400px'],
content: [url, 'no']
});
};
function closewin() {
document.getElementById("contact").style.display = 'none';
document.getElementById("lefttips").style.display = '';
}
function openwin() {
document.getElementById("contact").style.display = '';
document.getElementById("lefttips").style.display = 'none';
}
</script>