<html lang="ru">
<head>
<script src="js/cast.js"></script>
<script src="js/jquery-2.1.3.min.js"></script>
<link href="cast.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="qwe">
<div class="quasactiv">
<a href="#"></a>
</div>
<div class="wexactiv">
<a href="#"></a>
</div>
<div class="exortactiv">
<a href="#"></a>
</div>
</div>
<div class="content">
<div class="shpargalka">
<p>подсказка</p>
</div>
</div>
<div class="cast">
<div id = "quas">
<a href="#"></a>
</div>
<div id = "wex">
<a href="#"></a>
</div>
<div id = "exort">
<a href="#"></a>
</div>
<div id = "invoke">
<a href="#"></a>
</div>
</div>
</body>
</html>
* {
margin:0;
padding:0;
}
.cast {
width: 100%;
position: relative;
text-align: center;
}
.cast div{
display: inline-block;
margin:0 10px 0 0;
}
.cast a {
text-decoration: none;
}
#quas {
border-radius:5px;
background-image: url(img/quas.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#wex {
border-radius:5px;
background-image: url(img/wex.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#exort{
border-radius:5px;
background-image: url(img/exort.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#invoke{
border-radius:5px;
background-image: url(img/invoke.png);
width: 128px;
height:128px;
border:5px solid #232523;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
.content {
border-radius:5px;
background: url(img/invoker.jpg) no-repeat 50% 95%;
height: 272px;
margin: 30px auto;
border: 5px solid #232523;
width: 235px;
-webkit-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
-moz-box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
box-shadow: 0px 0px 30px 10px rgba(50, 50, 50, 1);
}
#quas:active {
width: 125px;
height: 125px;
}
#wex:active {
width: 125px;
height: 125px;
}
#exort:active {
width: 125px;
height: 125px;
}
#invoke:active {
width: 125px;
height: 125px;
}
.wexactiv {
background:url(img/wexactiv.png)no-repeat;
width: 60px;
height: 60px;
}
.quasactiv {
background:url(img/quasactiv.png)no-repeat;
width: 60px;
height: 60px;
}
.exortactiv {
background:url(img/exortactiv.png)no-repeat;
width: 60px;
height: 60px;
}
.content p {
text-decoration: none;
color: #000;
transform: rotate(-45deg);
}
.content p:hover {
color:#fff;
}
window.onload = function(){
var qwePosX = 0;
var qwePosY = 0;
var interval;
var n = 10; // На сколько двигать за раз
var width = document.documentElement.clientWidth; // Ширина экрана
var height = document.documentElement.clientHeight; // Высота экрана
var imgWidth = 60; // Ширина картинки
var imgHeight = 60; // Высота картинки
var wexactiv = document.getElementById("wexactiv");
function move() {
wexactiv.style.left = (qwePosX += n) + "px";
wexactiv.style.top = (qwePosY += n) + "px";
if ( (qwePosX == (width - imgWidth) ) || (qwePosY == (height - imgHeight) ) ) {
clearInterval(interval);
}
}
interval = setInterval(move, 1000);
}