• jquery选择器


    next()      这里的下一个只针对同一个父级里的子集;找不到父级之外的元素
    siblings() 下一个兄弟节点

    /*特效 转圈*/ $('.z_rotate ul:eq(0)').mouseenter(function(){ $(this).parent().siblings('.z_adv_img').find(".z_star1").addClass('z_star1_ing'); }); $(".z_rotate ul:eq(0)").mouseleave(function(){ $(this).parent().siblings('.z_adv_img').find(".z_star1").removeClass('z_star1_ing'); });

    CSS

    z_stars   旋转图片本身
    z_star1_ing   鼠标滑过时旋转的类名
     .z_stars {
      transition: All 0.6s ease-in-out;
      -webkit-transition: All 0.6s ease-in-out;
      -moz-transition: All 0.6s ease-in-out;
      -o-transition: All 0.6s ease-in-out;
     }
     .z_star1_ing {
      transform: rotate(360deg);
      -webkit-transform: rotate(360deg);
      -moz-transform: rotate(360deg);
      -o-transform: rotate(360deg);
      -ms-transform: rotate(360deg);
     }

    另:

        HTML布局时心得 :

                  比如 鼠标移入每一块产生特效,尽量把相关联的东西写到一起,包到一个div里面;这样方便选择器找,从而减少代码量。

    所以布局时要多想想,写HTML是就要想到CSS和js是怎么写的。

    $(".x_banner ul li").mouseenter(function(){
          $(this).find("img.x_xz").addClass('x_xzing');
        }); 
        $(".x_banner ul li").mouseleave(function(){
          $(this).find("img.x_xz").removeClass('x_xzing');
        }); 
  • 相关阅读:
    使用Mysql慢查询日志对有效率问题的SQL进行监控
    wampserver3.1.0安装及配置
    Composer
    HTML5 本地存储(Web Storage)
    HTML5 元素拖动
    生成验证码
    git 基础命令
    POI使用流程
    JDK各版本新特性总结
    dubbo+zookeeper项目搭建
  • 原文地址:https://www.cnblogs.com/wolflower/p/7053130.html
Copyright © 2020-2023  润新知