Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Выделение текста (https://javascript.ru/forum/dom-window/39068-vydelenie-teksta.html)

joundlevel 13.06.2013 23:43
Выделение текста
 
Здравствуйте,помогите,пожа луйста, как сделать выделение текста как на этом сайте http://www.alternativ.be/ ?Чтобы при наведении курсора на текст он "крутился" сверху вниз и менял цвет.Если можно,написаль код для этого,спрашивает новичок.
Заранее огромное спасибо!!!

рони 14.06.2013 02:46
joundlevel,
:cray: :cray: :cray: 
<!DOCTYPE HTML>
<html>
    <head>
        <title>Untitled</title>
        <meta charset="utf-8">
        <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <style type="text/css">
            .box {
                position:absolute;
                left:25%;
                top:40px;
                display:block;
                height:50px;
                background:#696969
            }
            .cache {
                float:left;
                display:block;
                position:relative;
                width:150px;
                height:20px;
                overflow:hidden;
                margin-top:15px
            }
            a {
                color:#FFF;
                text-transform:uppercase;
                font-size:14px;
                font-weight:bolder;
                margin-left:17px;
                position:absolute;
                top:0px;
                left:0px
            }
            a.on {
                color:#F30;
                position:absolute;
                top:20px;
                left:0px
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="cache">
               <a href="#">javascript.ru</a>
               <a href="#" class="on">javascript.ru</a>
            </div>
            <div class="cache">
               <a href="#">javascript.ru</a>
               <a href="#" class="on">javascript.ru</a>
            </div>
            <div class="cache">
               <a href="#">javascript.ru</a>
               <a href="#" class="on">javascript.ru</a>
            </div>
        </div>
        <script type="text/javascript">
             $(".cache").hover(function (event) {
                $(this).children().stop(true, true);
                $(this).children().eq(0).animate({
                    top: "-20px"
                }, 200)
                $(this).children().eq(1).animate({
                    top: "0px"
                }, 200)

            }, function (event) {
               $(this).children().stop(true, true);
                $(this).children().eq(0).animate({
                    top: "0px"
                }, 200)
                $(this).children().eq(1).animate({
                    top: "20px"
                }, 200)
            })        
</script>
    </body>
</html>

devote 14.06.2013 15:38
рони,
глючит твой скрипт, при быстром перемещении мыши по пунктам, они просто пропадают... Сижу на Опере

рони 14.06.2013 16:05
devote,
хотел сократить код но вышло боком ... поправил ... посмотрите как сейчас.

Deff 14.06.2013 16:17
Цитата:
Сообщение от devote
при быстром перемещении мыши по пунктам, они просто пропадают... Сижу на Опере
Странно - у меня под XP в Опере норма
Хотя можно чисто на css решить
засунув пару ccылок в block c overflow:hidden;

devote 14.06.2013 16:53
Цитата:
Сообщение от рони
посмотрите как сейчас
сейчас все ок

bes 14.06.2013 20:34
joundlevel, начинай отсюда

devote 14.06.2013 22:01
в нормальных браузерах это можно сделать без скриптов:

<style>
    .cache {
        height: 20px;
        overflow-y: hidden;
        float: left;
        margin: 0 10px;
    }
    .cache:hover a:first-child {
        margin-top: -19px;
    }
    .cache a {
        color: green;
        display: block;
        margin-top: 0px;
        -webkit-transition: margin-top 0.2s ease;
        -ms-transition: margin-top 0.2s ease;
        -o-transition: margin-top 0.2s ease;
        transition: margin-top 0.2s ease;
    }
    .cache a:last-child {
        color: red;
    }
</style>
<div class="box">
    <div class="cache">
        <a href="#">javascript.ru</a>
        <a href="#">javascript.ru</a>
    </div>
    <div class="cache">
        <a href="#">javascript.ru</a>
        <a href="#">javascript.ru</a>
    </div>
    <div class="cache">
        <a href="#">javascript.ru</a>
        <a href="#">javascript.ru</a>
    </div>
</div>

Kvark 17.06.2013 13:03
Jasmine - spam bot?

joundlevel 28.06.2013 17:16
Ребят,а что нужно поменять в коде,чтобы текст уходил не вверх,а в бок(лево).
Буду очень признателен!

<style>
.cache {
height: 20px;
overflow-y: hidden;
float: left;
margin: 0 10px;
}
.cache:hover a:first-child {
margin-top: -19px;
}
.cache a {
color: green;
display: block;
margin-top: 0px;
-webkit-transition: margin-top 0.2s ease;
-ms-transition: margin-top 0.2s ease;
-o-transition: margin-top 0.2s ease;
transition: margin-top 0.2s ease;
}
.cache a:last-child {
color: red;
}
</style>
<div class="box">
<div class="cache">
<a href="#">javascript.ru</a>
<a href="#">javascript.ru</a>
</div>
<div class="cache">
<a href="#">javascript.ru</a>
<a href="#">javascript.ru</a>
</div>
<div class="cache">
<a href="#">javascript.ru</a>
<a href="#">javascript.ru</a>
</div>
</div>

joundlevel 28.06.2013 20:33
Много всего уже перепробывал,не получается

dmitriymar 28.06.2013 20:42
Цитата:
Сообщение от joundlevel
Ребят,а что нужно поменять в коде,чтобы текст уходил не вверх,а в бок(лево).
Цитата:
Сообщение от joundlevel
Много всего уже перепробывал,не получается
Собственно говоря причём здесь скрипт если всё происходит на уровне css?
Цитата:
Сообщение от joundlevel
<style>
.cache {
height: 20px;
overflow-y: hidden;
float: left;
margin: 0 10px;
}
.cache:hover a:first-child {
margin-top: -19px;
}
.cache a {
color: green;
display: block;
margin-top: 0px;
-webkit-transition: margin-top 0.2s ease;
-ms-transition: margin-top 0.2s ease;
-o-transition: margin-top 0.2s ease;
transition: margin-top 0.2s ease;
}
.cache a:last-child {
color: red;
}
</style>
читать про css и обратить внимание на слово top встречающееся часто


Часовой пояс GMT +3, время: 00:00.