jquery做的图片挂起的效果

客户要求提交后 图片随机挂至上方指定的10多个位置，配合设计做了这个效果，感觉还不错，自己记录下来

js代码

function random(min,max){

    return Math.floor(min+Math.random()*(max-min));

}

$(function(){
    $("#SendBt").bind("click",function(){
        //判断提交内容
        if($("#Explain").val()=="")
        {
            alert("请填写祝福内容！");
            return false;
        }
        //判断提交内容
        if($("#Title").val()=="")
        {
            alert("请填写要送的人！");
            return false;
        }
        
        //要挂的图片显示 透明设为0
        $(".Model").show();
        $(".Model").css("opacity","0");
        
        //获取当前图片的位置
        var imgTop=$(".Model").position().top;
        var imgLeft=$(".Model").position().left;

        //挂起位置的数组
        var ArryPos=new Array()
        ArryPos[0]="30px|300px";
        ArryPos[1]="100px|300px";
        ArryPos[2]="200px|210px";
        ArryPos[3]="300px|400px";
        ArryPos[4]="200px|500px";
        ArryPos[5]="100px|600px";
        ArryPos[6]="150px|330px";
        ArryPos[7]="200px|450px";
        ArryPos[8]="200px|380px";
        ArryPos[9]="400px|700px";
        ArryPos[10]="380px|650px";
        ArryPos[11]="450px|550px";
        ArryPos[12]="340px|790px";
        ArryPos[13]="40px|90px";
        ArryPos[14]="140px|190px";
        ArryPos[15]="240px|290px";
        ArryPos[16]="340px|390px";
        ArryPos[17]="440px|490px";
        ArryPos[18]="540px|590px";
        ArryPos[19]="640px|690px";
        ArryPos[20]="740px|790px";
        
        //随机取一个位置
        var numPos=random(0,21)
        var strPos=ArryPos[numPos];
        
        //Top
        strTop=strPos.split("|")[0];
        
        //Left
        strLeft=strPos.split("|")[1];
        
        //页面滚动制挂起的位置
        $('html, body').animate({scrollTop:strTop});
        
        //实现挂起
        $(".Model").animate({opacity:1},10).animate({top:strTop,left:strLeft},1000,function(){
            
            //Ajax插入数据库
            var SendName=$("#Title").val();
            var SendContent=$("#Explain").val();
            var LanMuID=<%=LanMuID%>;
            var Typed=1;
            var ReplyNewsID=0;
            
            $.post("ajax/AjaxPeaseWall.asp",{"SendName":SendName,"SendContent":SendContent,"LanMuID":LanMuID,"Typed":Typed,"ReplyNewsID":ReplyNewsID,"timedate":new Date(),"ImgPos":strPos},function(data,textStatus){
                $(".WallBg").append(data);//将图片挂在当前位置
                $("#Title,#Explain").val("");
            })
            
            
            
        }).animate({opacity:0},1000).animate({top:imgTop,left:imgLeft},0)//原图片透明后返回初始位置
    })
})

 

html代码

<div class="WallBody">
     <div class="WallBg">
     <img src="images/PeaseWall/Pease.gif" style="position:absolute; top:800px; left:200px; display:none;" class="Model" /></div>
     <div class="Qf_sendDiv">
        <div class="Explain"><textarea name="Explain" ID="Explain"></textarea></div>
        <div class="selectdiv"><select name="selEx" id="selEx">
        <option value="">--请选择祝福语--</option>
        <option value="祝福1">祝福1</option>
        <option value="祝福2">祝福2</option>
        <option value="祝福3">祝福3</option>
        </select></div>
        <div class="SendTitle"><input type="text" name="Title" id="Title" />　　　　　　　&nbsp;&nbsp;<input type="button" class="SendBt" id="SendBt" value="" /></div>
        </form>
    </div>
</div>