[学习交流] [广州PHP]JQ简单实现隔行换色与悬浮特效

本帖最后由 bingwei213 于 2018-8-31 20:47 编辑

[广州PHP]JQ简单实现隔行换色与悬浮特效:

[PHP] 纯文本查看 复制代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>简单实现悬浮放大菜单</title>
    <style media="screen">
      h1{
        background: gray;
      }
      ul{
        list-style: none;
        padding: 0px;
        margin: 0px;
      }
      li{
        width: 300px;
        left:0px;
      }
    </style>
    <script src="./jquery-1.8.3.min.js" charset="utf-8"></script>
    <script type="text/javascript">
      window.onload = function(){
        //列表添加隔行换色样式
        $('div:contains("广东") li:even').css('background-color','#CCC');
        $('div:contains("广东") li:odd').css('background-color','pink');
        //为所有li标签添加悬浮事件
        var lis = $('li');
        for(var i = 0;i<lis.length;i++){
          lis[i].onmouseover=function(){
            $(this).offset({
              left:30
            });
            $(this).css('font-size','50px');
          }
          lis[i].onmouseout=function(){
            $(this).offset({
              left:8
            });
            $(this).css('font-size','');
          }
        }

      }
    </script>
  </head>
  <body>
    <div class="">
      <h2>广东:</h2>
      <ul>
        <li>广州</li>
        <li>深圳</li>
        <li>东莞</li>
        <li>佛山</li>
        <li>珠海</li>
        <li>中山</li>
      </ul>
    </div>
  </body>
</html>

效果：

帐号		自动登录	找回密码
密码			加入黑马

[学习交流] [广州PHP]JQ简单实现隔行换色与悬浮特效

0 个回复