English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Эта статья рассказывает о том, как с помощью jQuery реализовать эффект стены желаний, который можно перетаскивать. Предлагается для вашего рассмотрения, подробности см. ниже:
Результат выполнения таков:
Кратко介绍一下功能点：
① случайное отображение фона или цвета фона
② положение emergence случайное
③ можно изменить положение с помощью перетаскивания
Готово, вот код:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>许愿墙</title>
<link rel="stylesheet" href="base.min.css"/>
<style>
#wish{height:650px;margin:20px;position:relative;width:960px;}
.wish{background:url(wish_bg.png) no-repeat 0 0;color:#000;height:166px;padding:10px 20px 30px 20px;width:185px;}
.wish-close{background:url(wish_close_bg.png) no-repeat 0 0;display:none;position:absolute;right:5px;top:-5px;width:17px;height:17px;}
</style>
</head>
<body>
<ul id="wish">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<li>55555</li>
</ul>
</body>
</html>
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
<script src="wish.js"></script>
<script>
$(function(){
$('#wish').wish();
$('.wish').draggable({containment:'#wish',scroll:false});
});
</script>
Внимание:
jQuery UI требует загрузки draggable и scale Effect, draggable поддерживает перетаскивание, а scale Effect - это эффект нажатия для закрытия.
Полный пример кода нажмите здесьЗагрузка сайта.
Дополнительную информацию о jQuery можно найти в специальных разделах нашего сайта: «Суммарные советы и техники по эффектам перетаскивания jQuery», «Суммарные советы и техники по常用 плагинам jQuery», «Суммарные советы и техники по использованию Ajax в jQuery», «Суммарные советы и техники по операциям с таблицами (table) в jQuery», «Суммарные советы и техники по расширениям jQuery», «Суммарные советы и техники по классическим эффектам jQuery», «Суммарные советы и техники по анимации и эффектам jQuery» и «Суммарные советы и техники по использованию селекторов jQuery»
Надеюсь, что изложенное в этой статье поможет вам в разработке jQuery.
Заявление: содержимое этой статьи взято из Интернета, авторские права принадлежат соответствующему автору. Контент предоставлен пользователями Интернета, самостоятельно загружен, сайт не имеет права собственности, не был отредактирован вручную и не несет ответственности за соответствующие юридические последствия. Если вы обнаружите контент,涉嫌侵犯版权， пожалуйста, отправьте письмо по адресу: notice#oldtoolbag.com (во время отправки письма замените # на @) для сообщения о нарушении и предоставьте соответствующие доказательства. При подтверждении факта нарушения сайт незамедлительно удаляет涉嫌侵权的内容.