• 520表白日,做个小demo玩玩


    demo简介:可以通过修改参数,改变显示的姓名。

      1 <!DOCTYPE html>
      2 <html>
      3 <head lang="en">
      4     <meta charset="UTF-8">
      5     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
      6     <!--<link rel="stylesheet" href="520.css"/>-->
      7     <style>
      8         ul,
      9         li {
     10             padding: 0;
     11             margin: 0;
     12         }
     13         .container {
     14             width: 440px;
     15             height: 200px;
     16             background-color: #eeeeee;
     17             position: relative;
     18             overflow: hidden;
     19             background: url("http://5.26923.com/download/pic/000/338/5592302fe1ef0eb6168da88d12cc6c12.jpg") no-repeat;
     20             background-size: 440px 200px;
     21             color: #ff0000;
     22             border: 1px solid #f00;
     23         }
     24         .container p {
     25             display: inline-block;
     26             background: url("http://i4.tinypic.com/23uy4bb.gif") no-repeat;
     27             width: 200px;
     28             height: 200px;
     29             background-size: 200px 200px;
     30         }
     31         .container li {
     32             width: 100%;
     33             height: 100%;
     34             position: absolute;
     35             overflow: hidden;
     36             top: 30px;
     37             left: 30px;
     38         }
     39         .container li b {
     40             position: absolute;
     41             font-size: 20px;
     42             font-family: 'Microsoft yahei';
     43         }
     44         .container li.second {
     45             left: 10em;
     46         }
     47         .container li.third {
     48             left: 18em;
     49         }
     50         .container li.first > b:nth-child(1) {
     51             top: 0em;
     52             left: 0em;
     53         }
     54         .container li.first > b:nth-child(2) {
     55             top: 0em;
     56             left: 1.5em;
     57         }
     58         .container li.first > b:nth-child(3) {
     59             top: 0em;
     60             left: 3em;
     61         }
     62         .container li.first > b:nth-child(4) {
     63             top: 0em;
     64             left: 4.5em;
     65         }
     66         .container li.first > b:nth-child(5) {
     67             top: 1.5em;
     68             left: 0em;
     69         }
     70         .container li.first > b:nth-child(6) {
     71             top: 3em;
     72             left: 0em;
     73         }
     74         .container li.first > b:nth-child(7) {
     75             top: 3em;
     76             left: 1.5em;
     77         }
     78         .container li.first > b:nth-child(8) {
     79             top: 3em;
     80             left: 3em;
     81         }
     82         .container li.first > b:nth-child(9) {
     83             top: 3em;
     84             left: 4.5em;
     85         }
     86         .container li.first > b:nth-child(10) {
     87             top: 4.5em;
     88             left: 4.5em;
     89         }
     90         .container li.first > b:nth-child(11) {
     91             top: 6em;
     92             left: 0em;
     93         }
     94         .container li.first > b:nth-child(12) {
     95             top: 6em;
     96             left: 1.5em;
     97         }
     98         .container li.first > b:nth-child(13) {
     99             top: 6em;
    100             left: 3em;
    101         }
    102         .container li.first > b:nth-child(14) {
    103             top: 6em;
    104             left: 4.5em;
    105         }
    106         .container li.second > b:nth-child(1) {
    107             top: 0em;
    108             left: 0em;
    109         }
    110         .container li.second > b:nth-child(2) {
    111             top: 0em;
    112             left: 1.5em;
    113         }
    114         .container li.second > b:nth-child(3) {
    115             top: 0em;
    116             left: 3em;
    117         }
    118         .container li.second > b:nth-child(4) {
    119             top: 0em;
    120             left: 4.5em;
    121         }
    122         .container li.second > b:nth-child(5) {
    123             top: 1.5em;
    124             left: 4.5em;
    125         }
    126         .container li.second > b:nth-child(6) {
    127             top: 3em;
    128             left: 0em;
    129         }
    130         .container li.second > b:nth-child(7) {
    131             top: 3em;
    132             left: 1.5em;
    133         }
    134         .container li.second > b:nth-child(8) {
    135             top: 3em;
    136             left: 3em;
    137         }
    138         .container li.second > b:nth-child(9) {
    139             top: 3em;
    140             left: 4.5em;
    141         }
    142         .container li.second > b:nth-child(10) {
    143             top: 4.5em;
    144             left: 0em;
    145         }
    146         .container li.second > b:nth-child(11) {
    147             top: 6em;
    148             left: 0em;
    149         }
    150         .container li.second > b:nth-child(12) {
    151             top: 6em;
    152             left: 1.5em;
    153         }
    154         .container li.second > b:nth-child(13) {
    155             top: 6em;
    156             left: 3em;
    157         }
    158         .container li.second > b:nth-child(14) {
    159             top: 6em;
    160             left: 4.5em;
    161         }
    162         .container li.third > b:nth-child(1) {
    163             top: 0em;
    164             left: 0.75em;
    165         }
    166         .container li.third > b:nth-child(2) {
    167             top: 0em;
    168             left: 2.25em;
    169         }
    170         .container li.third > b:nth-child(3) {
    171             top: 0em;
    172             left: 3.75em;
    173         }
    174         .container li.third > b:nth-child(4) {
    175             top: 1.5em;
    176             left: 0em;
    177         }
    178         .container li.third > b:nth-child(5) {
    179             top: 1.5em;
    180             left: 4.5em;
    181         }
    182         .container li.third > b:nth-child(6) {
    183             top: 3em;
    184             left: 0em;
    185         }
    186         .container li.third > b:nth-child(7) {
    187             top: 3em;
    188             left: 4.5em;
    189         }
    190         .container li.third > b:nth-child(8) {
    191             top: 4.5em;
    192             left: 0em;
    193         }
    194         .container li.third > b:nth-child(9) {
    195             top: 4.5em;
    196             left: 4.5em;
    197         }
    198         .container li.third > b:nth-child(10) {
    199             top: 6em;
    200             left: 0.75em;
    201         }
    202         .container li.third > b:nth-child(11) {
    203             top: 6em;
    204             left: 2.25em;
    205         }
    206         .container li.third > b:nth-child(12) {
    207             top: 6em;
    208             left: 3.75em;
    209         }
    210 
    211     </style>
    212     <title>520表白日</title>
    213     <script>
    214         $(function(){
    215             var name='牛大宝';//这里可以改成你自己的名字
    216             var li=$('.container>li');
    217             function show(name){
    218                 name=name.split("");
    219                 li.each(function(i){
    220                     li.eq(i).children('b').html(name[i]);
    221                 });
    222             }
    223             show(name);
    224             var con=$('.container');
    225             con.mouseenter(function(){
    226                 li.each(function(i){
    227                     var b=li.eq(i).children('b');
    228                     b.each(function(j){
    229 //                        console.log(b.eq(j).text());
    230                     });
    231                 });
    232                 $(this).children('p').hide();
    233             });
    234             con.mouseleave(function(){
    235                 $(this).children('p').show();
    236             });
    237         });
    238     </script>
    239 </head>
    240 <body>
    241     <ul class="container">
    242         <p></p><p></p>
    243        <li class="first">
    244            <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
    245        </li>
    246        <li class="second">
    247            <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
    248        </li>
    249        <li class="third">
    250            <b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b><b></b>
    251        </li>
    252     </ul>
    253 </body>
    254 </html>
    haley欢迎您来访本博客。此博客是作者在工作中的一个记事本,方便下次遇到同样问题时,以最快的速度解决掉遇到的问题。如果您发现哪里写的不对,欢迎给我留言,让我们一起进步。不胜感激!
  • 相关阅读:
    Vue源码学习之双向绑定
    Vue源码学习之数据初始化
    JavaScript跨域资源请求(CORS)解决方案
    Vue学习笔记
    MongoDB学习笔记
    实现一个类似bootstrap的多级下拉菜单
    bootstrap栅格系统的实现
    滑动效果的标签页切换
    一个简单的类似Vue的双向绑定
    元素垂直居中的常见方法
  • 原文地址:https://www.cnblogs.com/haley168/p/520biaobairi.html
Copyright © 2020-2023  润新知