Скрипт кнопки вверх подъёма страниц uCoz
 | |
| Очередной скрипт на функцию, что отвечает поднятие страницы, а точнее кнопка вверх. Где прописаны стили на оригинальный эффект. В сети безусловно много кодов и где то они похоже друг на друга, но вот только стилистика у них разная, да и само поднятие выставлено на скорость также по разному. До этого на сайте размещал кнопку вверх для сайта, где был точно противоположный эффект. А это когда вы наводите на кнопку клик, то будет появляться темная тень и здесь она для светлого фона. А это кнопка сделана для темного фона и здесь как раз все наоборот в плане эффектов. По умолчанию она уже появиться с белой тенью, но как вы только наведете, то будет простая кнопка без теней. Что сами можете найти материал виде изображение в формате PNG и изменить ее. Но здесь сразу скажу, что в CSS основная настройка идет под круглый элемент, но это все редактируется. Сам сменил ней дизайн. в сети нашел картинку. чтоб слишком яркая не была , где потом подогнал высоту и ширину. Как она работать будет, все представлено ниже. Так будет по умолчанию:  Это уже в работе поднятие страницы:  Приступаем к установке: Код в низ сайта: Код <a href="#" id="toTop"><img src="http://zornet.ru/zorner_ru_1/Abter/knopki/up-arrow-circle-hi.png" width="50" height="48" border="0" alt="Наверх" /></a> <script src="http://zornet.ru/zorner_ru_1/Abter/knopki/toTop.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $("#toTop").scrollToTop(); }); </script> Стили CSS: Код /*--------------------- Кнопка вверх ---------------------*/ #toTop {width: 49px; height: 48px; background: transparent; position: fixed;bottom: 90px;right: 30px;text-align: center; border:1px solid #fff;border-radius:49px;cursor: pointer; -moz-box-shadow:0 0 10px 1px #eee; -webkit-box-shadow:0 0 10px 1px #eee;box-shadow:0 0 10px 1px #eee;} #toTop:hover { -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;} #toTop {width: 49px;height: 48px;background: rgba(0, 0, 0, 0);position: fixed;bottom: 90px;right: 30px;text-align: center;border: 1px solid #a9a3a3;border-radius:49px;cursor: pointer;-moz-box-shadow:0 0 10px 1px #131212;-webkit-box-shadow:0 0 10px 1px #eee;box-shadow: 0 0 10px 1px #fff;} #toTop:hover { -moz-box-shadow: none;-webkit-box-shadow: none;box-shadow: none;} Здесь разбито на стили, что вторые будут отвечать за визуальный эффект. | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
