雪顶咖啡0222 于 2020-03-24 05:11:46 发布这种特效在曾经在qq空间很流行, 然而现在…
设计师想要实现这样的效果, 我就只能硬着头皮做了.
最终效果如链接:
https://playground.eca.ed.ac.uk/~s1917425/flover-master/floatflower.html
一开始从网上找了一个纯js 实现图片漂浮的效果, 但只有一张图片, 可我要的显然不是一朵花呀.
图片漂浮的源码:
https://blog.csdn.net/home_zhang/article/details/72675835
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div id="body"> <!--漂浮图片 2017.5.24--> <div id="float_AD" style="position:absolute;z-index:1000;" οnmοuseοver="window.clearInterval(timer)" οnmοuseοut="timer=window.setInterval('changePos()',delay);"> <a href="http://www.iterchina.cn/"><img src="https://img-blog.csdn.net/20170524093248122" style="width:300px; height:300px;" /></a> <span style="CURSOR:hand;color:red;font-weight:bold" οnclick="clearInterval(timer);obj.style.visibility = 'hidden'">X</span> </div> <script type="text/javascript" language="JavaScript"> var obj=document.getElementById("float_AD"); var clientHeight=document.documentElement.clientHeight; var clientWidth=document.documentElement.clientWidth; var timer; var delay= 20;//移动速度 function randomNum(size){ return Math.floor(Math.random()*(size-160+1)); } obj.style.top=randomNum</
12345678910111213141516171819
