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.
<!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;}. S1{background:URL (s1.png); }. S2{background:URL (s2.png); }. S3{background:URL (s3.png); }. S4{background:URL (s4.png); }. S5{background:URL (s5.png); } </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.
Click here to download the file
Jquery implements the wishing wall effect and can be dragged