ตั้งแต่ฉันเริ่มเรียนรู้ส่วนหน้าฉันมักจะเห็นการควบคุมที่โดดเด่นบางอย่างบนเบราว์เซอร์ที่ฉันต้องการใช้ O (∩_∩) o ด้วยตัวเอง ฉันสงสัยว่าคุณมีความรู้สึกนี้หรือไม่ ต่อไปฉันจะแบ่งปันกับคุณ การควบคุมดั้งเดิมมาจากด้านล่างขวาของการแปล Baidu คุณสามารถค้นหาได้อย่างระมัดระวังดังที่แสดงในรูป:
มันให้ความรู้สึกที่น่าสนใจไม่ซับซ้อนในการใช้งานและเหมาะสำหรับการฝึกฝน ตกลงอย่าพูดมากแค่อัปโหลดรหัส
รหัส HTML:
การคัดลอกรหัสมีดังนี้:
<! doctype html>
<html>
<head>
<meta charset = 'utf-8'/>
<title> ซูม </title>
<link rel = "stylesheet" type = "text/css" href = "zoom.css"/>
</head>
<body onload = "zoom ()">
<div id = 'zoom'>
<span title = "Share ... "> </span>
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
</div>
<script type = "text/javascript" src = "zoom.js"> </script>
</body>
</html>
รหัส CSS:
การคัดลอกรหัสมีดังนี้:
-
มาร์จิ้น: 0px;
Padding: 0px;
-
#zoom {
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 20px;
ขวา: 200px;
ชายแดน: 1px Solid RGB (38,147,255);
ความสูง: 40px;
ความกว้าง: 40px;
-
#Zoom> Span {
แสดง: Inline-Block;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px;
ด้านล่าง: 0px;
ซ้าย: 0px;
ความกว้าง: 40px;
ภาพพื้นหลัง: URL (sprite.png);
พื้นหลังซ้ำ: ไม่ทำซ้ำ;
ตำแหน่งพื้นหลัง: -5px -7px;
ความทึบ: 0.8;
ตัวกรอง: อัลฟ่า (ความทึบ = 50);/*ie78*/
-
#zoom ul {
แสดง: ไม่มี;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px;
ด้านล่าง: 0px;
ซ้าย: 50px;
รายการสไตล์: ไม่มี;
-
#zoom ul li {
แสดง: Inline-Block;
*แสดง: inline;/*ie7*/
*ซูม: 1;/*ie7*/
*ระยะขอบซ้าย: 5px;/*ie7*/
ความกว้าง: 16px;
ความสูง: 16px;
ขอบด้านบน: 12px;
ภาพพื้นหลัง: URL (sprite.png);
พื้นหลังซ้ำ: ไม่ทำซ้ำ;
-
#zoom .li1 {
ตำแหน่งพื้นหลัง: -57px -20px;
-
#zoom .li2 {
ตำแหน่งพื้นหลัง: -77px -20px;
-
#zoom .li3 {
ตำแหน่งพื้นหลัง: -98px -20px;
-
#zoom .li4 {
ตำแหน่งพื้นหลัง: -119px -20px;
-
#zoom .li5 {
ตำแหน่งพื้นหลัง: -140px -20px;
-
#zoom .li6 {
ตำแหน่งพื้นหลัง: -161px -20px;
-
#zoom .li7 {
ตำแหน่งพื้นหลัง: -182px -20px;
-
#zoom .li8 {
ตำแหน่งพื้นหลัง: -203px -20px;
-
#zoom li: โฮเวอร์ {
เคอร์เซอร์: ตัวชี้;
ความทึบ: 0.8;
ตัวกรอง: อัลฟ่า (ความทึบ = 50);/*ie78*/
-
#Zoom Span: Hover {
เคอร์เซอร์: ตัวชี้;
ความทึบ: 1;
ตัวกรอง: อัลฟ่า (ความทึบ = 100);/*ie78*/
-
รหัส JS:
การคัดลอกรหัสมีดังนี้:
var zoom = (function () {
var zoomdom = document.getElementById ('ซูม')
state = {เปิด: เท็จ, onAction: เท็จ, ความยาว: 0},
showspan,
ul;
if (zoomdom.firstelementchild) {
showspan = zoomdom.firstelementchild;
ul = showspan.nextelementsibling;
} else { /*ie* /
showspan = zoomdom.firstchild;
ul = showspan.nextsibling;
-
/*วิธีการลงทะเบียนที่เข้ากันได้กับ IE78*//
var addevent = function (el, eventtype, eventhandler) {
if (el.addeventListener) {
El.addeventListener (EventType, EventHandler, False);
} อื่นถ้า (el.attachevent) {
El.AttacheVent ('on' + EventType, EventHandler);/*IE78*/
-
-
/*วิธีการบล็อกเหตุการณ์เริ่มต้นที่เข้ากันได้กับ IE*//
var stopDefault = function (e) {
if (e && e.preventDefault) {
E.preventDefault ();
} อื่น {
window.event.returnvalue = false;/*ie*//
-
-
/*ขยายการควบคุม*//
var onopen = function () {
if (state.length> 250) {
ul.style.display = 'inline-block';
state.onaction = false; state.opened = true;
}อื่น{
if (! state.onaction) {state.onaction = true;}
state.length += 10;
zoomdom.style.width = state.length + 'px';
Settimeout (Onopen, 0)
-
-
/*ปิดการควบคุม*/
var onCollapse = function () {
if (state.length <41) {
state.onaction = false; state.opened = false;
}อื่น{
if (! state.onaction) {state.onaction = true;}
state.length -= 10;
zoomdom.style.width = state.length + 'px';
Settimeout (OnCollapse, 0);
-
-
/*คลิกการโทรกลับของปุ่มทริกเกอร์*/
var onspanclick = function (e) {
stopdefault (e);
if (! state.onaction) {
if (! state.opened) {
Onopen ();
}อื่น{
ul.style.display = 'ไม่มี';
Oncollapse ();
-
-
-
return function () {
Addevent (showspan, 'คลิก', onspanclick);
-
-
ภาพต่อไปนี้คือภาพที่ใช้ใน CSS (รูปภาพ ^ _ ^ โดยตรงจากการแปล Baidu):
ทุกคนเพียงแค่เปลี่ยนชื่อและวางไว้ในไดเรกทอรีรูทหรือวางสองสถานที่โดยตรงใน CSS:
การคัดลอกรหัสมีดังนี้:
ภาพพื้นหลัง: URL (sprite.png);
เปลี่ยนเป็น:
การคัดลอกรหัสมีดังนี้:
Background-Image: URL (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png);
นอกจากนี้ยังสามารถใช้ทรัพยากรรูปภาพที่ฉันอัปโหลดโดยตรง (ขอบคุณอินเทอร์เน็ตที่ทรงพลัง^_^)
ต่อไปคือเอฟเฟกต์ที่ฉันทำได้:
มาพูดคุยเกี่ยวกับประเด็นทางเทคนิคหลักของฉันในระหว่างกระบวนการเขียน:
การควบคุมเข้ากันได้กับ IE7 และไม่มี IE6 อยู่ในมือดังนั้นจึงไม่สามารถทดสอบได้ ปัญหาความเข้ากันได้หลักที่แก้ไขแล้วมีการทำเครื่องหมายในรหัส
ด้วยการใช้เทคโนโลยี CSS Sprites คุณควรค้นพบมัน ^_ ^จำเป็นต้องใช้เทคโนโลยีที่ดี
ใช้การปิดใน JS เพื่อหลีกเลี่ยงมลพิษทั่วโลก
ในแท็กสคริปต์ HTML ฉันจะสังเกตเห็นรายละเอียดเล็ก ๆ นี้ (แม้ว่าพวกเขาจะเป็นทรัพยากรในท้องถิ่นทั้งหมด ())
นั่นมันแค่ไหน แต่การควบคุมเล็ก ๆ น้อย ๆ นี้ยังคงมีที่ว่างสำหรับการปรับปรุงเพิ่มเติม ตัวอย่างเช่นคุณสามารถใช้แอตทริบิวต์ CSS3 เพื่อให้ได้การปรับสเกลแบบไดนามิกของ DIV คุณสามารถองค์ประกอบการควบคุมนี้และใช้กรอบ JQ เพื่อใช้งานได้อย่างสะดวกยิ่งขึ้น (การฝึก JQ) ฯลฯ
ข้างต้นคือเนื้อหาทั้งหมดที่แบ่งปันโดยบทความนี้ฉันหวังว่าคุณจะชอบ