Rumah > Artikel > hujung hadapan web > 在JS中如何实现浮动碰撞

在JS中如何实现浮动碰撞

亚连asal: 2018-06-14 16:29:031947semak imbas

这篇文章主要介绍了JS实现简单的浮动碰撞效果,类似于广告悬浮图片在屏幕上来回碰撞的效果,涉及javascript结合时间动态操作页面元素属性的相关技巧,需要的朋友可以参考下

本文实例讲述了JS实现简单的浮动碰撞效果。分享给大家供大家参考，具体如下：

<html>
<head>
<meta charset="UTF-8">
<title>www.jb51.net JS碰撞效果</title>
<script language="javascript">
<!--
    directX=1; //X轴方向
    directY=1; //Y轴方向
    sunX=0;
    sunY=0;
  function sunMov(){
    //定两个方向
    sunX+=directX*2;
    sunY+=directY*2;
    //修改p的left top
    sunp.style.top=sunY+"px";
    sunp.style.left=sunX+"px";
    //判断什么时候，转变方向
    //x方向(offestWidth可以返回，当前这个对象的实际宽度)
    if(sunX+sunp.offsetWidth>=document.body.clientWidth || sunX<=0){
      directX=-directX;
    }
    if(sunY+sunp.offsetHeight>=document.body.clientHeight || sunY<=0){
      directY=-directY;
    }
  }
  setInterval("sunMov()",10);
//-->
</script>
</head>
<body style="/*background-image:URL(&#39;a.jpg&#39;);background-size:cover; background-repeat:no-repeat*/">
<p id="sunp" style="position:absolute">
<img src="//www.jb51.net/images/logo.gif"/>
</p>
</body>
</html>

运行效果：

上面是我整理给大家的，希望今后会对大家有帮助。

利用vue.js如何实现弹框只弹一次

详细解读javascript中的trie前缀树

在Vue中详细解读todoMVC代码

在jquery中如何实现动态添加并获取样式名称

在Angular2中如何实现父子组件通信

Atas ialah kandungan terperinci 在JS中如何实现浮动碰撞. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript jquery vue.js JS

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：在JS中如何控制鼠标拒绝点击按钮Artikel seterusnya：有关使用bootstrap-table.js实现扩展分页工具栏功能

Artikel berkaitan

Lihat lagi