HTML5熱點 area自適應
http://m.blog.csdn.net/zxlsara/article/details/72832200 javascript
UMISAndUFFICE=>mobile=>umis_maincss
//注意：img的寬高得是100%，跟隨父元素，而後獲取父元素的寬高動態計算area座標，腳本里面定義圖片原先的寬高！html
.mainIndexes .turntable {
width: 100%;
height: 100%;
}java
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-orientation" content="portrait">
<meta http-equiv="Cache-Control" content="no-siteapp">
<meta name="x5-fullscreen" content="true">
<meta name="format-detection" content="telephone=no, email=no" />jquery
<meta name="description" content="">
<meta name="keywords" content="">
<title>umis_main</title>
<link rel="stylesheet" href="../../css/mobile/reset.css" />
<link rel="stylesheet" href="../../css/mobile/umis.css"/>
<link rel="stylesheet" href="../../css/mobile/swiper-3.3.1.min.css" />
<script src="../../js/mobile/adaptation.js"></script>
<style>
</style>
</head>
<body >
<section class="wrap">
<section id="header">
<h1><a href="#"><img src="../../images/move/logo.png"/> </a></h1>
<div class="foldMenu"></div>
</section>
<section class="content">
<section class="foldList">
<ul class="menu1" >
<li><a href="javascript:;">首頁1</a></li>
<li><a href="">UMIS</a></li>
<li><a href="javascript:;">UFFICE</a></li>
<li><a href="javascript:;">解決方案</a>
<ul class="menu2">
<li><a href="javascipt:;">政府</a></li>
<li><a href="javascipt:;">企業</a></li>
<li><a href="javascipt:;">BIM</a></li>
<li><a href="javascipt:;">醫療</a></li>
<li><a href="javascipt:;">教育</a></li>
<li><a href="javascipt:;">系統集成</a></li>
</ul>
</li>
<li><a href="javascript:;">案列</a>
<ul class="menu2">
<li><a href="javascipt:;">政府</a></li>
<li><a href="javascipt:;">企業</a></li>
<li><a href="javascipt:;">BIM</a></li>
<li><a href="javascipt:;">醫療</a></li>
<li><a href="javascipt:;">教育</a></li>
</ul>
</li>
<li><a href="javascript:;">互軟</a>
<ul class="menu2">
<li><a href="javascipt:;">集團介紹</a></li>
<li><a href="javascipt:;">創新中心</a>
<ul class="menu3">
<li><a href="javascript:;">中心簡介</a></li>
<li><a href="javascript:;">智慧城市研究</a></li>
<li><a href="javascript:;">產業動態</a></li>
</ul>
</li>
<li><a href="javascipt:;">行業信息化</a>
<ul class="menu3">
<li><a href="javascript::">互聯網+政府</a></li>
<li><a href="javascript::">互聯網+企業</a></li>
<li><a href="javascript::">互聯網+BIM</a></li>
<li><a href="javascript::">互聯網+醫療</a></li>
<li><a href="javascript::">互聯網+教育</a></li>
<li><a href="javascript::">通用產品</a></li>
<li><a href="javascript::">諮詢服務</a></li>
<li><a href="javascript::">IT運維</a></li>
</ul>
</li>
<li><a href="javascipt:;">企業動態</a></li>
<li><a href="javascipt:;">企業文化</a></li>
<li><a href="javascipt:;">企業招聘</a></li>
<li><a href="javascipt:;">合做夥伴</a></li>
</ul>
</li>
</ul>
</section>
<section class="contentTop map">
<section class="mainIndexes ">
<div class="title">
<h2>互軟UMIS協同管理系統</h2>
<p>爲企業創造高效協做、溝通順暢的管理體系與辦公環境。</p>
</div>
<img class="turntable" src="../../images/mobile/turntableMap.jpg" usemap="#Map" border="0" />
<map name="Map" id="Map">
<area shape="poly" coords="227,248,272,227,314,249,333,211,358,195,382,192,405,148,381,103,321,117,284,139,249,178,233,218" href="" onfocus="blur(this);"/>
<area shape="poly" coords="395,107,414,143,392,192,435,215,452,257,496,282,535,259,516,179,476,135,413,107" href="#" onfocus="blur(this);"/>
<area shape="poly" coords="451,269,495,291,536,269,517,336,487,374,441,404,385,415,362,371,384,330,419,318,441,292" href="#" onfocus="blur(this);"/>
<area shape="poly" coords="374,325,351,373,373,415,310,395,260,353,236,310,227,272,227,261,271,237,314,263,324,291,339,312" href="#" onfocus="blur(this);"/>
</map>
</section>
</section>
<section class="contentBotton">
<ul class="product">
<li>
<a href="">產品</a>
<span>互軟UMIS</span>
<span>互軟UFFICE</span>
<span>互軟UBIM</span>
</li>
<li>
<a href="javascript:;" >產品</a>
<span>互軟UMIS</span>
<span>互軟UFFICE</span>
<span>互軟UBIM</span>
</li>
<li>
<a href="">產品</a>
<span>互軟UMIS</span>
<span>互軟UFFICE</span>
<span>互軟UBIM</span>
</li>
<li>
<a href="">產品</a>
<span>互軟UMIS</span>
<span>互軟UFFICE</span>
<span>互軟UBIM</span>
</li>
</ul>
<div class="footer">
<p>
滬IC備05025289號<br />
Copyright(c) 2000-2017 上海互聯網軟件集團
</p>
<div class="link">
<a href="#"></a><a href="#">上海工商</a>
</div>
</div>
</section>
</section>
<section class="eject">
<div class="mask"></div>
<div class="info">
<h2>獲取更多產品資料和解決方案</h2>
<form action="">
<p>
<label for="name">您的姓名：</label>
<input type="text" id="name">
</p>
<p>
<label for="tel">手機號碼：</label>
<input type="text" id="tel">
</p>
<p>
<label for="mailbox">電子郵箱：</label>
<input type="text" id="mailbox">
</p>
<p>
<label for="Company">工做單位:</label>
<input type="text" id="Company">
</p>
<p class="btn">
<input class="sub_btn" type="submit" value="提交">
<input class="can_btn" type="button" value="取消">
</p>
</form>
<span class="close" title="關閉"></span>
</div>
<div class="info2">
<p>感謝您對互軟集團產品的關注與支持，咱們會盡快聯繫您，謝謝！</p>
<input type="button" class="sure_btn" value="肯定">
<span class="close" title="關閉"></span>
</div>
</section>
</section>
<script src="../../js/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="../../js/mobile/swiper-3.3.1.jquery.min.js"></script>
<script src="../../js/move/moveProduct.js"></script>
<script>
areaValue();
//onresize觸發次數過多，設置定時器
//頁面大小變化，從新加載頁面以刷新MAP
var timeout = null;
window.onresize = function() {
clearTimeout(timeout);
timeout = setTimeout(function() {
window.location.reload();
}, 100);
}
function areaValue() {
$("area").each(function() {
var oldValue = new String();
oldValue = $(this).attr("coords");
var newValue = adjustPoint(oldValue);
$(this).attr("coords", newValue);
});
};
//計算新的座標點
function adjustPoint(item) {
var pageWidth = $(".mainIndexes ").css("width"); //頁面的長寬
console.log(pageWidth)
var pageHeight = $(".mainIndexes ").css("height");
var imageWidth =750; //圖片的長寬
var imageHeigth = 454;
var itemChild = item.split(",");
for(var i = 0; i < itemChild.length; i++) {
itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageWidth) / parseInt(imageWidth)).toString();
i++;
itemChild[i] = Math.round(parseInt(itemChild[i]) * parseInt(pageHeight) / parseInt(imageHeigth)).toString();
}
//生成新的座標點
var newValue = "";
for(var i = 0; i < itemChild.length; i++) {
newValue += itemChild[i];
if(i < itemChild.length - 1) {
newValue += ",";
}
}
return newValue;
};
</script>
</body>
</html>
web
- 1. 熱點連接(img map area)
- 2. 什麼是自適應模板？自適應模板有什麼優點缺點
- 3. rem自適應js
- 4. html5-圖片熱區
- 5. HTML5----響應式（自適應）網頁設計
- 6. [適配] iOS 10 Safe Area
- 7. 自適應RELU
- 8. Web自適應
- 9. UGUI自適應
- 10. rem 自適應
- 更多相關文章...
- • 自定義TypeHandler - MyBatis教程
- • Maven Web 應用 - Maven教程
- • 適用於PHP初學者的學習線路和建議
- • TiDB 在摩拜單車在線數據業務的應用和實踐
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. vs2019運行opencv圖片顯示代碼時，窗口亂碼
- 2. app自動化 - 元素定位不到？別慌，看完你就能解決
- 3. 在Win8下用cisco ××× Client連接時報Reason 422錯誤的解決方法
- 4. eclipse快速補全代碼
- 5. Eclipse中Java/Html/Css/Jsp/JavaScript等代碼的格式化
- 6. idea+spring boot +mabitys(wanglezapin)+mysql (1)
- 7. 勒索病毒發生變種 新文件名將帶有「.UIWIX」後綴
- 8. 【原創】Python 源文件編碼解讀
- 9. iOS9企業部署分發問題深入瞭解與解決
- 10. 安裝pytorch報錯CondaHTTPError：******
- 1. 熱點連接(img map area)
- 2. 什麼是自適應模板？自適應模板有什麼優點缺點
- 3. rem自適應js
- 4. html5-圖片熱區
- 5. HTML5----響應式（自適應）網頁設計
- 6. [適配] iOS 10 Safe Area
- 7. 自適應RELU
- 8. Web自適應
- 9. UGUI自適應
- 10. rem 自適應