许愿墙是怎么回事儿~~jquery原型

Cleey 发布于 2014/02/18 09:41
阅读 393
收藏 0

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


加载中
返回顶部
顶部