English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

  1. الموقع الحالي
  2. الصفحة الرئيسية
  3. ملاحظات الخبرة
  4. نص الجسم

مناقشة دالة jQuery Effects

jQuery يحتوي على العديد من الأثر يمكن تنفيذها، مثل تأثير التدرج والخروج：<html>

 <head>
    <style>
      #box{width:200px;height:200px;background:red;opacity:1;}
    </style>
  </head>
  <body>
    <div id="box">
    </div>
    <input type="button" value="إخفاء/إظهار" id="bt1"><br/><br/>
    <input type="button" value="تدرج" id="bt2"><br/><br/>
    <input type="button" value="خروج" id="bt3"><br/><br/>
    <input type="button" value="تمرير" id="bt4"><br/><br/>
    <input type="button" value="خروج" id="bt5"><br/><br/>
    <input type="button" value="شفافية منخفضة" id="bt6"><br/><br/>
    <input type="button" value="تمرير/خروج" id="bt7"><br/><br/>
    <input type="button" value="تدرج/خروج" id="bt7"><br/><br/>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $("function"(){
        $("#bt1").click(function(){
              $("#box").toggle(1000)
              }),
        $("#bt2").click(function(){
              $("#box").slideDown(1500)
              }),
        $("#bt3").click(function(){
              $("#box").slideUp(1500)
              }),
        $("#bt4").click(function(){
              $("#box").fadeIn(1000)
              }),
        $("#bt5").click(function(){
              $("#box").fadeOut(1000)
              }),
        $("#bt6").click(function(){
              $("#box").fadeTo(1500,0.4)
              }),
        $("#bt7").click(function(){
              $("#box").fadeToggle(1000)
              }),
        $("#bt8").click(function(){
              $("box").slideToggle(1500)
              });
        });
  </script>
</html>

jQuery也可以来实现一个滚动字幕的效果，比如说下边这个例子：<html>

<head>
    <style>
      #box{width:300px;height:50px;border:2px dashed violet;overflow:hidden;line-height:50px;margin:0 auto;color:red;font-size:30px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $("function"(){
        str="我是中国人"
        $("#box").html(str)
        setInterval(go,300)
          function go(){
            str=str.substr(1)+str.substr(0,1)
            $("#box").html(str)
            }  
      });
  </script>
</html>

jQuery可以用来实现一个删除功能的实现,比如：<html>

<head>
    <style>
      #box{
        width:400px;
        height:200px;
        border:1px solid black;
        }
    </style>
  </head>
  <body>
    <div id="box">
        <p id="a">第一a</p>
        <p>第二</p>
        <p id="a">第三a</p>
        <p>第四</p>
    </div>
    <button id="del">删除</button>
    <button id="cle">清空</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $("function"(){
        $("#del").click(
            function(){
              $("p").remove("#a")
              });
        $("#cle").click(
            function(){
              $("#box").empty()
              });
      });
  </script>
</html>

jQuery还会做出一选课功能的实现,比如:<html>

<head>
<title></title>
<style>
li{
  list-style:none;
}
#you{
  position:absolute;
  left:300px;
  top:10px;
}
ul{
  position:absolute;
  left:150px;
  top:10px;
}
</style>
<script src="jquery-1.6.js"></script>
<script>
  $("function"(){
    $("button:first").click(function(){
      $("#zuo>option:selected").prependTo($("#you"));
      //$("#you").append($("#zuo>option:selected");
    });
    $("button:eq(1)").click(function(){
      $("#you>option:selected").appendTo($("#zuo"));
      //$("#you").append($("#zuo>option:selected");
    });
    $("button:eq(2)").click(function(){
      $("#zuo>option").appendTo($("#you"));
    });
    $("button:eq(3)").click(function(){
      $("#you>option").appendTo($("#zuo"));
    });
    $("button:eq(4)").click(function(){
       //$("#zuo>option:first").before($("#zuo>option:selected"));
      $("#zuo>option:selected").prependTo($("#zuo"));
    });
    $("button:eq(5)").click(function(){
      // $("#zuo>option:last").after($("#zuo>option:selected"));
      $("#zuo>option:selected").appendTo($("#zuo"));
    });
    $("button:eq(6)").click(function(){
     $("#zuo>option:selected").prev().before($("#zuo>option:selected"));  
    });
    $("button:eq(7)").click(function(){
     $("#zuo>option:selected").next().after($("#zuo>option:selected"));  
    });
  });
</script>
</head>
<body>
<select size="10" id="zuo" style="width:100px">
  <option>لغة إنجليزية مهنية</option>
  <option>رياضيات جامعية</option>
  <option>لغة عربية الجامعة</option>
  <option>فيزياء الجامعة</option>
  <option>أساسيات الحاسوب</option>
  <option>تصميم صفحات الويب الأساسية</option>
  <option>تصميم برمجيات اللغة c</option>
  <option>هيكل البيانات</option>
  <option>تصميم واجهة المستخدم</option>
  <option>تصميم سكربت المنتج</option>
  <option>تحسين سكربت المنتج</option>
  <option>ممارسة سكربت المنتج</option>
</select>
<ul>
<li><button>اختيار</button></li>
<li><button>إزالة الاختيار</button></li>
<li><button>اختيار الكل</button></li>
<li><button>إلى الأسفل</button></li>
<li><button>إلى أعلى</button></li>
<li><button>إلى أسفل</button></li>
<li><button>تحريك للudeau</button></li>
<li><button>تحريك للأسفل</button></li>
</ul>
<select size="10" id="you" style="width:100px">
</select>
</body>
</html>

jQuery يمكنه تنفيذ وظيفة النافذة المنقولة:<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
 $(".flip").click(function(){
  $(".panel").slideDown("slow");
 });
});
</script>
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;
display:none;
}
</style>
</head>
<body>
<div class="panel">
<p>W3School - موقع تعليمي رائد في تقنيات الويب</p>
<p>في W3School، يمكنك العثور على جميع الدروس التي تحتاجها لبناء موقع الويب.</p>
</div>
<p class="flip">انقر هنا</p>
</body>
</html>
jQuery يمكن أن يقدم تأثيرات تحرك بسيطة:<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script> 
$(document).ready(function(){
 $("button").click(function(){
  $("div").animate({left:'250px'});
 });
});
</script> 
</head>
<body>
<button>بدء التحرك</button>
<p>بالت默认، جميع عناصر HTML تكون في وضع ثابت، ولا يمكن تحريكها. إذا كنت بحاجة إلى تعديل موضع، تذكر أولاً تعيين خاصية CSS position للعنصر إلى relative أو fixed أو absolute.</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
jQuery يمكن أن يوفر وظيفة بدء وإنهاء التحرك:<html>
  <head>
    <style>
      #box{width:100px;height:100px;background:violet;position:absolute;border-radius:50%;top:50px;}
    </style>
  </head>
  <body>
    <div id="box"></div>
    <button id="bt">بدء</button>
    <button id="bt1">وقف</button>
  </body>
  <script src="jquery-1.6.js"></script>
  <script>
    $("function"(){
        $("#bt").click(function(){
              $("div").animate({left:"800px",top:"300px",width:"500px",height:"500px"},3000)
              }),
        $("#bt1").click(function(){
              $("div").stop();
              });      
        });
  </script>
</html>

jQuery يمكن أن يقدم وظائف إعلانات صورة ترفيعية:<html>

<head>
    <style>
      #box{width:600px;height:300px;overflow:hidden;border:1px solid #000;margin:0 auto;}
      ul{list-style:none;}
      img{width:600px;height:300px;}
      *{padding:0;margin:0;}
    </style>
  </head>
  <body>
    <div id="box">
      <ul id="pic">
        <li><img src="1.png"></li>
        <li><img src="2.png"></li>
        <li><img src="3.png"></li>
        <li><img src="4.png"></li>
        <li><img src="1.png"></li>
      </ul>
    </div>
  </body>
  <script src="jquery-1.7.1.min.js"></script>
  <script>
    $("function"(){
        m=0;
        p=setInterval(go,100)
        function go(){
            m+=20;
            $("#pic").css("margin-top",-m+"px")
            if(m>=1200){m=0}
            }
      });
  </script>
</html>

يمكن لـ jQuery تحقيق تأثيرات منفتحة ومغلقتة في آن واحد:<!DOCTYPE html>

<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$("document").ready(function()
 {
 $("button").click(function(){
  $("#p1").css("color","red").slideUp(2000).slideDown(2000);
 });
});
</script>
</head>
<body>
<p id="p1">jQuery مليء بالمرح!</p>
<button>انقر هنا</button>
</body>
</html>

هذا كل ما أقدمه لكم، شكرًا لكم.

هذا هو كل محتوى هذا الدليل الخاص بـ jQuery الذي قدمته لكم، آمل أن يكون مرجعًا جيدًا وأن ألفت انتباهكم دائمًا لتعليمات呐喊.

دليل الأساسيات
منتجات قد تهمك