jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果(附demo源碼)

字號(hào):


    這篇文章主要介紹了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果,實(shí)例演示了jQuery的Kwicks插件實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的響應(yīng)與頁(yè)面元素樣式動(dòng)態(tài)變換的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下
    本文實(shí)例講述了jQuery實(shí)現(xiàn)的鼠標(biāo)經(jīng)過(guò)時(shí)變寬的效果。分享給大家供大家參考,具體如下:
    <!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" xml:lang="en" lang="en" dir="ltr">
      <head>
        <title>Kwicks 1.5.1 Example Page</title>
        <!-- IMPORTANT!!! Include the stylesheet *BEFORE* the JavaScript (necessary for Safari 3.1.1) -->
        <link rel="stylesheet" type="text/css" href="css/main.css" />
        <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script>
        <script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
        <script src="js/jquery.kwicks-1.5.1.pack.js" type="text/javascript"></script>
        <script type="text/javascript">
          $().ready(function() {
            $('.kwicks').kwicks({
              max : 220,
              spacing : 5
            });
          });
        </script>
      </head>
      <body>
        <ul >
          <li id="kwick_1"></li>
          <li id="kwick_2"></li>
          <li id="kwick_3"></li>
          <li id="kwick_4"></li>
        </ul>
      </body>
    </html>
    希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。