jQuery實(shí)現(xiàn)可拖拽的許愿墻效果【附demo源碼下載】
本文實(shí)例講述了jQuery實(shí)現(xiàn)可拖拽的許愿墻效果。分享給大家供大家參考，具體如下：
運(yùn)行效果圖如下：
這里簡(jiǎn)單介紹下功能點(diǎn)：
① 隨機(jī)顯示背景圖或背景色
② 出現(xiàn)的位置隨機(jī)
③ 可以通過(guò)拖拽改變位置
好了，附上代碼：
<!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>
注意：
jqueryui 需要加載 draggable 和 scale Effect，draggable 是支持拖拽，而 scale Effect 是點(diǎn)擊關(guān)閉的效果。
完整實(shí)例代碼點(diǎn)擊此處本站下載。
更多關(guān)于jQuery相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《jQuery拖拽特效與技巧總結(jié)》、《jQuery常用插件及用法總結(jié)》、《jquery中Ajax用法總結(jié)》、《jQuery表格(table)操作技巧匯總》、《jQuery擴(kuò)展技巧總結(jié)》、《jQuery常見經(jīng)典特效匯總》、《jQuery動(dòng)畫與特效用法總結(jié)》及《jquery選擇器用法總結(jié)》
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
鋒利的jQuery 要點(diǎn)歸納（一） jQuery選擇器
鋒利的jQuery 要點(diǎn)歸納（一） jQuery選擇器，學(xué)習(xí)jquery的朋友可以參考下。2010-03-03
下面小編就為大家?guī)?lái)一篇老生常談JQuery data方法的使用。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
鼠標(biāo)拖動(dòng)實(shí)現(xiàn)DIV排序示例代碼
鼠標(biāo)拖動(dòng)實(shí)現(xiàn)DIV排序的教程有很多，在本文將為大家詳細(xì)介紹個(gè)不錯(cuò)的示例，對(duì)比傳統(tǒng)的排序，這是一個(gè)很不錯(cuò)的嘗試2013-10-10
使用jQuery實(shí)現(xiàn)下拉框搜索模糊查詢功能
在web開發(fā)中,經(jīng)常會(huì)遇到需要在下拉框中進(jìn)行搜索并進(jìn)行模糊查詢的需求,jQuery是一個(gè)廣泛應(yīng)用于前端開發(fā)的JavaScript庫(kù),可以幫助我們實(shí)現(xiàn)這樣的功能,本文將介紹如何使用jQuery實(shí)現(xiàn)下拉框搜索模糊查詢功能,需要的朋友可以參考下2024-09-09
jQuery拋物線運(yùn)動(dòng)實(shí)現(xiàn)方法(附完整demo源碼下載)
這篇文章主要介紹了jQuery拋物線運(yùn)動(dòng)實(shí)現(xiàn)方法,以完整實(shí)例形式分析了jQuery物體運(yùn)動(dòng)的實(shí)現(xiàn)技巧,并附帶了完整的demo源碼供讀者下載參考,需要的朋友可以參考下2016-01-01
寫用戶注冊(cè)驗(yàn)證時(shí)遇到的jQuery選擇器問(wèn)題，下面做下記錄，有遇到類似情況的朋友可以參考下2014-03-03
使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼
使用Jquery打造最佳用戶體驗(yàn)的登錄頁(yè)面的實(shí)現(xiàn)代碼，改用jquery使用ajax異步驗(yàn)證，并在驗(yàn)證的過(guò)程中將頁(yè)面元素設(shè)置為不可用，防止重復(fù)登錄。2011-07-07
easyui 中的datagrid跨頁(yè)勾選問(wèn)題的實(shí)現(xiàn)方法
很多朋友都遇到這樣的需求，easyui的datagrid分頁(yè)顯示數(shù)據(jù)，如果有需求要求勾選多條數(shù)據(jù)且不再同一頁(yè)中，easyui會(huì)保存在其他頁(yè)選中的數(shù)據(jù)嗎？小編結(jié)合資料自己整理了一篇文章，需要的的朋友參考下吧2017-01-01
使用jquery實(shí)現(xiàn)別踩白塊小游戲的方法實(shí)例
別踩白塊是一款簡(jiǎn)單易上手的數(shù)字小游戲,下面這篇文章主要給大家介紹了關(guān)于使用jquery實(shí)現(xiàn)別踩白塊小游戲的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-04-04
利用jqgrid實(shí)現(xiàn)上移下移單元格功能
這篇文章主要給大家介紹了關(guān)于如何利用jqgrid實(shí)現(xiàn)上移下移單元格功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11