منذ أن بدأت في تعلم الواجهة الأمامية ، عادةً ما أرى بعض عناصر التحكم المتميزة على المتصفح التي أريد تنفيذها O (∩_∩) يا بنفسي. أتساءل عما إذا كان لديك هذا الشعور. بعد ذلك ، سوف أشارككم واحدة. التحكم الأصلي يأتي من أسفل يمين ترجمة Baidu. يمكنك العثور عليها بعناية ، كما هو موضح في الشكل:
إنه شعور مثير للاهتمام للغاية ، وليس معقدًا للتنفيذ ، وهو أكثر ملاءمة للممارسة. حسنًا ، دعونا لا نتحدث كثيرًا ، فقط قم بتحميل الرمز.
رمز HTML:
نسخة الكود كما يلي:
<! doctype html>
<html>
<head>
<meta charset = 'utf-8'/>
<title> Zoom </itlem>
<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 ؛
الحشو: 0px ؛
}
#تكبير{
الموقف: مطلق ؛
أعلى: 20 بكسل ؛
اليمين: 200 بكسل ؛
الحدود: 1 بكسل Solid RGB (38،147،255) ؛
الارتفاع: 40 بكسل ؛
العرض: 40 بكسل ؛
}
#zoom> span {
العرض: كتلة مضمنة.
الموقف: مطلق ؛
أعلى: 0px ؛
أسفل: 0px ؛
اليسار: 0px ؛
العرض: 40 بكسل ؛
صورة الخلفية: url (sprite.png) ؛
تكرار الخلفية: عدم التكرار ؛
خلفية الموضع: -5px -7px ؛
العتامة: 0.8 ؛
مرشح: ألفا (عتامة = 50) ؛/*ie78*/
}
#zoom ul {
العرض: لا شيء ؛
الموقف: مطلق ؛
أعلى: 0px ؛
أسفل: 0px ؛
اليسار: 50 بكسل ؛
على غرار القائمة: لا شيء ؛
}
#zoom ul li {
العرض: كتلة مضمنة.
*العرض: inline ؛/*ie7*/
*التكبير: 1 ؛/*ie7*/
*الهامش اليساري: 5px ؛/*ie7*/
العرض: 16 بكسل ؛
الارتفاع: 16 بكسل ؛
الهامش: 12 بكسل ؛
صورة الخلفية: 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: Hover {
المؤشر: مؤشر.
العتامة: 0.8 ؛
مرشح: ألفا (عتامة = 50) ؛/*ie78*/
}
#Zoom Span: Hover {
المؤشر: مؤشر.
العتامة: 1 ؛
مرشح: ألفا (عتامة = 100) ؛/*ie78*/
}
رمز JS:
نسخة الكود كما يلي:
var Zoom = (function () {
var zoomdom = document.getElementById ('Zoom') ،
state = {فتح: خطأ ، ontaction: خطأ ، الطول: 0} ،
ديسبان ،
ul ؛
if (zoomdom.firstelementchild) {
showpan = zoomdom.firstelementchild ؛
ul = showpan.nextelementibling.
} آخر { /*ie* /
showpan = zoomdom.firstchild ؛
ul = showpan.nextsibling ؛
}
/*طريقة حدث التسجيل المتوافقة مع IE78*/
var addevent = function (el ، eventType ، eventHandler) {
if (el.addeventListener) {
el.AdDeventListener (EventType ، EventHandler ، false) ؛
} آخر إذا (el.attachevent) {
el.attachevent ('on' + eventtype ، eventHandler) ؛/*ie78*/
}
} ؛
/*أي طريقة حظر الأحداث الافتراضية المتوافقة مع الحدث*/
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 = 'none' ؛
oncollapse () ؛
}
}
} ؛
وظيفة الإرجاع () {
AddEvent (showpan ، "Click" ، OnSpanclick) ؛
} ؛
}) () ؛
الصورة التالية هي الصورة المستخدمة في CSS (Image ^ _ ^ مباشرة من ترجمة Baidu):
الجميع ، فقط قم بتغيير الاسم ووضعه في الدليل الجذر ، أو وضع مكانين مباشرة في CSS:
نسخة الكود كما يلي:
صورة الخلفية: url (sprite.png) ؛
التغيير إلى:
نسخة الكود كما يلي:
خلفية-صورة: url (http://images.cnitblog.com/blog2015/680599/201503/110916459332808.png) ؛
لا بأس أيضًا في استخدام مورد الصورة الذي قمت بتحميله مباشرة (بفضل الإنترنت القوي^_^).
التالي هو التأثير الذي حققته:
دعنا نتحدث عن النقاط الفنية الرئيسية خلال عملية الكتابة:
التحكم متوافق مع IE7 ، ولا يوجد أي IE6 في متناول اليد ، لذلك لا يمكن اختباره. يتم وضع علامة على مشاكل التوافق الرئيسية التي تم حلها في الكود.
مع استخدام تقنية CSS Sprites ، يجب أن تكون قد اكتشفتها ^_ ^، يجب استخدام التكنولوجيا الجيدة.
تطبيق عمليات الإغلاق في JS لتجنب التلوث العالمي.
في علامة البرنامج النصي HTML ، سألاحظ أيضًا هذه التفاصيل الصغيرة (على الرغم من أنها جميع الموارد المحلية ()).
حسنًا ، هذا كل شيء ، لكن هذا التحكم الصغير لا يزال لديه مجال لمزيد من التحسن. على سبيل المثال ، يمكنك استخدام سمة CSS3 لتحقيق التحجيم الديناميكي لـ DIV ، يمكنك تقديم هذا التحكم ، واستخدام إطار JQ لتنفيذه بشكل أكثر ملاءمة (JQ Practice) ، إلخ.
ما ورد أعلاه هو كل المحتوى المشترك في هذه المقالة ، أتمنى أن تنال إعجابك.