chenglin博客,原文链接 http://www.chenglin.name/normal/412.html

许愿墙是怎么回事儿，闲暇之余，用jquery做了做这个小东西的原型；

主要分三个方向：

1、设置随机背景；

使用js随机数，指定一个颜色或背景图片；

用到的以下几行简单代码：

function setback ( ) {
var arr = new Array ( '#7E7DD4' , '#A0D581' , '#E2BBA7' , '#E3ABC4' , '#CAB3E6' ) ;
return arr [ parseInt ( Math . random ( ) * 5 ) ] ;
}

2、设置随机位置；
使用js随机数，指定一个颜色或背景图片；

也是几行简单的代码：

// 设置许愿条开始随机位置
function setpos ( ) {
$ ( "#wishmain div" ) . each ( function ( ) {
var rx = parseInt ( Math . random ( ) * ( sx - $ ( this ) . width ( ) ) ) ;
var ry = parseInt ( Math . random ( ) * ( sy - $ ( this ) . height ( ) ) ) ;
$ ( this ) . css ( "background" , setback ( ) ) ;
$ ( this ) . css ( { "top" : ry + "px" , "left" : rx + "px" } ) ;
} ) ;
}

3、支持拖拽；
支持拖拽，就是从鼠标点击许愿条开始，鼠标移动的距离就是许愿条移动的距离；

这里根据自己的需求定制，我的代码：

// 鼠标点击监听 每个wishmian下面的div
$ ( "#wishmain div" ) . mousedown ( function ( e ) {
obj = $ ( this ) ;
mx = e . pageX ; my = e . pageY ; // 鼠标第一次点击获取坐标
ox = parseInt ( obj . css ( "left" ) ) ; // 对象的坐标
oy = parseInt ( obj . css ( "top" ) ) ;
} ) ;

// 鼠标移动监听
$ ( document ) . mousemove ( function ( e ) {
if ( ! obj ) return ; // 表示选中了对象
var cx = e . pageX - mx + ox ;
var cy = e . pageY - my + oy ;
obj . css ( "z-index" , getz ( ) ) ; // 显示在最前面
obj . css ( { "top" : cy + "px" , "left" : cx + "px" } ) ;
} )

// 鼠标抬起监听
$ ( document ) . mouseup ( function ( ) {
obj = null ; // 释放对象
} ) ;

更多源码分析，实例展示请看原文 http://www.chenglin.name/normal/412.html
chenglin博客,原文链接 http://www.chenglin.name/normal/412.html