Recently finishing the project, found that there is a wish wall effect, today take out for everyone to share under.
Let's briefly introduce the following function points:
- Randomly display a background or back color
- Random occurrences of the position
- You can change the position by dragging and dragging.
Okay, here's the code:
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"/> <title>Wishing Wall</title> <Linkrel= "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> <ulID= "Wish"> <Li>11111</Li> <Li>22222</Li> <Li>33333</Li> <Li>44444</Li> <Li>55555</Li> </ul></Body></HTML><Scriptsrc= "Jquery.min.js"></Script><Scriptsrc= "Jquery-ui.min.js"></Script><Scriptsrc= "Wish.js"></Script><Script>$(function(){ $('#wish'). Wish (); $('. Wish'). Draggable ({containment:'#wish', scroll:false});});</Script>
Attention:
jQueryUI need to load draggable and scale effect,draggable is to support drag and drop, while scale Effect is the effect of click Close.
Original address point this entry
Click here to download the example