JS实现简单的浮动碰撞效果实例分享
Dec 29, 2017 pm 05:48 PM本文主要介绍了JS实现简单的浮动碰撞效果,类似于广告悬浮图片在屏幕上来回碰撞的效果,涉及javascript结合时间动态操作页面元素属性的相关技巧,需要的朋友可以参考下，希望能帮助到大家。
本文实例讲述了JS实现简单的浮动碰撞效果。分享给大家供大家参考，具体如下：
<html>
<head>
<meta charset="UTF-8">
<title> 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('a.jpg');background-size:cover; background-repeat:no-repeat*/">
<p id="sunp" style="position:absolute">
<img src="http://php.cn/images/logo.gif"/>
</p>
</body>
</html>大家可以尝试一下，希望大家能根据以上的思路自己完成自己的页面浮动碰撞效果。
相关推荐：
Atas ialah kandungan terperinci JS实现简单的浮动碰撞效果实例分享. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih
Apr 03, 2024 am 08:13 AM
Pengguna menghadapi gangguan yang jarang berlaku: Jam tangan pintar Samsung Watch tiba-tiba mengalami isu skrin putih
Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara
Mar 28, 2024 am 11:11 AM
Kajian Radiator Kyushu Fengshen Assassin 4S Gaya 'Assassin Master' yang disejukkan dengan udara
Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos
Apr 17, 2024 pm 05:07 PM
Seni cahaya dan bayangan yang indah pada musim bunga, Haqu H2 ialah pilihan yang menjimatkan kos
Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat
Mar 28, 2024 pm 03:20 PM
Kajian bekalan kuasa modul penuh Huntkey MX750P: 750W kekuatan platinum pekat
Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik
Mar 06, 2024 pm 04:40 PM
Ulasan Colorful Hidden Star P15 24: Komputer riba permainan serba tegar dengan penampilan dan prestasi yang baik
Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja.
Apr 23, 2024 am 08:04 AM
Memahami imej 4K HD dengan mudah! Model berbilang modal besar ini secara automatik menganalisis kandungan poster web, menjadikannya sangat mudah untuk pekerja.
Pengalaman satu kanta sebenar dengan lensa NIKKOR Z 28-400mm f/4-8 VR
Mar 28, 2024 pm 02:54 PM
Pengalaman satu kanta sebenar dengan lensa NIKKOR Z 28-400mm f/4-8 VR
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
Jan 05, 2024 pm 06:08 PM
Tutorial JavaScript Mudah: Cara Mendapatkan Kod Status HTTP
