zoukankan      html  css  js  c++  java
  • 滚动到界面,元素缓慢滑出(jquery / css)

     万能的jquery:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>move</title>
     9 
    10     <style>
    11         .bg {
    12             margin: 0 auto;
    13             margin-top: 900px;
    14             margin-bottom: 900px;
    15              800px;
    16             height: 600px;
    17             position: relative;
    18             background-color: #000;
    19         }
    20 
    21         .move {
    22             position: absolute;
    23             top: 10px;
    24             left: 200px;
    25              400px;
    26             height: 300px;
    27             opacity: 0;
    28             background-color: #fff;
    29         }
    30     </style>
    31     <script src="style/js/jquery-1.11.3.min.js"></script>
    32     <script>
    33 
    34         $(function () {
    35             $(window).scroll(function () {
    36                 slideIn($(".move"), 150);
    37             });
    38 
    39             function slideIn(obj, left) {
    40                 var MoveHeight, ScrollHeight;
    41                 MoveHeight = obj.offset().top;        //目标元素到顶部的距离
    42                 ScrollHeight = $(window).scrollTop(); //页面滚动的距离
    43 
    44                 if (ScrollHeight > MoveHeight - 750) {
    45                     obj.animate({ left: left + 'px', opacity: 1, filter: 'Alpha(opacity=90)' }, 500);
    46                 }
    47             };
    48 
    49         });
    50 
    51     </script>
    52 
    53 </head>
    54 
    55 <body>
    56     <div class="bg">
    57         <div class="move">
    58             jquery
    59         </div>
    60     </div>
    61 
    62 
    63 </body>
    64 
    65 </html>

     简单的css:

     1 <!DOCTYPE html>
     2 <html lang="en">
     3 
     4 <head>
     5     <meta charset="UTF-8">
     6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     7     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     8     <title>move</title>
     9 
    10     <style>
    11         .bg {
    12             margin: 0 auto;
    13             margin-top: 50px;
    14             width: 800px;
    15             height: 600px;
    16             position: relative;
    17             background-color: #000;
    18         }
    19 
    20         .move {
    21             position: relative;
    22             animation: mymove 0.5s;
    23             -webkit-animation: mymove 0.5s;
    24             animation-fill-mode: forwards;
    25             top: 10px;
    26             width: 400px;
    27             height: 300px;
    28             opacity: 0;
    29             background-color: #fff;
    30         }
    31 
    32         @keyframes mymove {
    33             from {
    34                 left: 200px;
    35                 opacity: 0;
    36                 filter: alpha(opacity=0);
    37             }
    38 
    39             to {
    40                 left: 150px;
    41                 opacity: 1.0;
    42                 filter: alpha(opacity=100);
    43             }
    44         }
    45 
    46     </style>
    47 
    48 </head>
    49 
    50 <body>
    51     <div class="bg">
    52         <div class="move">
    53             css
    54         </div>
    55     </div>
    56 
    57 </body>
    58 
    59 </html>
  • 相关阅读:
    生成淘宝在线旺旺页面入口
    IE6下的fixed实现
    HTML和XHTML的区别
    各大浏览器内核介绍(Rendering Engine)
    [导入]从架构设计到系统实施——基于.NET 3.0的全新企业应用系列课程(5):设计基于WPF的客户端.zip(6.98 MB)
    Java核心类库——java中的包装类
    Java语言基础——运算符
    Java核心类库——集合的迭代(遍历) Iterator接口
    Java语言基础——循环控制语句while for
    Java语言基础——方法
  • 原文地址:https://www.cnblogs.com/0xiaoyu/p/11435860.html
Copyright © 2011-2022 走看看