一個動態(tài)表白效果翩腐,快拿去表白吧!

? 還在愁沒有表白的東西嗎鸟款?? 這個可愛的愛心特效快拿去表白吧!


<!DOCTYPE html>

<html>

<head>

? ? <meta charset="utf-8">

? ? <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

? ? <title>?</title>

? ? <script type="text/javascript">


? document.addEventListener('plusready', function(){

? //console.log("所有plus api都應(yīng)該在此事件發(fā)生后調(diào)用茂卦,否則會出現(xiàn)plus is undefined何什。")


? });


? ? </script>

<link rel="stylesheet" href="css/love.css">

</head>

<audio style="display:none; height: 0" id="bg-music" preload="auto" src="music/love.mp3" loop="loop">

</audio>

<body>

<div class="container" onselectstart="return false;" unselectable="on" style="-moz-user-select:none;">

? ? <div class="body_left" style="position:absolute;top:70px;">

? ? ? ? <img src="img/biubiubiu.gif" alt="" ondragstart='return false;'>

? ? </div>

? ? <div class="body_center love" style="position:absolute;top:280px;left:450px;">

? ? ? ? <div class="block">

? ? ? ? ? ? <div class="div1"></div>

? ? ? ? ? ? <div class="div2"></div>

? ? ? ? ? ? <div class="div3"></div>

? ? ? ? ? ? <div class="div4"></div>

? ? ? ? </div>

? ? </div>

</div>

<script type="text/javascript" src="js/love.js"></script>

<script type="text/javascript" src="js/jquery-1.12.4.js"></script>

<script>

? ? ? ? //音樂自動播放

? ? ? ? $(document).ready(function(){

? ? ? ? ? ? autoPlayMusic();

? ? ? ? ? ? audioAutoPlay();

? ? ? ? });

? ? ? ? function audioAutoPlay() {

? ? ? ? ? ? var audio = document.getElementById('bg-music');

? ? ? ? ? ? audio.play();

? ? ? ? ? ? document.addEventListener("WeixinJSBridgeReady", function () {

? ? ? ? ? ? ? ? audio.play();

? ? ? ? ? ? }, false);

? ? ? ? }

? ? ? ? // 音樂播放

? ? ? ? function autoPlayMusic() {

? ? ? ? ? ? // 自動播放音樂效果,解決瀏覽器或者APP自動播放問題

? ? ? ? ? ? function musicInBrowserHandler() {

? ? ? ? ? ? ? ? musicPlay(true);

? ? ? ? ? ? ? ? document.body.removeEventListener('touchstart', musicInBrowserHandler);

? ? ? ? ? ? }

? ? ? ? ? ? document.body.addEventListener('touchstart', musicInBrowserHandler);

? ? ? ? ? ? // 自動播放音樂效果等龙,解決微信自動播放問題

? ? ? ? ? ? function musicInWeixinHandler() {

? ? ? ? ? ? ? ? musicPlay(true);

? ? ? ? ? ? ? ? document.addEventListener("WeixinJSBridgeReady", function () {

? ? ? ? ? ? ? ? ? ? musicPlay(true);

? ? ? ? ? ? ? ? }, false);

? ? ? ? ? ? ? ? document.removeEventListener('DOMContentLoaded', musicInWeixinHandler);

? ? ? ? ? ? }

? ? ? ? ? ? document.addEventListener('DOMContentLoaded', musicInWeixinHandler);

? ? ? ? }

? ? ? ? function musicPlay(isPlay) {

? ? ? ? ? ? var media = document.querySelector('#bg-music');

? ? ? ? ? ? if (isPlay && media.paused) {

? ? ? ? ? ? ? ? media.play();

? ? ? ? ? ? }

? ? ? ? ? ? if (!isPlay && !media.paused) {

? ? ? ? ? ? ? ? media.pause();

? ? ? ? ? ? }

? ? ? ? }

? ? </script>

</body>

</html>


這個是動態(tài)的效果喲处渣,

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市蛛砰,隨后出現(xiàn)的幾起案子罐栈,更是在濱河造成了極大的恐慌,老刑警劉巖泥畅,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件荠诬,死亡現(xiàn)場離奇詭異,居然都是意外死亡位仁,警方通過查閱死者的電腦和手機柑贞,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來聂抢,“玉大人钧嘶,你說我怎么就攤上這事×帐瑁” “怎么了有决?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵闸拿,是天一觀的道長。 經(jīng)常有香客問我书幕,道長新荤,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任按咒,我火速辦了婚禮迟隅,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘励七。我一直安慰自己智袭,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布掠抬。 她就那樣靜靜地躺著吼野,像睡著了一般。 火紅的嫁衣襯著肌膚如雪两波。 梳的紋絲不亂的頭發(fā)上瞳步,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天,我揣著相機與錄音腰奋,去河邊找鬼单起。 笑死,一個胖子當(dāng)著我的面吹牛劣坊,可吹牛的內(nèi)容都是我干的嘀倒。 我是一名探鬼主播,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼局冰,長吁一口氣:“原來是場噩夢啊……” “哼测蘑!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起康二,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤碳胳,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后沫勿,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體挨约,經(jīng)...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年产雹,在試婚紗的時候發(fā)現(xiàn)自己被綠了烫罩。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡洽故,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出盗誊,到底是詐尸還是另有隱情时甚,我是刑警寧澤隘弊,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站荒适,受9級特大地震影響梨熙,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜刀诬,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一咽扇、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧陕壹,春花似錦质欲、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至又碌,卻和暖如春九昧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背毕匀。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工铸鹰, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人皂岔。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓蹋笼,卻偏偏與公主長得像,于是被迫代替她去往敵國和親凤薛。 傳聞我的和親對象是個殘疾皇子姓建,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 43,440評論 2 348

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

  • 一直想開通一個blog,但是由于工作太忙(此處寫給領(lǐng)導(dǎo)看)缤苫,還有自己的有三個原因速兔,一是懶,二是懶活玲,三是懶涣狗,把這個事...
    Luc湯閱讀 17,221評論 12 18
  • 1、兼容ios和安卓背景音樂自動播放 $(document).ready(function(){ autoPlay...
    戒煙少年閱讀 269評論 0 0
  • 常見試題 行內(nèi)元素:會在水平方向排列舒憾,不能包含塊級元素镀钓,設(shè)置width無效,height無效(可以設(shè)置line-h...
    他大舅啊閱讀 2,432評論 1 5
  • H5項目常見問題及注意事項 轉(zhuǎn)自:https://www.open-open.com/lib/view/open1...
    彼岸歸夢閱讀 349評論 0 0
  • 1镀迂、input框在ios上背景顏色在真機上有色差 解決:input[type=button], input[typ...
    穆林wo閱讀 540評論 0 0