Как поставить эффект выключения света

Question

Как поставить эффект выключения света

0

может ли кто-нибудь помочь мне, как отключить эффект, если я нажму на любое из своих текстовых полей?

Я нашел эту идею на этом сайте: http://www.emanueleferonato.com/stuff/lightsoff/

Я хочу сделать это, когда я нажимаю текстовое поле, что конкретное текстовое поле будет сильно освещено, и если я снова нажму на это текстовое поле, он отключит эффект "светлый".

Кто-нибудь знает как это сделать?

html-код:

 <input type="text" readonly id="myname1" style="width:1000px; height:30px !important " />
 <br />
 <br />
 <input type="text" readonly id="myname2" style="width:1000px; height:30px !important " />

код сценария:

<script>
$(function(){
    $('#myname1').on('click', function(){
        alert(1)      
    })    
})
$(function(){
    $('#myname2').on('click', function(){
        alert(2)      
    })    
})
</script>

user3424886 20 март 2014, в 09:43

Источник

0

осмотрите этот элемент страницы, и вы узнаете, как он построен
Ahmedskaya 20 март 2014, в 08:34

Теги:

javascript

jquery

html

json

css

2 ответа

2

Вот базовая версия, которую я только что сделал, взглянуть и пообщаться с ней.

Таким образом, мы создаем overlay это займет весь экран с черным фоном. Затем мы хотим иметь еще один div где будет отображаться контент, который мы хотим показать, на этом div мы устанавливаем z-index: 1 чтобы он находился поверх наложения.

Отсюда он так же прост, как использование fadeIn и fadeOut для получения fadeOut эффекта.

Примечание. Это очень простая версия, вы можете сделать лучше, чем это, поэтому беспорядок и посмотреть, что вы можете с ней сделать. Это должно дать вам хорошее начало.

HTML:

<div class="overlay"></div>
<div class="highlight">Test
    <br/><span class="on">On</span> | <span class="off">Off</span> 
</div>

CSS:

html, body {
    height: 100%;
    margin: 0;
}
.overlay {
    background: black;
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    top: 0;
    display: none;
}
.highlight {
    width: 100%;
    background: white;
    z-index: 1;
}

JQuery:

$(".on").click(function () {
    $(".overlay").fadeIn();
});

$(".off").click(function () {
    $(".overlay").fadeOut();
});

ДЕМО ЗДЕСЬ

Ruddy 20 март 2014, в 06:38

Ещё вопросы

осмотрите этот элемент страницы, и вы узнаете, как он построен

fbbdev · Accepted Answer · 2014-03-20T07-24-00.000Z

Вот как бы я это сделал:

HTML:

<input type="text" readonly id="myname1" style="width:1000px; height:30px !important" />
<br />
<br />
<input type="text" readonly id="myname2" style="width:1000px; height:30px !important" />
<div id="overlay"></div>

CSS:

#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0,0,0,.5); /* Semi-transparent */
}

.highlight {
    position: relative;
    z-index: 11;
}

JavaScript:

$(function () {
    var lightsOff = false;
    $('#myname1,#myname2').on('click', function () {
        lightsOff = !lightsOff;
        $('#overlay').fadeToggle(1000); /* Choose desired delay */
        if (!lightsOff)
            setTimeout((function() {
                $(this).removeClass('highlight');
            }).bind(this), 1000); /* Same delay */
        else
            $(this).addClass('highlight');
    })
})

Демо: http://jsfiddle.net/AP6kr/

Офигенный мужчина, очень приятный эффект.