English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
هذه المقالة توضح تأثير التدرج اللوني للماوس في تنفيذ جافا سكريبت. نتشارك هذا معكم للاستفادة والاستفادة، كما يلي:
شكل التشغيل كما يلي:
كود الكامل كما يلي:
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>مثال على التدرج اللوني</title>
<script type="text/javascript">
//--------------------------------------------------------------------
// مكتبة الأساس:
//1. الحصول على العنصر:
function $(id){
return typeof id=='string'?document.getElementById(id):id;
}
//2. إضافة مستمع الحدث:
function addEventHandler(oTarget,sEventType,fnHandler){
if(oTarget.addEventListener){
oTarget.addEventListener(sEventType,fnHandler,false);
}else if(oTarget.attachEvent){
oTarget.attachEvent("on"+sEventType,fnHandler);
}else{
oTarget["on"+sEventType]=fnHandler;
}
}
//3. تعريف "فئة" لإنشاء العناصر:
var Class={
Create:function(){
return function(){
this.initialize.apply(this,arguments);
}
}
}
//4. دمج خصائص العنصر:
Object.extend=function(destination,source){
for(var property in source){
destination[property]=source[property];
}
return destination;
}
//--------------------------------------------------------------------
var colorFade=Class.Create();
colorFade.prototype={
//1. بدء الفئة:
initialize:function(obj,options){
this._obj=$(obj); // الحالي لتحديد الأشياء التي سيتم تغيير لونها.
this._timer=null;//مقياس الوقت.
this.SetOptions(options);//م 参数 المدخل.
this.Steps=Math.abs(this.options.Steps);
this.Speed=Math.abs(this.options.Speed);
//this._colorArr:للإقامة معلومات الألوان (r.g.b) الحالية.
this.StartColorArr=this._colorArr=this.getColorArr(this.options.StartColor);
this.EndColorArr=this.getColorArr(this.options.EndColor);
this.Background=this.options.Background;
//من البداية إلى النهاية، قيم التدرج الثلاثية الألوان (r.g.b) (أي، يجب زيادة/إنقاص القيمة في كل مرة)
this._stepAddValueArr=[this.getColorAddValue(this.StartColorArr[0],this.EndColorArr[0]),this.getColorAddValue(this.StartColorArr[1],this.EndColorArr[1]),this.getColorAddValue(this.StartColorArr[2],this.EndColorArr[2])];
//إعداد لون العنصر:
this._setObjColor=this.Background?function(sColor){
this._obj.style.backgroundColor=sColor;
}:function(sColor){
this._obj.style.color=sColor;
};
this._setObjColor(this.options.StartColor);
//لإضافة الحدث إلى العنصر:
var oThis=this;
addEventHandler(this._obj,"mouseover",
function(){
oThis.Fade(oThis.EndColorArr);
}
);
addEventHandler(this._obj,"mouseout",function(){
oThis.Fade(oThis.StartColorArr);
});
},
/*
2. بدء خصائص العنصر:
*/
SetOptions:function(options){
this.options={
StartColor: "#000000",
EndColor: "#ffffff",
Steps: 20,// عدد التدرجات
Speed: 20,// سرعة التدرج، أي بعد كل كم من (Speed) ميليسي ثانية يحدث التدرج.
Background: true// إذا كان التدرج خلفية للعنصر.
}
// دمج الخصائص:
Object.extend(this.options,options||{});
},
/*
3. الحصول على معلومات مجموعة "r.g.b" لم色素 معيّن:
sColor: قيمة اللون التي يتم حسابها، بنمط "#ccc000".
العدد الذي يعود إليه هو مجموعة.
*/
getColorArr:function(sColor){
var curColor=sColor.replace("#","");
var r,g,b;
إذا (curColor.length>3){// قيمة من ستة أرقام
r=curColor.substr(0,2);
g=curColor.substr(2,2);
b=curColor.substr(4,2);
}else{
r=curColor.substr(0,1);
g=curColor.substr(1,1);
b=curColor.substr(2,1);
r+=r;
g+=g;
b+=b;
}
// العودة إلى قيمة العشريّة للبيانات العشريّة:
return [parseInt(r,16),parseInt(g,16),parseInt(b,16)];
},
/*
4. الحصول على قيمة التدرج الحالية للون الأصلي (r.g.b).
sRGB: قيمة اللون البدائي (قيمة عشريّة)
eRGB: قيمة اللون النهائي (قيمة عشريّة)
*/
getColorAddValue:function(sRGB,eRGB){
var stepValue=Math.abs((eRGB-sRGB)/this.Steps);
إذا (stepValue>0 && stepValue<1){
stepValue=1;
}
return parseInt(stepValue);
},
/*
5. الحصول على معلومات مصفوفة "r.g.b" لللون التدرج الحالي.
startColor: اللون البدء، لهيكل "#ccc000";
iStep: المستوى الحالي للتدرج (أي عدد مرات التدرج الحالية).
يستعيد قيمة اللون، مثل #fff000.
*/
getStepColor:function(sColor,eColor,addValue){
if(sColor==eColor){
return sColor;
}else if(sColor<eColor){
return (sColor+addValue)>eColor?eColor:(sColor+addValue);
}else if(sColor>eColor){
return (sColor-addValue)<eColor?eColor:(sColor-addValue);
}
},
/*
6. البدء في التدرج:
endColorArr: ال لون المستهدف، وهو مجموعة معلومات r.g.b.
*/
Fade:function(endColorArr){
clearTimeout(this._timer);
var er=endColorArr[0],
eg=endColorArr[1],
eb=endColorArr[2],
r=this.getStepColor(this._colorArr[0],er,this._stepAddValueArr[0]),
g=this.getStepColor(this._colorArr[1],eg,this._stepAddValueArr[1]),
b=this.getStepColor(this._colorArr[2],eb,this._stepAddValueArr[2]);
this._colorArr=[r,g,b];
this._setObjColor("#"+Hex(r) + Hex(g) + Hex(b));
if(r!=er||g!=eg||b!=eb){
var oThis=this;
oThis._timer=setTimeout(function(){oThis.Fade(endColorArr)},oThis.Speed);
}
}
}
// 返回16进制数
function Hex(i) {
if (i < 0) return "00";
else if (i > 255) return "ff";
else {
//decimal to hexadecimal:
var str = "0" + i.toString(16);
return str.substring(str.length - 2);
}
}
</script>
</head>
<body>
<div id="test" style="height:40px;width:200px;border:1px solid red;">
خخ!
</div>
<div id="test1" style="height:40px;width:200px;border:1px solid red;">
ههه!
</div>
<div id="test2" style="height:40px;width:200px;border:1px solid red;">
هاها!
</div>
</body>
<script type="text/javascript">
var colorFade01=new colorFade("test",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade02=new colorFade("test",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade03=new colorFade("test1",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade04=new colorFade("test1",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
var colorFade05=new colorFade("test2",{StartColor:'#000000',EndColor:'#8AD4FF',Background:true});
var colorFade06=new colorFade("test2",{StartColor:'#8AD4FF',EndColor:'#000000',Background:false});
</script>
</html>
النص الإضافي: أود أن أوصي ببعض الأدوات المتعلقة بتصميم عناصر الويب للاستخدام كمرجع:
أداة إنشاء نصوص متأثرة بالأثر/نصوص ملونة عبر الإنترنت
http://tools.jb51.net/aideddesign/colortext
أداة الت调试 عبر الإنترنت لـ Linear Gradients في Firefox (moz)
http://tools.jb51.net/aideddesign/moz_LinearGradients
أداة الت调试 عبر الإنترنت لـ Linear Gradients في Safari/Chrome (webkit)
http://tools.jb51.net/aideddesign/webkit_LinearGradients
لمزيد من المعلومات حول JavaScript، يمكنك الرجاء زيارة مواضيع هذا الموقع: 'تعليم JavaScript بوجهة نظر物件ية'، 'دليل شامل للتحكم في الأحداث والأساليب في JavaScript'، 'تجميع تقنيات وتكتيكات التأثير في JavaScript'، 'تجميع تقنيات وتكتيكات التحرك في JavaScript'، 'تجميع تقنيات وتكتيكات التعامل مع الأخطاء والتحقق من JavaScript'، 'تجميع تقنيات وتكتيكات بنية البيانات والخوارزميات في JavaScript'، و 'تجميع تقنيات وتكتيكات العمليات الحسابية في JavaScript'.
آمل أن يساعدك ما ذكرته في هذا المقال في تصميم برامج JavaScript الخاصة بك.
البيان: محتوى هذا المقال تم جمعه من الإنترنت، يحق لصاحب الحقوق أن يكون المساهم، ويتم تحميل المحتوى من قبل مستخدمي الإنترنت، ولا يمتلك هذا الموقع حقوق الملكية، ولا يتم تعديل المحتوى بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية متعلقة بذلك. إذا كنت قد وجدت محتوى يشتبه في انتهاك حقوق النسخ، فالرجاء إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (عند إرسال البريد الإلكتروني، يرجى استبدال #بـ @) لإبلاغنا، وتقديم الدليل، إذا تم التحقق من ذلك، فإن هذا الموقع سيقوم بإزالة المحتوى المزعوم بسرعة.