|
|
| Line 1: |
Line 1: |
| <! DOCTYPE html>
| |
| <html>
| |
| <head>
| |
| <meta charset='utf-8'>
| |
| <title>try_吴成健</title>
| |
| <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
| |
| <style>
| |
| body {
| |
| background: white;
| |
| }
| |
| canvas {
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| height: 100%;
| |
| width: 100%;
| |
| width: 1230px;
| |
| height: 550px;
| |
| position: fixed;
| |
| left: 5%;
| |
| top: 10%;
| |
| }
| |
| </style>
| |
| <style>
| |
| #ball
| |
| {
| |
| width: 140px;
| |
| height: 140px;
| |
| border-radius: 70px;
| |
| background: rgb(187,187,187);
| |
| background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2JiYmJiYiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9Ijk5JSIgc3RvcC1jb2xvcj0iIzc3Nzc3NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
| |
| background: -moz-linear-gradient(top, rgba(187,187,187,1) 0%, rgba(119,119,119,1) 99%);
| |
| background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(187,187,187,1)), color-stop(99%,rgba(119,119,119,1)));
| |
| background: -webkit-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
| |
| background: -o-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
| |
| background: -ms-linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
| |
| background: linear-gradient(top, rgba(187,187,187,1) 0%,rgba(119,119,119,1) 99%);
| |
| filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bbbbbb', endColorstr='#777777',GradientType=0 );
| |
| box-shadow: inset 0 -5px 15px rgba(255,255,255,0.4),
| |
| inset -2px -10px 40px rgba(0,0,0,0.4),
| |
| 0 0 1px #000;
| |
| position: absolute;
| |
| top: 0px;
| |
| left:0px;
| |
| z-index: 11;
| |
| -webkit-animation: jump 1s infinite;
| |
| -moz-animation: jump 1s infinite;
| |
| -o-animation: jump 1s infinite;
| |
| -ms-animation: jump 1s infinite;
| |
| animation: jump 1s infinite;
| |
| cursor: pointer;
| |
| text-align:center;
| |
| line-height:140px;
| |
| color:#017CBF;
| |
| font-size:40px;
| |
| font-family:华文彩云;
| |
| -webkit-transition:all 0.7s ease-in-out;
| |
|
| |
| }
| |
| #ball:hover{
| |
| line-height:400px;
| |
| border-radius: 70px;
| |
| background:#E4DBD1;
| |
| -webkit-box-shadow:3px 3px 20px #A0C5E8;
| |
| color:white;
| |
| -webkit-transition:all 0.7s ease-in-out;
| |
| font-size:20px;
| |
| -webkit-text-shadow:5px 5px blue;
| |
| -webkit-transform:rotate(360deg);
| |
|
| |
| }
| |
| #ballWrapper
| |
| {
| |
| width: 1230px;
| |
| height: 550px;
| |
| border:2px solid #5489E0;
| |
| position: fixed;
| |
| left: 10%;
| |
| top: 10%;
| |
| margin-left: -70px;
| |
| z-index: 100;
| |
| -webkit-transform: scale(1);
| |
| -moz-transform: scale(1);
| |
| -ms-transform: scale(1);
| |
| -o-transform: scale(1);
| |
| transform: scale(1);
| |
| -webkit-transition: all 5s ease-in-out 0s;
| |
| -moz-transition: all 5s linear 0s;
| |
| transition: all 5s linear 0s;
| |
| cursor: pointer;
| |
| }
| |
| #header
| |
| {
| |
| width:88%;
| |
| text-align:center;
| |
| color:black;
| |
| font-size:20px;
| |
| font-family:黑体;
| |
| position: absolute;
| |
| top: 30px;
| |
| left:100px;
| |
| }
| |
| </style>
| |
| <script>
| |
| $(document).ready(function(){
| |
| $("#ball").click(function(){
| |
| $(this).css("top",Math.random() * 75 + "%");
| |
| });
| |
| });
| |
| $(document).ready(function(){
| |
| $("#ball").click(function(){
| |
| $(this).css("left",Math.random() * 80 + "%");
| |
| });
| |
| });
| |
| </script>
| |
|
| |
|
|
| |
|
| |
|
| |
|
| |
| </head>
| |
|
| |
| <body>
| |
| <canvas height="600" width="600"></canvas>
| |
| <script>
| |
| var canvas = document.getElementsByTagName('canvas')[0],
| |
| ctx = null,
| |
| grad = null,
| |
| body = document.getElementsByTagName('body')[0],
| |
| color = 255;
| |
|
| |
| if (canvas.getContext('2d')) {
| |
| ctx = canvas.getContext('2d');
| |
| ctx.clearRect(0, 0, 600, 600);
| |
| ctx.save();
| |
| // Create radial gradient
| |
| grad = ctx.createRadialGradient(0,0,0,0,0,600);
| |
| grad.addColorStop(0, '#000');
| |
| grad.addColorStop(1, 'rgb(' + color + ', ' + color + ', ' + color + ')');
| |
|
| |
| // assign gradients to fill
| |
| ctx.fillStyle = grad;
| |
|
| |
| // draw 600x600 fill
| |
| ctx.fillRect(0,0,600,600);
| |
| ctx.save();
| |
|
| |
| body.onmousemove = function (event) {
| |
| var width = window.innerWidth,
| |
| height = window.innerHeight,
| |
| x = event.clientX,
| |
| y = event.clientY,
| |
| rx = 600 * x / width,
| |
| ry = 600 * y / height;
| |
|
| |
| var xc = ~~(256 * x / width);
| |
| var yc = ~~(256 * y / height);
| |
|
| |
| grad = ctx.createRadialGradient(rx, ry, 0, rx, ry, 600);
| |
| grad.addColorStop(0, '#000');
| |
| grad.addColorStop(1, ['rgb(', xc, ', ', (255 - xc), ', ', yc, ')'].join(''));
| |
| // ctx.restore();
| |
| ctx.fillStyle = grad;
| |
| ctx.fillRect(0,0,600,600);
| |
| // ctx.save();
| |
| };
| |
| }
| |
| var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
| |
| document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
| |
| </script>
| |
| <script>
| |
| try {
| |
| var pageTracker = _gat._getTracker("UA-1656750-18");
| |
| pageTracker._trackPageview();
| |
| } catch(err) {}</script>
| |
|
| |
| <div id="header">
| |
| 鼠标移动到圆球上会旋转，点击圆球会出现在方框内的任意位置
| |
| </div>
| |
| <div id="ballwrapper">
| |
| <div id="ball">
| |
| 滚球
| |
| </div>
| |
| </div>
| |
|
| |
| </body>
| |
|
| |
| </html>
| |
