<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<style type="text/css">
body {
position: relative;
}
.target {
position: absolute;
top: 190px; left: 190px;
width: 60px; height: 60px;
border-radius: 50%;
background-color: red;
text-align: center;
line-height: 60px;
color: #FFFFFF;
}
.line {
position: absolute;
top: 220px;
left: 220px;
width: 100px;
height: 4px;
background-color: red;
transform-origin: 0;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function() {
const target = document.querySelector('.target');
const line = document.querySelector('.line');
const pos = {left : 190, top : 190, width : 60, height : 60};
const lft = pos.left + pos.width / 2;
const tp = pos.top + pos.height / 2;
document.addEventListener('mousemove',
function(event) {
let x = event.pageX - lft - 8;
let y = event.pageY - tp - 8;
let r = Math.sqrt(x * x + y * y);
let deg = 180 / Math.PI * Math.atan2(y, x);
if(deg < 0) deg += 360;
target.innerHTML = (deg|0) + ' deg'
line.style.transform = "rotate(" + deg + "deg)";
line.style.width = r + 'px'
})
});
</script>
</head>
<body>
<div class="line"></div>
<div class="target"></div>
</body>
</html>
$('.nav_btn').click(function() {
navBtnId = $(this).index();
$('.nav_btn').on("click", "label", function() {
navBtnId = $('.nav_btn label').index(this);
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body,html{
height:100%;
}
#slider>div{
position:absolute;
background-size:cover;
width:20%;
height:50%;
transition:all 1s;
text-align:center;
line-height:20em;
background-color: rgba(51, 102, 0, 1);
}
#slider>div span{
opacity:0;
font-size:72px;
color:rgba(255,255,255,1);
}
#slider{
position:relative;
overflow:hidden;
width:100%;
height:100%;
}
#slider>div:nth-child(1){
left:-20%;
top:-50%;
}
#slider>div:nth-child(2){
left:0;
top:0;
}
#slider>div:nth-child(3){
left:0%;
top:50%;
}
#slider>div:nth-child(4){
left:20%;
top:0%;
width:60%;
height:100%;
}
#slider>div:nth-child(4) span{
opacity:1;
transition:.8s 1.4s;
}
#slider>div:nth-child(5){
left:80%;
top:0%;
}
#slider>div:nth-child(6){
left:80%;
top:50%;
}
#slider>div:nth-child(7){
left:100%;
top:0%;
}
#slider>div:nth-child(6)~div{
visibility:hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
(function fn()
{
$("#slider > div:nth-child(1)").appendTo("#slider");
window.setTimeout(fn,3000)
}())
});
</script>
</head>
<body>
<div id="slider">
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=1)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=2)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=3)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=4)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=5)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=6)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=7)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=8)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=9)"><span>paris</span></div>
<div style="background-image: url(http://loremflickr.com/320/240/girl/all?random=10)"><span>paris</span></div>
</div>
</body>
</html>
jQuery(function() {
function init() {
jQuery(".slidable .tall").each(function(indx, element) {
var height = jQuery(this).data("height");
if (height) {
jQuery(this).css({"height": ""});
jQuery(this).removeData("height")
}
});
jQuery(".slidable .controller").remove();
if (jQuery(window).width() < 426) jQuery(".slidable").slidable({
minimal: 200,
speed: 800,
controls: ["<span>Читать далее</span>", "<span>Скрыть</span>"]
})
}
jQuery(window).resize(init);
init()
});