整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
多特效代碼請(qǐng)?zhí)砑親TML5前端交流群581549454
廢話不多說上代碼！
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery手機(jī)微信端手指觸摸圖片放大代碼</title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css">
<style type="text/css">
/* styles unrelated to zoom */
* { border:0; margin:0; padding:0; }
p { position:absolute; top:3px; right:28px; color:#555; font:bold 13px/1 sans-serif;}
/* these styles are for the demo, but are not required for the plugin */
.zoom {
display:inline-block;
position: relative;
}
/* magnifying glass icon */
.zoom:after {
content:'';
display:block;
width:33px;
height:33px;
position:absolute;
top:0;
right:0;
background:url(img/icon.png);
}
.zoom img {
display: block;
}
.zoom img::selection { background-color: transparent; }
#ex2 img:hover { cursor: url(img/grab.cur), default; }
#ex2 img:active { cursor: url(img/grabbed.cur), default; }
</style>
</head>
<body>
<div>
<span id='ex1'>
<img src='img/design.jpg' width='555' height='320' alt='web design'>
<p>Hover</p>
</span>
<span id='ex2'>
<img src='img/women.jpg' width='290' height='320' alt='women'>
<p>Grab</p>
</span>
<span id='ex3'>
<img src='img/horse.jpg' width='555' height='320' alt='horse'>
<p>Click to activate</p>
</span>
<span id='ex4'>
<img src='img/women2.jpg' width='290' height='320' alt='women2'>
<p>Click to toggle</p>
</span>
</div>
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src='js/jquery.zoom.js' type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#ex1').zoom();
$('#ex2').zoom({ on:'grab' });
$('#ex3').zoom({ on:'click' });
$('#ex4').zoom({ on:'toggle' });
});
</script>
</body>
</html>
維網(wǎng)和其它網(wǎng)絡(luò)類型最大的區(qū)別就是它在網(wǎng)頁上可呈現(xiàn)豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網(wǎng)絡(luò)上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會(huì)造成任何品質(zhì)的損失，且壓縮率高，支持動(dòng)畫效果，很適合互聯(lián)網(wǎng)平臺(tái)，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會(huì)對(duì)一些圖像數(shù)據(jù)造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數(shù)據(jù)越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網(wǎng)頁圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數(shù)據(jù)損失。它不僅支持像gif大部分優(yōu)點(diǎn)，還支持48 bit的色彩，跨平臺(tái)的圖像亮度控制，更多層的透明度設(shè)置。
網(wǎng)頁中通過<img>標(biāo)簽插入圖片，語法如下：
<img src="圖片路徑" alt="替換文本" />具體示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動(dòng)畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請(qǐng)注意，插入動(dòng)畫圖像的語法與插入普通圖像的語法沒有區(qū)別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預(yù)備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當(dāng)瀏覽器無法載入圖像時(shí)，替換文本屬性可告訴讀者他們失去的信息。此時(shí)，瀏覽器將顯示這個(gè)替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個(gè)好習(xí)慣，這樣有助于更好地顯示信息，并且對(duì)于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網(wǎng)頁中插入一個(gè)寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網(wǎng)頁中對(duì)一個(gè)圖片進(jìn)行超鏈接設(shè)置，點(diǎn)擊這張圖片就會(huì)跳轉(zhuǎn)到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對(duì)整個(gè)圖片進(jìn)行超鏈接設(shè)置外，還可以將圖像劃分成不同區(qū)域進(jìn)行鏈接設(shè)置，比如一張地圖中給每個(gè)省份圖形進(jìn)行超鏈接。
圖像熱區(qū)鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個(gè)熱區(qū)點(diǎn)擊區(qū)域形狀、大小、坐標(biāo)等。
area標(biāo)簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標(biāo)點(diǎn)位置，相對(duì)于圖片左上角位置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點(diǎn)擊太陽或其他行星，注意變化：</p>
<img src="/statics/images/course/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" target="_blank" alt="Sun" href="/statics/images/course/sun.gif">
<area shape="circle" coords="90,58,3" target="_blank" alt="Mercury" href="/statics/images/course/merglobe.gif">
<area shape="circle" coords="124,58,8" target="_blank" alt="Venus" href="/statics/images/course/venglobe.gif">
</map>
</body>
</html>效果可參考 https://www.w3cschool.cn/html5/html5-img.html 這里。
可以看到鼠標(biāo)在圖片上點(diǎn)擊小行星會(huì)打開對(duì)應(yīng)的圖片。
到此網(wǎng)頁中使用圖片已經(jīng)大體介紹了，自己親手寫下，會(huì)加深印象，感謝關(guān)注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網(wǎng)頁中使用視頻音頻
多特效代碼請(qǐng)?zhí)砑親TML5前端交流群581549454
廢話不多說，上代碼！
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.aaa-cg.com.cn?lcc">
<html xmlns="http://www.aaa-cg.com.cn?lcc">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>非常酷的3D立體圖片相冊(cè)展示代碼</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="js/lanrenzhijia.js"></script>
</head>
<body>
<div id="screen" style="zoom:1">
<span><img src="images/pr04.jpg" title="One morning" alt="-2,-1,-.8,1.5,2"></span>
<span><img src="images/pr03.jpg" title="hailing the Sun" alt="-1,-.8,0,1.2,1.6"></span>
<a target="_blank" ><img src="images/3D-eyes-big.jpg" title="befriending death" alt="-1.5,-.9,.8,3,1.8"></a>
<span><img src="images/pr01.jpg" title="world at myfingertips" alt="1,-.6,.2,1,.75"></span>
<span><img src="images/pr02.jpg" title="gathering strength" alt="-1.7,0,.4,1.4,1"></span>
<span><img src="images/pr07.jpg" title="I said, all right." alt=".5,-1,-.4,1.5,2"></span>
</div>
</body>
</html>
代碼很簡單，但是能實(shí)現(xiàn)的效果很強(qiáng)大
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
