使用js完成一个类似于小广告的功能，斜着运动，遇到边界弹回

不多说先上效果图：

如何实实现上面的效果呢，代码如下：

html部分：

<div class="mobileDiv" style="display:block;">
<a href="mailto:zhangjuncheng@csii.com.cn">
<div class="mobileCooperateDialog floatDiv">
<span>合作垂询</span>
</div>
</a>

css部分:

重点在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>

使用js完成一个类似于小广告的功能，斜着运动，遇到边界弹回相关推荐

原生js实现一个连连看小游戏（一）
前几天使用原生的js写了一个连连看小游戏,地址:连连看(js),基本功能都实现了,运行截图为: 根据游戏规则获取开发思路创建棋盘格生成随机不重复数字映射到棋盘格鼠标点击事件寻路,无通路,则到 ...
教你前端如何用js写一个跑酷小游戏
在线体验地址:http://summer.pkec.net/ 源码地址:https://gitee.com/ihope_top/juejin-summer 前言不知不觉夏天又到了,提到夏天你们能想到 ...
使用js写一个播放语音提示的功能
利用window自带的speechSynthesis编写一个播放语音提示的功能之前利用百度的在线语音合成发现改不了其中的per属性,自己装了一下node包,发现cnpm引入的时候会与vue-admi ...
java连连看小程序,用JS写一个连连看小程序
思路决定内容区域的大小和图片种类数量图片应该放多少行,多少列.必须是偶数整个区域应该是在图片外多围上一圈,也就是行数和列数都应该比图片的多1 放多少对图片,一对两张.注意对数不能超过所有图片总数 ...
vue.js：利用vue.js做一个抽奖小游戏
MVVM模式是什么:M=Model(模型),V=View(视图),VM= ViewModel(简写成MVVM) . 代码如下: 运行代码结果: 1.你没有中奖: 2.恭喜你,你中奖了: 转载于:htt ...
使用netty实现一个类似于微信的聊天功能
1.maven依赖 <dependency><groupId>io.netty</groupId><artifactId>netty-all</a ...
纯js封装一个无缝轮播
下面的代码用纯js封装一个轮播组件.功能如下: 可上滑.下滑.左滑.右滑.无缝轮播. 移动端支持手势滑动. 可指定第一个显示的轮播图. 支持放置文字.图片和视频.带导航器. 导航器可自定义样式.若不想 ...
HTML怎么编写可关闭广告,JS实现关闭小广告特效
本文实例为大家分享了JS实现关闭小广告特效的具体代码,供大家参考,具体内容如下知识点 1.获取元素 2.通过元素获取父元素 3.删除节点 4.设置元素隐藏运行效果直接删除隐藏代码 Title ...
利用HTML+css+js制作侧边栏小广告
利用HTML+css+js制作小广告 1.页面效果 2.HTML代码 3.css代码(给广告位设置样式) 4.js代码在这里插入图片描述
用p5.js实现一个小动画——故宫橘猫赏秋图
用p5.js实现一个小动画--故宫橘猫赏秋图互动媒体第二次作业要求我们手绘一幅动画,再用代码实现出动画.由于时间原因,手绘并没有画动画,而是以插画的形式画了一张,然后p5实现了动画. 这里先放效果图 ...

使用js完成一个类似于小广告的功能，斜着运动，遇到边界弹回

使用js完成一个类似于小广告的功能，斜着运动，遇到边界弹回相关推荐

最新文章

热门文章