| |
<!DOCTYPE html> |
| |
<html lang="en"> |
| |
<head> |
| |
<meta charset="UTF-8"> |
| |
<title>悬浮的小广告</title> |
| |
<style> |
| |
.left{ |
| |
width: 100px; |
| |
height: 150px; |
| |
background-color: orange; |
| |
position: absolute; |
| |
top: 250px; |
| |
left: 0; |
| |
} |
| |
.left span{ |
| |
position: absolute; |
| |
top: 0; |
| |
right: 0; |
| |
display: block; |
| |
} |
| |
.right{ |
| |
width: 100px; |
| |
height: 150px; |
| |
position: absolute; |
| |
background-color: orange; |
| |
top: 250px; |
| |
right: 0; |
| |
} |
| |
.right span{ |
| |
position: absolute; |
| |
display: block; |
| |
top: 0; |
| |
left: 0; |
| |
} |
| |
.center{ |
| |
position: absolute; |
| |
left: 12%; |
| |
} |
| |
</style> |
| |
<script src="js/jquery-1.11.3.min.js"></script> |
| |
<script> |
| |
$(function(){ |
| |
var num = $('.div1').offset().top; |
| |
var a = ($(window).height() - $('.div1').height())/2; |
| |
$('.div1').css('top','50px').animate({top:a},1000) |
| |
$(window).scroll(function(){ |
| |
var new_el = $(this).scrollTop(); |
| |
var now = a + new_el; |
| |
$('.div1').stop(true).animate({top:now},1000) |
| |
}) |
| |
}) |
| |
</script> |
| |
</head> |
| |
<body> |
| |
<div class="left div1"> |
| |
<span>X</span> |
| |
</div> |
| |
<div class="right div1"> |
| |
<span>X</span> |
| |
</div> |
| |
<div class="center"> |
| |
<img src="images/44/content.png" alt=""> |
| |
</div> |
| |
</body> |
| |
</html> |