05.02.2017, 01:40
|
|
Новичок на форуме
|
|
Регистрация: 05.02.2017
Сообщений: 2
|
|
|
Помогите со скриптом
Доброго времени суток! Хотелось бы попросить помочь. Я решил создать, а парится с изучение js не очень хочется ради всего одной задачи, поэтому прошу помощи, ну или хотя бы дать какой то материал который поможет мне это сделать самостоятельно!
Задача такова:
У меня есть объект (картинка и текст под ней, блок), мне нужно чтобы при наведении курсором на этот объект он увеличивался на небольшой размер, а фон при этом блюрился!
Заранее благодарю за помощь!
|
|
06.02.2017, 09:41
|
 |
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от makromant
|
|
а фон при этом блюрился
|
Это как?  |
|
06.02.2017, 09:42
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,225
|
|
|
Сообщение от makromant
|
|
дать какой то материал который поможет мне это сделать самостоятельно
|
Вот например...
событие при наведении мыши |
|
06.02.2017, 17:06
|
|
Кандидат Javascript-наук
|
|
Регистрация: 21.01.2017
Сообщений: 139
|
|
Есть фильтр blur, вот кросс-браузерный код для него
-webkit-filter: blur(5px); -moz-filter: blur(5px); -o-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px);
(5px - степень размытия)
Принцип такой: обернуть всё содержимое body в див, при наводке мышью замыливать див и создавать копию блока и добавлять в body ( document.body.appendChild()). Таким образом, копия будет за пределами дива и не будет замылена. При отводе мыши убираем блюр и удаляем копию.
Последний раз редактировалось Diphenyl Oxalate, 06.02.2017 в 18:05.
|
|
06.02.2017, 18:45
|
|
Кандидат Javascript-наук
|
|
Регистрация: 21.01.2017
Сообщений: 139
|
|
|
|
|
06.02.2017, 19:24
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,121
|
|
|
эффект затемнения всей страницы кроме выбранного элемента DOM
 автор devote, кликать по элементам
взято тут
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body{text-align:center;padding:30px;}
ul{padding:0}
li{list-style:none;border:1px solid #ccc;margin:5px}
img{margin-top:10px;height:150px;border:1px solid #ccc}
.example{float:left;width:70%}
.options{float:right;width:30%;background:#ccc;border-radius:5px}
.options ul{text-align:left;margin-left:10px}
input{text-align:center}
.overlay {
top: 0;
left: 0;
width: 0;
height: 0;
opacity: 1;
position: fixed;
box-sizing: border-box;
border: 0 solid rgba(0, 0, 0, 0.8);
transition-property: none;
transition-duration: 1s;
transition-delay: 0s;
transition-timing-function: linear;
pointer-events: none;
}
.overlay.show, .overlay.hide {
transition-property: border-left-width, border-right-width, border-top-width, border-bottom-width, opacity;
width: 100%;
height: 100%;
}
</style>
<script>
var animate = (function() {
var activeClick = false,
activeElement = null,
overlayElement;
function show(target) {
var rect = target.getBoundingClientRect();
overlayElement.className = 'overlay show';
overlayElement.style.cssText = [
'border-left-width:' + rect.left,
'border-top-width:' + rect.top,
'border-right-width:' + (overlayElement.offsetWidth - rect.right),
'border-bottom-width:' + (overlayElement.offsetHeight - rect.bottom)
,''].join('px;');
}
function animate(selector) {
var elems = document.querySelectorAll(selector);
Array.prototype.forEach.call(elems, function(elem) {
elem.addEventListener('click', function(event) {
activeClick = true;
show(activeElement = event.currentTarget);
})
});
if (!overlayElement) {
// элемент который будет анимирован
overlayElement = document.querySelector('.overlay');
// будем слушать событие окончания анимации
overlayElement.addEventListener('transitionend', function() {
// если анимацию инициировал класс hide
if ((' ' + overlayElement.className + ' ').indexOf(' hide ') !== -1) {
// удаляем у элемента все лишнии стили
overlayElement.removeAttribute('style');
overlayElement.className = 'overlay';
}
}, false);
// это что бы убрать оверлей
document.addEventListener('click', function() {
if (!activeClick) {
overlayElement.className = 'overlay hide';
overlayElement.style.opacity = 0;
activeElement = null;
}
activeClick = false;
}, false);
// а это что бы при скроле оверлей подгонял себя туда где элемент
window.addEventListener('scroll', function() {
if (activeElement) {
show(activeElement);
}
}, false);
}
}
return animate;
})();
window.onload = function() {
animate('img, p, button, li, div.options');
};
</script>
</head>
<body>
<p style=" width: 30px; float: left">1</p>
<p style=" width: 30px; float: right">2</p>
<div class="example">
<header>
<button type="button" id="x">Test no animate</button>
<button class="show" data-selector="header" id="test2">Focus header</button>
<button class="show" data-selector="ul">Focus list</button>
<button class="show" data-selector="li:first">Focus first item</button>
<button class="show" data-selector="img:eq(1)">Focus image</button>
</header>
<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>
<img src="http://elitefon.ru/download.php?file=201211/800x600/elitefon.ru-27151.jpg">
<img src="http://awabe.com/uploads/posts/2011-03/1300452670_sbtsag9elqjyvqf.jpeg">
<img src="http://img0.liveinternet.ru/images/attach/c/4/79/125/79125894_large_ff6f52c9a9848aab63958b7766780446.jpg">
</div>
<div class="options">
<h2>Options:</h2>
</div>
<div class="overlay"></div>
</body>
</html>
Последний раз редактировалось рони, 07.05.2019 в 14:27.
|
|
07.02.2017, 15:59
|
|
Новичок на форуме
|
|
Регистрация: 05.02.2017
Сообщений: 2
|
|
|
Спасибо, я сделал, но не очень понимаю. У меня изображение растягивается на всю страницу, а нужно чтобы оно в пару раз увеличивалось
|
|
11.02.2017, 03:08
|
 |
Новичок на форуме
|
|
Регистрация: 04.01.2017
Сообщений: 3
|
|
|
Помогите с кодом
Парни, всем здравствуйте, вы тут мастера иллюзий я все понимаю.. И надеюсь на вашу поддержку.
Я не прогер, пишу сайты прогами,
В кодах непонимаю, ну сам аписать не напишу, а вот по эксперементировать могу..
Скачал плагин с скроллингом.
Изначально было три страници, я даже разобрался как добавить следующие))) Представляете))
В общем проблема в том что не могу никак понять как и что сделать что бы вместо цвета левой и правой половины, я МОГ ВСТАВИТЬ ИЗОБРАЖЕНИЕ,
Помогите пожалуйста..
Да код чужой, но вы все таки профи и хоть чтото понимаете, а я в этих цсс и скриптах...Оуу...
Вот сам проэкт - http://alvarotrigo.com/multiScroll/
Вот это страница
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multiscroll.js - split multi-scrolling pages plugin</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
<meta name="keywords" content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="../jquery.multiscroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
css3: true
});
});
</script>
<style>
h1{
color: #fff;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="first"><a href="#first">First slide</a></li>
<li data-menuanchor="second"><a href="#second">Second slide</a></li>
<li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>
<div id="myContainer">
<div class="ms-left">
<div class="ms-section" id="left1">
<h1>Left 1</h1>
</div>
<div class="ms-section" id="left2">
<h1>Left 2 </h1>
</div>
<div class="ms-section" id="left3">
<h1>Left 3</h1>
</div>
</div>
<div class="ms-right">
<div class="ms-section" id="right1">
<h1>Right 1</h1>
</div>
<div class="ms-section" id="right2">
<h1>Right 2</h1>
</div>
<div class="ms-section" id="right3">
<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>
Вот это файлы ссылающиеся в странице, ну на который ссылаются.. Прикрепил.
|
|
11.02.2017, 03:12
|
|
Новичок на форуме
|
|
Регистрация: 04.01.2017
Сообщений: 3
|
|
Сообщение от RaLinski
|
Парни, всем здравствуйте, вы тут мастера иллюзий я все понимаю.. И надеюсь на вашу поддержку.
Я не прогер, пишу сайты прогами,
В кодах непонимаю, ну сам аписать не напишу, а вот по эксперементировать могу..
Скачал плагин с скроллингом.
Изначально было три страници, я даже разобрался как добавить следующие))) Представляете))
В общем проблема в том что не могу никак понять как и что сделать что бы вместо цвета левой и правой половины, я МОГ ВСТАВИТЬ ИЗОБРАЖЕНИЕ,
Помогите пожалуйста..
Да код чужой, но вы все таки профи и хоть чтото понимаете, а я в этих цсс и скриптах...Оуу...
Вот сам проэкт - http://alvarotrigo.com/multiScroll/
Вот это страница
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>multiscroll.js - split multi-scrolling pages plugin</title>
<meta name="author" content="Alvaro Trigo Lopez" />
<meta name="description" content="multiscroll plugin by Alvaro Trigo. Create divided multi-scrolling pages with two splited vertical layouts or panels." />
<meta name="keywords" content="multiscroll,jquery,alvaro,trigo,plugin,divided,splitscreen,screen,panels,layouts,vertical,split,splited" />
<meta name="Resource-type" content="Document" />
<link rel="stylesheet" type="text/css" href="jquery.multiscroll.css" />
<link rel="stylesheet" type="text/css" href="examples.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="../vendors/jquery.easings.min.js"></script>
<script type="text/javascript" src="../jquery.multiscroll.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myContainer').multiscroll({
sectionsColor: ['#C63D0F', '#1BBC9B', '#7E8F7C'],
anchors: ['first', 'second', 'third'],
menu: '#menu',
css3: true
});
});
</script>
<style>
h1{
color: #fff;
}
</style>
</head>
<body>
<ul id="menu">
<li data-menuanchor="first"><a href="#first">First slide</a></li>
<li data-menuanchor="second"><a href="#second">Second slide</a></li>
<li data-menuanchor="third"><a href="#third">Third slide</a></li>
</ul>
<div id="myContainer">
<div class="ms-left">
<div class="ms-section" id="left1">
<h1>Left 1</h1>
</div>
<div class="ms-section" id="left2">
<h1>Left 2 </h1>
</div>
<div class="ms-section" id="left3">
<h1>Left 3</h1>
</div>
</div>
<div class="ms-right">
<div class="ms-section" id="right1">
<h1>Right 1</h1>
</div>
<div class="ms-section" id="right2">
<h1>Right 2</h1>
</div>
<div class="ms-section" id="right3">
<h1>Right 3</h1>
</div>
</div>
</div>
</body>
</html>
Вот это файлы ссылающиеся в странице, ну на который ссылаются.. Прикрепил.
|
Хм ,,вроде файлы прикрепил но не вижу где они отображаются, всего три файла извените если дублировал
|
|
|
|
