es6飄窗效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>es6飄窗功能</title>
    <style type="text/css">
      * {
        margin: 0px;
        padding: 0px;
      }

      #ad {
        position: absolute;
        left: 0px;
        top: 0px;
        z-index: 1000;
      }
      #ad a.adclose {
        cursor: pointer;
        position: absolute;
        right: 0px;
        top: 0px;
        color: black;
        padding: 0 6px;
        background-color: #c7cfda;
      }
    </style>
  </head>
  <body>
    <div id="ad">
      <a class="adclose" onclick="hidead()">×</a>
      <a  target="_blank"
        ><img src="time.jpg" width="150" height="150"
      /></a>
    </div>
    <script>
      class Flutter {
        constructor() {
          this.ad = document.querySelector('#ad')
          this.close = document.querySelector('.adclose')
          // 定義橫縱坐標(biāo)
          this.x = 0
          this.y = 0
          // 設(shè)置初始速度
          this.xv = 1
          this.yv = 1
          this.mytime = null
          this.init()
        }
        init() {
          // 定時(shí)器調(diào)用
          this.mytime = setInterval(() => {
            this.move()
          }, 40)
          // ad綁定鼠標(biāo)懸停事件
          this.ad.onmouseover = () => {
            // 清除定時(shí)器
            clearInterval(this.mytime)
          }
          // 鼠標(biāo)離開,重新觸發(fā)定時(shí)器
          this.ad.onmouseout = () => {
            this.mytime = setInterval(() => {
              this.move()
            }, 40)
          }
          this.close.onclick = () => {
            this.hidead()
          }
        }
        move() {
          if (this.x < 0 || this.x > window.innerWidth - this.ad.offsetWidth) {
            this.xv = -this.xv
          }

          if (
            this.y < 0 ||
            this.y > window.innerHeight - this.ad.offsetHeight - 1
          ) {
            this.yv = -this.yv
          }
          this.x += this.xv
          this.y += this.yv
          // 將xy坐標(biāo)值賦予img css樣式中的left與top
          this.ad.style.left = this.x + 'px'
          this.ad.style.top = this.y + 'px'
        }
        hidead() {
          document.body.removeChild(this.ad)
        }
      }
      new Flutter()
    </script>
  </body>
</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市褒繁,隨后出現(xiàn)的幾起案子俯渤,更是在濱河造成了極大的恐慌,老刑警劉巖侨嘀,帶你破解...
    沈念sama閱讀 222,807評論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件臭挽,死亡現(xiàn)場離奇詭異,居然都是意外死亡咬腕,警方通過查閱死者的電腦和手機(jī)欢峰,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,284評論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來涨共,“玉大人纽帖,你說我怎么就攤上這事【俜矗” “怎么了懊直?”我有些...
    開封第一講書人閱讀 169,589評論 0 363
  • 文/不壞的土叔 我叫張陵,是天一觀的道長照筑。 經(jīng)常有香客問我吹截,道長,這世上最難降的妖魔是什么凝危? 我笑而不...
    開封第一講書人閱讀 60,188評論 1 300
  • 正文 為了忘掉前任波俄,我火速辦了婚禮,結(jié)果婚禮上蛾默,老公的妹妹穿的比我還像新娘懦铺。我一直安慰自己,他們只是感情好支鸡,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,185評論 6 398
  • 文/花漫 我一把揭開白布冬念。 她就那樣靜靜地躺著,像睡著了一般牧挣。 火紅的嫁衣襯著肌膚如雪急前。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 52,785評論 1 314
  • 那天瀑构,我揣著相機(jī)與錄音裆针,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛世吨,可吹牛的內(nèi)容都是我干的澡刹。 我是一名探鬼主播,決...
    沈念sama閱讀 41,220評論 3 423
  • 文/蒼蘭香墨 我猛地睜開眼耘婚,長吁一口氣:“原來是場噩夢啊……” “哼罢浇!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起沐祷,我...
    開封第一講書人閱讀 40,167評論 0 277
  • 序言:老撾萬榮一對情侶失蹤嚷闭,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后戈轿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體凌受,經(jīng)...
    沈念sama閱讀 46,698評論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,767評論 3 343
  • 正文 我和宋清朗相戀三年思杯,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了胜蛉。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,912評論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡色乾,死狀恐怖誊册,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情暖璧,我是刑警寧澤案怯,帶...
    沈念sama閱讀 36,572評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站澎办,受9級特大地震影響嘲碱,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜局蚀,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,254評論 3 336
  • 文/蒙蒙 一麦锯、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧琅绅,春花似錦扶欣、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,746評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至澎羞,卻和暖如春髓绽,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背妆绞。 一陣腳步聲響...
    開封第一講書人閱讀 33,859評論 1 274
  • 我被黑心中介騙來泰國打工顺呕, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留接谨,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 49,359評論 3 379
  • 正文 我出身青樓塘匣,卻偏偏與公主長得像,于是被迫代替她去往敵國和親巷帝。 傳聞我的和親對象是個(gè)殘疾皇子忌卤,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,922評論 2 361

推薦閱讀更多精彩內(nèi)容

  • 在合肥有一套房子,裝修是一件很讓人煩人的事楞泼。關(guān)于空間的每一個(gè)區(qū)域一定要合理的利用好驰徊,對于家里的飄窗怎樣設(shè)計(jì)既美觀又...
    我叫黑名單閱讀 456評論 0 2
  • 何謂教書育人?是指教師要關(guān)心愛護(hù)學(xué)生堕阔,在傳授專業(yè)知識的同時(shí)棍厂,以自身的道德行為和魅力,言傳身教超陆,引導(dǎo)學(xué)生尋找自己生...
    人生多彷徨閱讀 589評論 0 0
  • 陳從周先生是中國園林的一代宗師牺弹,他被稱為是中國的最后一代文人,也是中國唯一一個(gè)不會(huì)畫圖卻可以設(shè)計(jì)建造園林的大家时呀。他...
    欖仁小姐寫字的地方閱讀 6,736評論 3 2
  • 每天都想堅(jiān)持寫點(diǎn)什么 但每次腦子里都沒有什么東西可寫 為了能每天都達(dá)到日更 還是得堅(jiān)持想點(diǎn)東西寫下去 題目“無題”...
    一杯梵高閱讀 99評論 0 1
  • 一 在中國歷史上有一個(gè)懸案,那就是秦始皇到底是呂不韋的兒子還是秦莊襄王子楚的親生骨肉趴梢。這個(gè)懸案的始作俑者就是司馬遷...
    圓圓貓閱讀 22,176評論 14 9