| <!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
今日推荐
周排行