不多说先上效果图:
如何实实现上面的效果呢,代码如下:
html部分:
<!-- html部分定义个几个div盒子 -->
<!-- 这里是一个显示mobile的div -->
<div class="mobileDiv" style="display:block;">
<a href="mailto:zhangjuncheng@csii.com.cn">
<div class="mobileCooperateDialog floatDiv">
<span>合作垂询</span>
</div>
</a>
<div class="mobileleaveMsgDialog floatDiv" οnclick="window.location.href='${(site.siteUrl)!}/lxwm/givemsg/index.html'" >
<span>留言我们</span>
</div>
<div class="mobilesaleLine floatDiv">
<span>销售热线 010-6588718</span>
</div>
<div class="mobilecomplain floatDiv" οnclick="window.location.href='${(site.siteUrl)!}/lxwm/complain/index.html'">
<span>投诉建议</span>
</div>
</div>
css部分:
<style>
/*
这段div是用来定义手机运动的四个框的
*/
.floatDiv{
position:fixed;
width:100px;
height:60px;
background-color:yellow;
}
.mobileCooperateDialog{
top:0px;
left:0px;
}
.mobileleaveMsgDialog{
top:0px;
right:0px;
}
.mobilesaleLine{
bottom:0px;
left:0px;
}
.mobilecomplain{
bottom:0px;
right:0px;
}
</style>
重点在javascript代码:
<script language="javascript">
//获取浏览器屏幕的宽和高
var screenWidth = document.documentElement.clientWidth;
var screenHeight = document.documentElement.clientHeight;
/*
MoveableDiv这个是定义好的一个js对象
传入参数的含义如下:
name: 名称,没有也可以
jQueryObject:传入进来一个jQuery对象,代表了某个div盒子
x_location:距离浏览器左上方顶点的绝对定位x坐标
y_location:距离浏览器左上方顶点的绝对定位y坐标
xSpeed:x方向上的初始速度
ySpeed:y方向上的初始速度
*/
function MoveableDiv(name,jQueryObject,x_location,y_location,xSpeed,ySpeed){
this.name = name;
this.jQueryObject = jQueryObject;
this.x_location = x_location;
this.y_location = y_location;
this.xSpeed = xSpeed;
this.ySpeed = ySpeed;
}
MoveableDiv.prototype = {
constructor: MoveableDiv,
//下面的move方法定义的是盒子的运动,当触碰到边界的时候将速度方向相反即可
move:function(){
if( this.x_location>(screenWidth-$(this.jQueryObject).width()) || this.x_location<0 ){
this.xSpeed = -this.xSpeed;
}
if( this.y_location>(screenHeight-$(this.jQueryObject).height()) || this.y_location<0 ){
this.ySpeed = -this.ySpeed;
}
this.x_location+=this.xSpeed;
this.y_location+=this.ySpeed;
$(this.jQueryObject).css("left",this.x_location+"px");
$(this.jQueryObject).css("top",this.y_location+"px");
}
}
$(function(){
//新建四个对象,初始化赋值
var movediv1 = new MoveableDiv("movediv1",$('.mobileCooperateDialog'),0,0,5,5);
var movediv2 = new MoveableDiv("movediv1",$('.mobileleaveMsgDialog'),screenWidth-$(".mobileleaveMsgDialog").width(),0,5,5);
var movediv3 = new MoveableDiv("movediv1",$('.mobilesaleLine'),0,screenHeight-$(".mobilesaleLine").height(),5,5);
var movediv4 = new MoveableDiv("movediv1",$('.mobilecomplain'),screenWidth-$(".mobilecomplain").width(),screenHeight-$(".mobilecomplain").height(),5,5);
//设置一个定时器,让其运动
setInterval(function(){
movediv1.move();
movediv2.move();
movediv3.move();
movediv4.move();
},50)
})
</script>