基于jq中奖记录效果实现

最近需要做一个中奖记录的滚动效果,下面来写一个基于jq的呆毛:

效果图:
这里写图片描述

html代码:主要是把中奖记录做一个展示

<div class="panel">
    <h2>中奖记录</h2>
    <div class="activity" id="list">
      <ul>
        <li>吴琼琼1 获得了iphone7</li>
        <li>吴琼琼2 获得了imac</li>
        <li>吴琼琼3 获得了iwatch</li>
        <li>吴琼琼4 获得了好吃的</li>
        <li>吴琼琼5 获得了哈哈哈哈</li>
      </ul>
    </div>
  </div>

js:

$(function() {
  var listPanel = $('#list ul');
  var z = 0; //向上滚动top值
  function up() { //向上滚动
    listPanel.animate({ //中奖结果
      'top': (z - 35) + 'px'
    }, 1500, 'linear', function() {
      listPanel.css({
          'top': '0px'
        })
        .find("li:first").appendTo(listPanel);
      up();
    });
  }
  up();
});

animate() 方法执行 CSS 属性集的自定义动画。
该方法通过CSS样式将元素从一个状态改变为另一个状态。CSS属性值是逐渐改变的,这样就可以创建动画效果。
只有数字值可创建动画(比如 “margin:30px”)。字符串值无法创建动画(比如 “background-color:red”)。请猛戳戳戳戳jQuery 效果 - animate() 方法


appendTo() 方法在被选元素的结尾(仍然在内部)插入指定内容。请猛戳戳戳戳jQuery 文档操作 - appendTo() 方法

以下是一个简单的基于jQuery的登录界面实现: HTML: ```html <div class="login-container"> <form class="login-form"> <h2>Login</h2> <div class="form-group"> <label for="username">Username</label> <input type="text" id="username" name="username" required> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" id="password" name="password" required> </div> <button type="submit">Login</button> </form> </div> ``` CSS: ```css .login-container { display: flex; justify-content: center; align-items: center; height: 100vh; } .login-form { background-color: #fff; border-radius: 5px; padding: 2rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); width: 400px; } .login-form h2 { text-align: center; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; margin-bottom: 0.5rem; } .form-group input { width: 100%; padding: 0.5rem; border-radius: 3px; border: 1px solid #ccc; } button[type="submit"] { background-color: #4CAF50; color: #fff; border: none; padding: 0.5rem 1rem; border-radius: 3px; cursor: pointer; width: 100%; } button[type="submit"]:hover { background-color: #3e8e41; } ``` jQuery: ```javascript $(document).ready(function() { $(".login-form").submit(function(e) { e.preventDefault(); var username = $("#username").val(); var password = $("#password").val(); if (username === "admin" && password === "password") { alert("Login Successful!"); // do something after successful login } else { alert("Invalid username or password!"); // do something after failed login } }); }); ``` 在这个例子中,我们使用jQuery选择器和事件处理程序来获取表单的值,并根据它们执行适当的操作。在这种情况下,我们只是弹出一个警报框,但你可以根据你的需求进行更改。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值