在悬浮框里面加上超链接就行了
*{ padding:0px margin:0px}
.box{ width:1000px background:#ccc margin:0 auto overflow:hidden}
.main{ width:770px height:2000px background:#000 float:left}
.sub{ width:220px background:#FC6 float:right}
.sub01{ width:220px height:100px background:#0CC margin-bottom:10px}
.fixed{ width:220px height:300px background:#F66 font:normal 13px/30px \5FAE\8F6F\96C5\9ED1 text-align:center top:10px}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "
<html xmlns="
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8" />
<title>悬浮框</title>
<link type="text/css" href="css/lrtk.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/js.js"></script>
</head>
<body>
<div class="box">
<div class="main"></div>
<div class="sub">
<div class="sub01"></div>
<div class="sub01"></div>
<div class="fixed">我是悬浮框</div>
</div>
</div>
</body>
</html>
$(document).ready(function(e) {
t = $('.fixed').offset().top
mh = $('.main').height()
fh = $('.fixed').height()
$(window).scroll(function(e){
s = $(document).scrollTop()
if(s > t - 10){
$('.fixed').css('position','fixed')
if(s + fh > mh){
$('.fixed').css('top',mh-s-fh+'px')
}
}else{
$('.fixed').css('position','')
}
})
})
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>fixed</title>
<style>
*{
margin:0
padding: 0
}
.fixedMenu{
border: 1px solid #ccc
list-style: none
margin-top: -160px
position: fixed
right: 40px
top:50%
}
.fixedMenu li {
border-bottom: 1px solid #ccc
width: 80px
height: 80px
line-height: 80px
margin-bottom: -1px
text-align: center
}
</style>
</head>
<body>
<ul class="fixedMenu">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
提示：你既然有页面效果就可以用F12,打开调试工具，看源码。
做到比较简单<!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/htmlcharset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#apDiv1 {
position:absolute
width:200px
height:115px
z-index:1
background-color:#CCC
left: 165px
top: 211px
display:none
}
</style>
<script type="text/javascript">
function a(){
var a=document.getElementById("a").value
if(a=="tijiao"){
document.getElementById("apDiv1").style.display="block"
}
}
</script>
</head>
<body>
<input type="button" value="tijiao" id="a" onclick="a()" />
<div id="apDiv1">hello</div>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）