js+css实现骰子的随机转动

网上找的例子，然后增添了新的东西，在这里展示一下......

效果图预览：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>js+css3实现3D骰子特效 - 站长素材</title>

<style>

* { margin:0; padding:0; }

body { background:#efefef; overflow:hidden; }

h1 {

    text-align:center; margin-top:40px; text-shadow:1px 1px 3px #000; font-size:40px; color:#fff;

}

#shadow {

    height:300px; width:600px; position:absolute; top:400px; left:0; z-index:0;

    background:-webkit-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );

    background:-moz-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );

    background:-ms-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );

    background:-o-radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );

    background:radial-gradient(center center , 150px 50px, #cfcfcf, #efefef );

    -webkit-transform:perspective(100px) rotateX(60deg) rotateY(0deg);

    -moz-transform:perspective(100px) rotateX(60deg) rotateY(0deg);

    -ms-transform:perspective(100px) rotateX(60deg) rotateY(0deg);

    -o-transform:perspective(100px) rotateX(60deg) rotateY(0deg);

    transform:perspective(100px) rotateX(60deg) rotateY(0deg);

    opacity:0;

}

#container {

    /*background:black;*/

    height:240px; width:240px; position:absolute; top:180px; z-index:1;

    -webkit-transform-style:preserve-3d;

    -moz-transform-style:preserve-3d;

    -ms-transform-style:preserve-3d;

    -o-transform-style:preserve-3d;

    transform-style:preserve-3d;

    -webkit-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;

    -moz-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;

    -ms-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;

    -o-transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;

    transform:perspective(2000px) rotateX(-10deg) rotateY(45deg) ;

}

#container p {

    position:absolute;

    top:40%;

    left:35%;

    padding:5px;

    word-spacing:0.2em;

    line-height:20px;

    background:black;

    color:#fff;

    text-align:center;

}

#container div {

     height:240px; width:240px; position:absolute; left:0; top:0; color:#fff; line-height:240px; text-align:center; font-weight:bold; font-size:80px; cursor:pointer;

     background:rgba( 239,239,239, 1 );

     -webkit-transition:500ms all ease;

     -moz-transition:500ms all ease;

     -ms-transition:500ms all ease;

     -o-transition:500ms all ease;

     transition:500ms all ease;

}

#container div div {

    border:1px solid #fff; /* rgba( 255,255,255, 1 ) */

    box-shadow:1px 0 3px #fff,1px 0px 10px #efefef;

    border-radius:8px;

    background:-webkit-radial-gradient(center, #d81002, #b20c00 );

    background:-moz-radial-gradient(center, #d81002, #b20c00 );

    background:-ms-radial-gradient(center, #d81002, #b20c00 );

    background:-o-radial-gradient(center, #d81002, #b20c00 );

    background:radial-gradient(center, #d81002, #b20c00 );

}

#container div div:hover {

    background:-webkit-radial-gradient(center, #f00, #b20c00 );

    background:-moz-radial-gradient(center, #f00, #b20c00 );

    background:-ms-radial-gradient(center, #f00, #b20c00 );

    background:-o-radial-gradient(center, #f00, #b20c00 );

    background:radial-gradient(center, #f00, #b20c00 );

}

#container div ul {

    list-style:none;

    margin:30px;

}

#container div li {

    width: 60px;

    height:60px;

    float:left;

    overflow:hidden;

    -webkit-transition:500ms all ease;

    -moz-transition:500ms all ease;

    -ms-transition:500ms all ease;

    -o-transition:500ms all ease;

    transition:500ms all ease;

}

#container div li span  {

    width:50px; height:50px; margin:5px auto;

    display:block;

    background:-webkit-linear-gradient(top, #eee, #fff );

    background:-moz-linear-gradient(top, #eee, #fff );

    background:-ms-linear-gradient(top, #eee, #fff );

    background:-o-linear-gradient(top, #eee, #fff );

    background:linear-gradient(top, #eee, #fff );

    border-radius:25px;

    box-shadow:-1px -1px 2px #000;

}

</style>

<script src="Aui-core-1.42-min.js" language="javascript" type="text/javascript"></script>

<script language="javascript" type="text/javascript">

Aui.ready( function()

{

    if( /ie/g.test( Aui.browser() ) )

    {

        Aui("body").html("Adam CSS 3.0 effect，支持非IE浏览器。你懂的！")

                   .setStyle(

                   {

                       "color" : "#000",

                       "text-align" : "center",

                    "font-size" : "50px",

                    "font-weight" : "bolder",

                    "line-height" : "500px"

                   });

    }

    else

    {

        var oDoc = Aui(document),

            docWidth = oDoc.width();

        Aui("body").html("<div id=\"hujunzheng\"></h1><div id=\"container\" style=\"left:"+ ( ( docWidth - 240 )*0.5 ) +"px;\"></div><strong id=\"shadow\" style=\"left:"+ ( ( docWidth - 600 )*0.5 ) +"px;\"></strong></div>");

        var oContainer = Aui.byID("#container")[0],

            AuiCon = Aui( oContainer ),

            AuiShadow = Aui("#shadow"),

            transform = function( elem, value, key )

            {

                key = key || "transform";

                [ "-webkit-", "-moz-", "-ms-", "-o-", "" ].forEach( function( pre )

                {

                    elem.style[ pre + key ] = value;

                });    

                return elem;

            },

            piece = function( value, key )

            {

                var str = "";

                key = key || "transform";

                [ "-webkit-", "-moz-", "-ms-", "-o-",  "" ].forEach( function( pre )

                {

                    str += ( pre + key + ":" + value );

                    return false;

                });    

                return str;

            },

            startMove = function startMove( obj )

            {

                obj.timer = obj.timer || null;

                clearInterval( obj.timer );

                obj.timer = setInterval (function ()

                {

                    x -= speedY;

                    y += speedX;

                    speedY *= 0.95;

                    speedX *= 0.95;

                    if( Math.abs( speedX ) < 0.1 && Math.abs( speedY ) < 0.1 )

                    {

                        stopMove( obj.timer );

                    };

                    transform( obj, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );

                }, 30);

            },

            stopMove = function( t )

            {

                clearInterval( t );

            },

            addEvent = function ( obj, sEvent, fn )

            {

                if( obj.attachEvent )

                {

                    obj.attachEvent( "on" + sEvent, fn );

                }

                else

                {

                    obj.addEventListener( sEvent, fn, false );

                };

            },

            onMouseWheel = function( e )

            {

                if( e.wheelDelta ? e.wheelDelta < 0 : e.detail > 0 )

                {

                    if( pers < 2000 )

                    {

                        pers += 50;

                        _top -= 0.5;

                    };

                }

                else

                {

                    if( pers > 50 )

                    {

                        pers -= 50;

                        _top += 0.5;

                    };

                };

                AuiShadow.setStyle( "top", _top );

                transform( oContainer, "perspective(" + pers + "px) rotateX("+ x +"deg) rotateY(" + y +"deg)" );

                if( e.preventDefault )

                {

                    e.preventDefault();

                };

                return false;

            },

            setNum = function( obj, n )

            {

                var arr = [

                    [ 4 ],

                    [ 0, 8 ],

                    [ 0, 4, 8 ],

                    [ 0, 2, 6, 8 ],

                    [ 0, 2, 4, 6, 8 ],

                    [ 0, 2, 3, 5, 6, 8]

                ];

                Aui.each( arr[n], function( i , v )

                {

                    obj.find("li")

                       .eq( v )

                       .html("<span></span>");

                });

            }; 

            x = -10,

            y = 45,

            speedX = 0,

            speedY = 0,

            i = 1,

            d_x = 0,

            d_y = 0,

            d_z = 519,

            pers = 2000,

            _top = 400;

        while( i < 7 )

        {

            if( i < 5 )

            {

                d_x = 0;

                d_y = i * 90;

            }

            else if( i === 5 )

            {

                d_x = 90;

                d_y = 0;

            }

            else

            {

                d_x = -90;

                d_y = 0;

            };

            AuiCon.append( "<div id=\"box-"+ i +"\" style=\""+ piece("rotateX(" + d_x + "deg) rotateY(" + d_y + "deg) translateZ(" + d_z + "px) scaleX( 0.4 ) scaleY( 0.4 );") +"opacity:0;\"><div><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul></div></div>" );

            i += 1;

        };

        var oDiv = AuiCon.children("div");

        Aui.each( oDiv, function( i )

        {

            ( function( d , obj )

            {

                setTimeout( function()

                {

                    obj.style.opacity = 1;

                    setTimeout( function()

                    {

                        setNum( Aui( obj ), d );

                        if( d < 4 )

                        {

                            transform( obj, "rotateX(0deg) rotateY(" + ( i * 90 )+"deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );

                        }

                        else if( d === 5 )

                        {

                            transform( obj, "rotateX(90deg) rotateY(0deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );

                            setTimeout( function()

                            {

                                AuiShadow.fx({ opacity : 1 }, 400 );

                                Aui.each( oDiv, function( x )

                                {

                                    if(  x < 4 )

                                    {

                                        transform( this, "rotateX(0deg) rotateY(" + ( x * 90 )+"deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );

                                    }

                                    else if( x === 5 )

                                    {

                                        transform( this, "rotateX(90deg) rotateY(0deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );

                                    }

                                    else if( x === 4)

                                    {

                                        transform( this, "rotateX(-90deg) rotateY(0deg) translateZ(72px) scaleX( 0.6 ) scaleY( 0.6 )" );

                                    };

                                });

                            }, 400 );

                        }

                        else if( d === 4)

                        {

                            transform( obj, "rotateX(-90deg) rotateY(0deg) translateZ(180px) scaleX( 1 ) scaleY( 1 )" );

                        };

                    } , 100 );

                } , d * 200 );

            })( i, this );

        });

        oDoc.mousedown( function( e )

        {

            var moveX = e.clientX,

                moveY = e.clientY;

            var startX = x;

            var startY = y;

            var lastX = moveX;

            var lastY = moveY;

            speedX = speedY = 0;

            oDoc.mousemove( function( e )

            {

                y = startY + ( e.clientX - moveX )/5;

                x = startX - ( e.clientY - moveY )/5;

                transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );

                speedX = Math.ceil( ( e.clientX - lastX )/2 );

                speedY = Math.ceil( ( e.clientY - lastY )/2 );

                lastX = e.clientX;

                lastY = e.clientY;

            });

            oDoc.mouseup( function()

            {

                this.onmousemove = null;

                this.onmouseup = null;

                startMove( oContainer );

            });

            stopMove( oContainer.timer );

            return false;

        });

        var wheel = function( e )

        {

            onMouseWheel.call( null, e || window.event );

        };

        addEvent( oDoc[0], "mousewheel", wheel );

        addEvent( oDoc[0], "DOMMouseScroll", wheel );

    };

    /*

        加入之后使得在骰子生成之后开始转动
　　　　　2s之后执行 每隔100ms执行函数（模拟鼠标的移动位置）

    */

    window.setTimeout(function(){

        var cntcc = 0;

        var hjzgg;

        var clientX = Math.ceil(Math.random()*500);

        var clientY = Math.ceil(Math.random()*500);

        var moveX = clientX,

            moveY = clientY;

        var startX = x;

        var startY = y;

        var lastX = moveX;

        var lastY = moveY;

        speedX = speedY = 0;

        hjzgg=window.setInterval(function(){

            ++cntcc;

            y = startY + ( clientX - moveX )/5;

            x = startX - ( clientY - moveY )/5;

            if(cntcc==50){

                 window.clearInterval(hjzgg);

            }

            transform( oContainer, "perspective(" + pers + "px) rotateX("+ Math.ceil( x ) +"deg) rotateY(" + Math.ceil( y ) +"deg)" );

            speedX = Math.ceil( ( clientX - lastX )/2 );

            speedY = Math.ceil( ( clientY - lastY )/2 );

            lastX = clientX;

            lastY = clientY;

            clientX = Math.ceil(Math.random()*500);

            clientY = Math.ceil(Math.random()*500);

        }, 100);

    },2000); 

    /*********************************************************/

});

</script>

</head>

<body>

</body>

</html>

项目下载地址：

http://files.cnblogs.com/files/hujunzheng/%E8%BD%AC%E5%8A%A8%E7%9A%84%E9%AA%B0%E5%AD%90.zip

js+css实现骰子的随机转动的更多相关文章

页面加载异常清除浏览器静态文件 js css 缓存 js动态加载js css文件,可以配置文件后辍，防止浏览器缓存
js清除浏览器缓存的几种方法 - 兔老霸夏 - 博客园 https://www.cnblogs.com/Mr-Rocker/p/6031096.html js清除浏览器缓存的几种方法一.CSS和 ...
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度
使用PHP和GZip压缩网站JS/CSS文件加速网站访问速度一些泛WEB 2.0网站为了追求用户体验,可能会大量使用CSS和JS文件.这就导致在服务器带宽一定的情况下,多用户并发访问速度变慢.如何加 ...
JS实现掷骰子
JS实现掷骰子实现方法: 方法一:通过background-position.background-image.backg-repeat三个属性以及jquery animate()方法改变背景骰子图 ...
electron之Windows下使用 html js css 开发桌面应用程序
1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...
JS/CSS缓存杀手——VS插件
背景前些天去考科目二,感觉经历了一场不是高考却胜似高考的考试(10年前的5分之差, 还是难以释怀)! 一行八人,就我学的时间最少(4天,8人一辆车),教练都觉得我肯定还得再来一次! 靠着运气和 ...
gulp实现打包js/css/img/html文件，并对js/css/img文件加上版本号
参考打包教程: http://www.cnblogs.com/tugenhua0707/p/4069769.html http://www.cnblogs.com/tugenhua0707/p/498 ...
配置springMVC之后,引入js,css等资源处理
配置了sringMVC之后,要引入js,css处理: 做法1:在<%page %>下面增加: <%@ taglib prefix="yesurl" uri=&qu ...
springmvc js/css路径问题
①No mapping found for HTTP request with URI[/msm2/css/login2.css] in DispatcherServlet with name 'sp ...
iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求最近开发的项 ...

随机推荐

git上传代码到osc@git
1.get an account 2.get a ssh-key 3.git setting git config --global user.name "...." git co ...
前端UI框架和JS类库
一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
dedecms功能性函数封装(XSS过滤、编码、浏览器XSS hack、字符操作函数)
dedecms虽然有诸多漏洞,但不可否认确实是一个很不错的内容管理系统(cms),其他也不乏很多功能实用性的函数,以下就部分列举,持续更新,不作过多说明.使用时需部分修改,你懂的 1.XSS过滤. f ...
2016NOIP总结
从暑假开始学OI到现在,也已经过了4个月.说实话真是快啊...感觉没学什么东西就要去比赛了.怎么说呢,感觉自己真的是个菜鸡啊为什么就要去比赛呢.当初来到这里,是凭着兴趣来的,第一天能打那么多道题(19 ...
windows下装多个node版本的方法(gnvm)
安装一个支持windows切换node版本的工具工作中我们可能需要用到一些工具,但这些工具依赖不同版本的node环境,那我们需要来为的切换node的环境吗, window msi安装的用户需要卸 ...
html、canvas、视频灰度、反色
效果图: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=" ...
qemu ubuntu for zynq（armhf）
apt-get install qemu-user-static qemu-system mkdir qemu-ubuntu qemu-debootstrap --arch=armhf trusty ...
SQL Server全时区转换
SQL Server全时区转换假如你的应用程序是跨国(例如跨国银行交易)使用的话,那么数据库的一些国际化特性支持可以说是非常重要其中最常见的就是各国时区上的差异,由于SQL Server getd ...
多彩的Console打印新玩法
Chrome应该是每一个Web开发者必备的工具之一.它有而强大的Devtool,辅助我们的JavaScript调试,审视DOM元素,CSS即时修改等.以及它还有一个的庞大的插件系统,同时我们也可以很容 ...
CWR Mobile简介
原创地址:http://www.cnblogs.com/jfzhu/p/4266671.html 转载请注明出处 (一)CWR公司背景 Dynamics CRM除了自己Out of Box对移动设备的 ...

js+css实现骰子的随机转动

js+css实现骰子的随机转动的更多相关文章

随机推荐

热门专题