原创 HTML5 video的多視頻循環播放

在做播放歷史視頻的時候,有連續播放視頻的需求,分享一下實現方法。html代碼:<div class="video">     <div class="container">         <div class="video-deta

原创 微信小程序-drawImg繪製多張網路圖片

微信小程序自帶的分享功能不支持分享到朋友圈,那我們的替代方法就是生成一張帶小程序二維碼的圖片,在做這個時,剛開始寫靜態用的本地圖片最後生成的圖片都挺好的,但是後臺將圖片換成網絡地址之後就出現了圖片繪製不出來的情況解決辦法就是先用wx.ge

原创 微信端自動播放背景音樂

在微信公衆號裏面實現背景音樂自動播放,發現使用autoplay之後只有Android端起效,蘋果手機不能自定播放,解決方法如下所示:HTML: <!-- 背景音樂 --> <audio id="bgmusic" src="<?php e

原创 vue-cli打包後iconfont路徑問題

第一次做vue的項目,記錄一下遇到的問題以及解決方法,用npm run build打包項目之後發現iconfont引用的文件路徑不對,在網上查找資料後,找到了解決方法:找到build下面的utils.js文件,如圖所示位置加上public

原创 微信小程序--修改checkbox和radio的樣式

在微信小程序裏面,有時候爲了配合整個項目的風格,checkbox和radio的樣式會有些不同。1. 修改checkbox樣式.wxml<checkbox-group class='pull-left' bindchange="checkb

原创 Swiper插件之Animate動畫

之前一直都沒有注意到Swiper插件有可供選擇的動畫效果插件Swiper Animate,在這個插件裏面有很多可供選擇的動畫比如縮放、旋轉、搖晃等各種動畫效果。1.在使用Swiper Animate之前,必須要保證已經加載swiper.a

原创 JS實現實時顯示時間

在之前的項目中有做到需要在網頁中實時顯示當前時間,實現的效果如圖所示:1. html結構<div class="col-xs-12 col-sm-6"> <i class="fa fa-plus-square-o" aria

原创 微信小程序-自制彈出框禁止頁面上下滑動

在微信小程序裏面的彈出框有時候不能滿足我們的需求,需要自己寫彈出框,但是要保證頁面不要上下滑動,解決方法是在遮蓋層上用綁定手指觸摸事件catchtouchstart。微信小程序有bind和catch兩種事件綁定方法,bind事件綁定不會阻

原创 HTML5中的websocket實現直播

做視頻直播這一塊,前期研究了很多方案,包括websocket,因爲各種原因最後沒有采取這個方案,但還是想記錄一下學習的心得。WebSocket是HTML5開始提供的一種在單個 TCP 連接上進行全雙工通訊的協議。在WebSocket AP

原创 微信小程之swiper

這篇文章主要介紹微信小程序swiper的相關資料,需要的朋友可以參考下 swiper滑塊視圖容器,適合廣告位展示、商品詳情展示等等; 一.圖片輪播 下面先給一個簡單的示例,效果圖如下圖所示:   1.html結構 <swiper indi

原创 微信小程序-聯繫客服按鈕樣式修改

  在頁面中使用<button open-type="contactr/>或者<contact-button size='30'></contact-button>可以顯示進入客服會話按鈕。這時候聯繫客服按鈕的樣式就是固定的,怎樣能夠修改

原创 flex佈局的兼容性

一直以來用flex解決居中問題很方便,幾個項目做下來,flex的兼容性問題也遇到了的,但最近的一個項目測試的時候,在一部ios8以下版本的iPhone上出現了不兼容。然後又就去研究了一下flex的兼容性,下面分享一下flex佈局的兼容性寫

原创 swiper插件

作爲一名前端,基本上每個項目都有要用到圖片輪播,在這裏給大家分享一下我常用的圖片輪播插件swiper。對於我來說,圖片輪播用的最多的就是swiper(http://www.swiper.com.cn/) 插件,他能實現觸屏焦點圖、觸屏Ta

原创 object標籤屬性詳解

最近在做視頻直播這一塊的,html5的video不能實現此功能,在網上查找了資料,覺得很有用。一、介紹: 我們要在網頁中正常顯示flash內容,那麼頁面中必須要有指定flash路徑的標籤。也就是OBJECT和EMBED標籤。OBJECT標

原创 Footer置於頁面底部的技巧

今天要說的是前端開發過程中的一個小技巧,沒有很大的技術含量,但在前端開發過程中經常會遇到。當頁面內容很多時,footer會在底部,但當頁面內容很少時,如何使footer始終在底部咧?1.HTML結構我一般是把footer寫在footer標