整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
多特效代碼請添加HTML5前端交流群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手機微信端手指觸摸圖片放大代碼</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>
維網和其它網絡類型最大的區別就是它在網頁上可呈現豐富多彩的色彩和圖像，還可以播放音頻、視頻，及把圖像作為鏈接使用。
網絡上流行的圖片格式主要有jpg、jpeg、png、gif等，以下是這幾種格式的介紹。
1、gif格式
gif采用LZW壓縮，是以壓縮相同顏色色塊來減少圖像大小。由于LZW壓縮不會造成任何品質的損失，且壓縮率高，支持動畫效果，很適合互聯網平臺，但是它只支持256種顏色。
2、jpg或jpeg格式
以JPEG有損壓縮圖片，通常用來保存超過256色的圖片格式。JPEG壓縮過程會對一些圖像數據造成損失，這部分損失不影響圖片顯示，一般人眼是看不出來差異的。損失數據越多，圖片就越不清晰。
3、png格式
png是一種非破壞性的網頁圖像文件格式，它以最小的方式壓縮圖片且不造成圖片數據損失。它不僅支持像gif大部分優點，還支持48 bit的色彩，跨平臺的圖像亮度控制，更多層的透明度設置。
網頁中通過<img>標簽插入圖片，語法如下：
<img src="圖片路徑" alt="替換文本" />具體示例：
<!DOCTYPE HTML>
<html>
<body>
<p>
一幅圖像：
<img src="/i/eg_mouse.jpg" width="128" height="128" />
</p>
<p>
一幅動畫圖像：
<img src="/i/eg_cute.gif" width="50" height="50" />
</p>
<p>請注意，插入動畫圖像的語法與插入普通圖像的語法沒有區別。</p>
</body>
</html>效果如下：
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。
<img src="boat.gif" alt="Big Boat">當瀏覽器無法載入圖像時，替換文本屬性可告訴讀者他們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好地顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
圖像寬度和高度屬性
如下代碼，在網頁中插入一個寬度和高度都是300像素的圖片。
<img src="/i/ct_netscape.jpg" width="300px" height="300px" />圖片超鏈接
如下代碼，在網頁中對一個圖片進行超鏈接設置，點擊這張圖片就會跳轉到其它頁面。
<a href="頁面路徑"><img src="/i/ct_netscape.jpg" /></a>除了對整個圖片進行超鏈接設置外，還可以將圖像劃分成不同區域進行鏈接設置，比如一張地圖中給每個省份圖形進行超鏈接。
圖像熱區鏈接，使用usemap 屬性通過#name指定到名叫name的map元素上，map定義了每個熱區點擊區域形狀、大小、坐標等。
area標簽的 shape 屬性有三種，rect 方形，circle 圓形，poly 多邊形。coords 屬性定義坐標點位置，相對于圖片左上角位置。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool(w3cschool.cn)</title>
</head>
<body>
<p>點擊太陽或其他行星，注意變化：</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 這里。
可以看到鼠標在圖片上點擊小行星會打開對應的圖片。
到此網頁中使用圖片已經大體介紹了，自己親手寫下，會加深印象，感謝關注。
上篇：前端入門——html 超鏈接
下篇：前端入門——html 如何在網頁中使用視頻音頻
多特效代碼請添加HTML5前端交流群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立體圖片相冊展示代碼</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>
代碼很簡單，但是能實現的效果很強大
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
