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