整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線(xiàn)：
<html>
<head>
<style>
.over {position: fixed; left:0; top:0; width:100%; z-index:100;}
.tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;}
</style>
<script src="http://code.jquery.com/jquery-1.8.0.min.js"></script>
</head>
<body>
<div class="over"></div><!--背景層-->
<div class="logoImg amplifyImg"><!--注意：此處的amlifyImg不可少-->
< img src="test.jpg"/><!-- 此處是引入圖片的路徑 -->
</div>
<script>
$(document).ready(function () {
var imgsObj = $('.amplifyImg img');//需要放大的圖像
if(imgsObj){
$.each(imgsObj,function(){
$(this).click(function(){
var currImg = $(this);
coverLayer(1);
var tempContainer = $('<div class=tempContainer></div>');//圖片容器
with(tempContainer){//width方法等同于$(this)
appendTo("body");
var windowWidth=$(window).width();
var windowHeight=$(window).height();
//獲取圖片原始寬度、高度
var orignImg = new Image();
orignImg.src =currImg.attr("src") ;
var currImgWidth= orignImg.width;
var currImgHeight = orignImg.height;
if(currImgWidth<windowWidth){//為了讓圖片不失真，當(dāng)圖片寬度較小的時(shí)候，保留原圖
if(currImgHeight<windowHeight){
var topHeight=(windowHeight-currImgHeight)/2;
if(topHeight>35){/*此處為了使圖片高度上居中顯示在整個(gè)手機(jī)屏幕中：因?yàn)樵赼ndroid,ios的微信中會(huì)有一個(gè)title導(dǎo)航，35為title導(dǎo)航的高度*/
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img border=0 src=' + currImg.attr('src') + '>');
}else{
css('top',0);
html('< img border=0 src=' + currImg.attr('src') + ' height='+windowHeight+'>');
}
}else{
var currImgChangeHeight=(currImgHeight*windowWidth)/currImgWidth;
if(currImgChangeHeight<windowHeight){
var topHeight=(windowHeight-currImgChangeHeight)/2;
if(topHeight>35){
topHeight=topHeight-35;
css('top',topHeight);
}else{
css('top',0);
}
html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+';>');
}else{
css('top',0);
html('< img border=0 src=' + currImg.attr('src') + ' width='+windowWidth+'; height='+windowHeight+'>');
}
}
}
tempContainer.click(function(){
$(this).remove();
coverLayer(0);
});
});
});
}
else{
return false;
}
//使用禁用蒙層效果
function coverLayer(tag){
with($('.over')){
if(tag==1){
css('height',$(document).height());
css('display','block');
css('opacity',1);
css("background-color","#FFFFFF");
css("background-color","rgba(0,0,0,0.7)" ); //蒙層透明度
}
else{
css('display','none');
}
}
}
});
</script>
</body>
</html>d旋轉(zhuǎn)圖：主要用css3中transform屬性中的rotate,translate;以及用來(lái)做舞臺(tái)效果的 perspective: 800px;(景深)和使立方體呈3d效果展示的transform-style：preserve-3d來(lái)實(shí)現(xiàn)；
全屏的雪花飄落：用原生js來(lái)實(shí)現(xiàn)(隨機(jī)的大小，透明度的變化等)，有詳細(xì)注釋?zhuān)?/p>
html5主要是實(shí)現(xiàn)背景音樂(lè)和頭部的字體卷動(dòng)效果。
< audio src=“music.mp3” hidden=“true” loop=“true” preload=“auto”>< /audio> 或者< embed src=“music.mp3” type=""/>
html部分：
css部分
js部分
是不是也想要加入HTML5的學(xué)習(xí)呢？如果你想要在短時(shí)間內(nèi)掌握HTML5 專(zhuān)業(yè)技術(shù)，不妨就選擇千鋒重慶HTML5培訓(xùn)。千鋒重慶HTML5技術(shù)開(kāi)發(fā)培訓(xùn)課程采用全程面授教學(xué)，拒絕視頻同步授課，拒絕雙元視頻班教學(xué)，拒絕直播授課，教師一對(duì)一指導(dǎo)學(xué)員做項(xiàng)目，全新打造“主流技術(shù)+前沿技術(shù)+企業(yè)級(jí)聯(lián)動(dòng)”教學(xué)課程，重新優(yōu)化和定義HTML5技術(shù)，采用最新版本技術(shù)開(kāi)展教學(xué)，致力于為學(xué)員打造最牛的、最新的技術(shù)，助力學(xué)員拿下BAT級(jí)企業(yè)Offer。
千鋒重慶HTML5技術(shù)開(kāi)發(fā)培訓(xùn)，讓你在同樣的起跑線(xiàn)，跑出不一樣的高度。
告該用哪種文件格式？
當(dāng)我們選擇應(yīng)該應(yīng)用哪種文件格式到我們的多媒體廣告上，我們通常會(huì)有以下的疑問(wèn)：
1. Google Display廣告可以接納什么文件格式？
2.JPEG、GIF和HTML5有什么區(qū)別？
3.各種格式的優(yōu)點(diǎn)和缺點(diǎn)分別是什么？
4.如何創(chuàng)建不同格式的多媒體廣告？
看每種格式之前，讓我們先了解哪些廣告尺寸公認(rèn)較受Google歡迎！
制作Display Ads的兩個(gè)基本要點(diǎn)
01
多媒體廣告（橫幅廣告）文件大小
無(wú)論使用哪種格式，都需要確保不超過(guò)150kb。
如果你使用線(xiàn)上轉(zhuǎn)換器來(lái)改變文件的大小，很多時(shí)侯該廣告將會(huì)變得模糊不清。
因此，必須記住，應(yīng)該在一開(kāi)始設(shè)計(jì)時(shí)就要考慮這點(diǎn)，令廣告在原始格式中有更小的像素。
02
行動(dòng)呼吁（Call-to- Action）按鈕
互聯(lián)網(wǎng)上有很多GDN多媒體廣告，然而要成功吸引客人的方法之一就是增設(shè)行動(dòng)呼吁（ Call-to- Action）按鈕例如立刻登記、立刻購(gòu)買(mǎi)等等。
但是，我建議你避免使用某些行動(dòng)呼吁按鈕的用字，例如"點(diǎn)擊此處"，因?yàn)?strong> Google會(huì)較容易視之為點(diǎn)擊誘餌Click Baits）
多媒體廣告格式：最常用
PNG
JPEG
HTML5
GIF
HTML5
AMP
PNG和JPEG是靜態(tài)格式，而GIF、 HTML AMP和HTML5是動(dòng)畫(huà)格式。
靜態(tài)格式被大眾認(rèn)為是老土，靜態(tài)廣告一般資訊及內(nèi)容會(huì)較貧乏，如果嘗試在靜態(tài)格式上添加大量信息，它會(huì)看起來(lái)非常不美觀。
因此，使用動(dòng)畫(huà)格式一般來(lái)說(shuō)是比較好的選擇。
那么，接下來(lái)就為大家詳細(xì)分析下以上的幾種格式的優(yōu)缺點(diǎn)。
JPEG
最常用
JPG或JPEG被認(rèn)為是世界各地最常使用的圖像文件格式。這格式常應(yīng)用于社交媒體的廣告、網(wǎng)站甚至傳統(tǒng)打印。
JPEG格式是以'' Joint Photographic Experts Group"（聯(lián)合圖像專(zhuān)家組）的創(chuàng)建者命名。
優(yōu)點(diǎn)
缺點(diǎn)
此文件類(lèi)型被視為容易受損，簡(jiǎn)單而言， Lossy File Format往往意味著當(dāng)你嘗試減小文件大小時(shí)，質(zhì)量將會(huì)逐漸降低。
創(chuàng)建所需的工具
有很多軟件可以創(chuàng)建JPEG，較常用的是 Adobe illustrator or Adobe PhotoShop......
PNG
廣泛
此文件格式是另—種重要的圖像文件格式。它被認(rèn)為是一種“較不松散（較不有損）”的格式。這意味著你可以輕松編輯圖像，同時(shí)不影響質(zhì)量。
PNG是 Portable Network Graphics的縮寫(xiě)。這種格式廣泛用于網(wǎng)頁(yè)設(shè)計(jì)，它與Print并不兼容
優(yōu)點(diǎn)
缺點(diǎn)
文件大小相對(duì)比JPEG大
創(chuàng)建所需的工具
有很多軟件可以創(chuàng)建JPEG，較常用的是 Adobe illustrator or Adobe PhotoShop......
GIF
更喜歡
GIF可用于動(dòng)畫(huà)和靜態(tài)格式，但人們通常更喜歡使用動(dòng)畫(huà)格式。世界各地的廣告商都廣泛使用GIF，因?yàn)樗苋菀讋?chuàng)建，并且可以使用任何代碼語(yǔ)言完成。你可以在網(wǎng)絡(luò)上的任何位置找到GIF的存在。而暫時(shí)為止，因其制作容易及簡(jiǎn)單，很多人都是以GIF格式Google投放橫幅廣告。
建議在每個(gè)GIF使用三張圖片就好（總共不超過(guò)150KB）。如果使用超過(guò)3張圖片，每張分到的KB就很少，那就會(huì)影響質(zhì)量（看起來(lái)很丑陋、模糊和松散）。
優(yōu)點(diǎn)
比普通廣告快6倍
缺點(diǎn)
由于播放動(dòng)畫(huà)的方式其實(shí)是逐格播放圖片，使GIF看起來(lái)很平庸
最大的缺點(diǎn)是GIF只能使用256種顏色。這意味著GIF動(dòng)畫(huà)將無(wú)法獲得最佳圖像質(zhì)量
Google對(duì)GIF動(dòng)畫(huà)的要求
長(zhǎng)度：30秒或更短
循環(huán)：可循環(huán)播放，但必須在30秒后停止
速度：低于5FPS
創(chuàng)建所需的工具
有很多軟件可以創(chuàng)建，較常用的是 Adobe illustrator或 Adobe PhotoShop
HTML5
最著名
Flash已經(jīng)壽終正寢了一段時(shí)間。在近2年的時(shí)間， Google多媒體廣告聯(lián)播網(wǎng)也公布不再接受Flash的廣告，并且由HTML動(dòng)畫(huà)廣告取而代之。2019年，最著名的廣告格式是HTML5。它使用 Javascript和CSS，并允許用戶(hù)創(chuàng)建精彩的過(guò)場(chǎng)和動(dòng)畫(huà)效果。
如果你使用 Google網(wǎng)頁(yè)設(shè)計(jì)師進(jìn)行創(chuàng)建HTML5，則必須將輸出文件放在.zip文件夾中。大多數(shù)人認(rèn)為.zip文件夾需要解壓縮，但你不需要。你可以在創(chuàng)建 Google展示型廣告時(shí)將.zip文件上傳到 Google廣告平臺(tái)
優(yōu)點(diǎn)
缺點(diǎn)
Google對(duì)HTML5廣告的要求
如果你計(jì)劃使用HTM5廣告來(lái)運(yùn)行PPC廣告系列，那你必須先了解要求。
你只能在以下情況下在 Google投放HTML5廣告：
創(chuàng)建所需的工具
Google Web Designer, Onlymega, Onlymega和 Onlymega
AMP HTML5
最常用
AMP是 Accelerated Mobiles Page項(xiàng)目的縮寫(xiě)。這是一項(xiàng)旨在改善網(wǎng)絡(luò)的開(kāi)源計(jì)劃。項(xiàng)目的愿景是使網(wǎng)站和廣告在所有設(shè)備上更加美觀、快速和高效。
AMP廣告更輕、更快，而且更安全。眾所周知，它們可以提供更好的用戶(hù)體驗(yàn)并提高參與率。可以在 AMP HTML的幫助下構(gòu)建 AMP HTML廣告。除此之外，還可以使用各種智能組件。
優(yōu)點(diǎn)
缺點(diǎn)
無(wú)法使用模糊效果、循環(huán)、操作URL和嵌入項(xiàng)等設(shè)置
Google對(duì) AMP HTML5廣告的要求
與HTML5廣告不同，你無(wú)需擁有投放Google廣告的長(zhǎng)期歷史記錄或良好的付款記錄。
創(chuàng)建所需的工具
Google Web Designer, Onlymega，Bannersnack和Bannerflow。
HTM5具有更好的性能，但 AMP HTML5并不像 Google聲稱(chēng)的那樣好，它的點(diǎn)擊率甚至低于GIF格式。
如果真的想投放 Display Ads（ GDN Banner），建議先考慮HLML5。如果帳戶(hù)不符合運(yùn)行HTML5的條件，可選擇GIF或 AMP HTML5。
因此，只需選擇任意一個(gè)熟悉的格式來(lái)創(chuàng)建廣告。如果你熟悉 AMP HTML5，那就使用AMP HTML5。如果你熟悉GIF，那就使用GIF。
總結(jié)
當(dāng)你知道什么能提高點(diǎn)擊率、轉(zhuǎn)換率和投資回報(bào)率？那就是選擇最適合你的 Display廣告的文件格式。
在大多數(shù)的情況下動(dòng)畫(huà)格式是優(yōu)于靜態(tài)格式。上訴中優(yōu)先排名第一的是HTML5，其后是 AMP HTML5。排名第三的是GIF，然后是JPG和PNG文件格式。
你get到了嗎？
還想學(xué)習(xí)更多詳細(xì)知識(shí)干貨？可以報(bào)名參與我們每個(gè)月開(kāi)設(shè)【谷歌實(shí)戰(zhàn)訓(xùn)練營(yíng)】，我們已經(jīng)開(kāi)過(guò)很多期谷歌營(yíng)銷(xiāo)人才培訓(xùn)了，如果你覺(jué)得迷茫或者您的企業(yè)需要專(zhuān)業(yè)的營(yíng)銷(xiāo)人才，您都可以聯(lián)系我進(jìn)行免費(fèi)咨詢(xún)!
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
