实例之*抽奖-html教程-PHP中文网

首页

web前端

html教程

实例之*抽奖

PHP中文网

Aug 15, 2016 pm 04:49 PM

现在学习到了过渡效果了，已经开始有做动画效果的意识了，会实现一些比较炫的小玩意，

一个网页加入过渡动画效果，会让人看起来很有美观，不僵硬，有看头，动画是一个网页

美观的主要体现之一，下面做个使用个过渡效果实现的抽奖例子。

先来效果图：

这个的实现需要使用到一些js代码。

所需图片：

这张图是pointer.png的位置的。

turntable-bg.jpg这张是背景图，在背景位置。

登录后复制

这张是turntable.png位置的。

登录后复制

需要这三张图片，如果要实现一下，直接另存这三图片引入进去即可。如果不会请修改成对应的图片名字，放到同一个文件下。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <!-- 这里是css部分 -->
    <style>
        #bg{
            width: 650px;
            height: 600px;
            margin: 0 auto;
            background: url(turntable-bg.jpg) no-repeat;
            position: relative;
        }
        img[src^="pointer"]{
            position: absolute;
            z-index: 10;
            top: 155px;
            left: 247px;
        }
        img[src^="turntable"]{
            position: absolute;
            z-index: 5;
            top: 60px;
            left: 116px;
            transition: all 4s;
        }
        
    </style>
</head>
<body>
<!-- 这里是HTML结构部分 -->
    <div id="bg">
        <img src="pointer.png" alt="pointer">
        <img src="turntable.png" alt="turntable">
    </div>
    <!-- 这里是js部分 -->
    <script>
        var oPointer=document.getElementsByTagName("img")[0];
        var oTurntable=document.getElementsByTagName("img")[1];
        var cat=51.4;
        var num=0;
        var offOn=true;
        document.title="";
        
        oPointer.onclick=function(){
            if(offOn){
            oTurntable.style.transform="rotate(0deg)";
            offOn=!offOn;
            ratating();
            }
        }

        function ratating(){
            var timer=null;
            var rdm=0;
            clearInterval(timer);
            timer=setInterval(function(){
                if(Math.floor(rdm/360)<3){
                    rdm=Math.floor(Math.random()*3600);    
                }else{
                    oTurntable.style.transform="rotate("+rdm+"deg)";
                    clearInterval(timer);
                    setTimeout(function(){
                        offOn=!offOn;
                        num=rdm%360;
                        if(num<=cat*1){
                        alert("4999元");
                        }else if(num<=cat*2){
                            alert("条50元");
                            }else if(num<=cat*3){
                            alert("10元");
                            }else if(num<=cat*4){
                            alert("5元");
                            }else if(num<=cat*5){
                            alert("免息服务");
                            }else if(num<=cat*6){
                            alert("提交白金");
                            }else if(num<=cat*7){
                            alert("未中奖");
                            }
                    },4000);
                }    
            },30);    
        }
    </script>
</body>
</html>

登录后复制

css和HTML代码不多，主要是为了实现过渡设置，还有为了实现层叠而使用position定位，让元素脱离文档流，js代码在于获取元素和

事件的点击，点击指针会旋转，所以要给指针加个点击事件，然后是判断旋转是否停止，如果没有就点击也不能调用函数ratating()，这个

函数执行转盘的旋转和判断指针停在什么位置，然后弹出相应的内容，而函数里实现旋转的过程，是获取转盘的元素，然后使用js控制css

的属性-transform：rotate()，我们不是使用过这个属性在css里直接使它实现旋转的效果吗？就是和伪类选择器:hover及过渡属性一起使

用去实现的，那么因为css实现不了数字的运算和鼠标点击，所以让js去实现且控制css属性，实现到点击旋转这个功能，然而定时器的使用

暂时不说，思路就是使用js实现数字的运算和鼠标的点击及css属性的控制达到旋转的效果。

Math.random()是随机数的生成，Math.floor()向下取整。

再来个今天某人说过的例子：

纯css下拉菜单：

效果图

这个的实现很简单，主要是:hover和过渡属性transition的使用。

代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>css</title>
    <style>
        *{
            margin: 0;
            padding:0;
            font-size: 16px;
            font-family: "微软雅黑";
        }
        #container{
            width: 100px;
            margin: 0 auto;
            text-align: center;
            position: relative;
        }
        #container ul{
            list-style: none;
        }
        #container span{
            display: inline-block;
            width: 100px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }
        #container ul{
            height: 0;
            width: 100px;
            overflow: hidden;
            transition: all 1s;
            position: absolute;
            top: 30px;
            left: 0px;
        }
        #container:hover ul{
            height: 330px;
        } 
        #container ul li{
            background: #eee;
            margin-top: 3px;
            cursor: pointer;
            height: 30px;
            line-height: 30px;
        }
    </style>
</head>
<body>
    <div id="container">
        <span>移动</span>
        <ul>
            <li>这里有1</li>
            <li>这里有2</li>
            <li>这里有3</li>
            <li>这里有4</li>
            <li>这里有5</li>
            <li>这里有6</li>
            <li>这里有7</li>
            <li>这里有8</li>
            <li>这里有9</li>
            <li>这里有10</li>
        </ul>
    </div>
</body>
</html>

登录后复制

因为ul是个伸缩对象，所以要让它脱离文档流，不是在实用时会影响到布局，给它一个绝对定位即可。

以上就是实例之轮盘抽奖的内容，更多相关内容请关注PHP中文网（www.php.cn）！

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn