<!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> |
悬浮广告特效
猜你喜欢
转载自www.cnblogs.com/zykzyk/p/11390824.html
今日推荐
周排行