angular 鼠标移入事件（动态添加类名）

Posted 2020-06-21

不会弄动态图上来，只好截图了= =

大致就是这个样子，鼠标移入微博或者微信的框框里，就切换到相应的样式类名、图片、文字

原理：主要是做判断，判断true||false，然后根据它的布尔值来动态改变元素样式

html代码如下

 绿色标记字体  属于写好了脚本之后注入的依赖，现在可不看

1  <div id="switch" switch="">                                                                                      //将写好的依赖注入进去
2       <button class="switch" ng-class="isWeixin?‘off‘:‘on‘" id="micro-blog">社区微博</button>                      //ng-class=‘判断isWeixin的布尔值为true还是false?‘true添加类名为off‘:‘false添加类名为on‘‘;
3       <button class="switch" ng-class="isWeixin?‘on‘:‘off‘" id="we-chat">官方微信</button>                         //ng-class=‘判断isWeixin的布尔值为true还是false?‘true添加类名为on‘:‘false添加类名为off‘‘;
4<a ng-href="{{isWeixin? ‘‘ : ‘http://weibo.com/u/5640567447‘}}" target="_blank">                                  //ng-href=‘判断isWeixin的布尔值为true还是false?‘true地址为空‘:‘false地址为http://weibo.com/u/xxxx‘‘;
5<img ng-src="{{isWeixin? ‘http://image.cheerby.cn/appImage/web/QRcode.jpg‘ : ‘http://image.cheerby.cn/appImage/web/weibocode.png‘}}">   //ng-src=‘判断isWeixin的布尔值为true还是false?‘‘true图片地址为xxx‘:‘false图片地址为‘xxx‘;
6</a>
7<p id="switch-msg"ng-bind="isWeixin? ‘扫描关注八点到微信‘: ‘点击或扫描关注八点到微博‘"></p>     //ng-bind=‘判断isWeixin的布尔值为true还是false?‘ture绑定的文字为xxx微信‘:‘false绑定的文字为xxx微博‘‘
8</div>

 

css代码如下

on类，就是鼠标移入时要添加的类名

off类，就是鼠标移出是要添加的类名

 1       #switch {
 2  2           .switch {
 3  3             width: 148px;
 4  4             height: 43px;
 5  5             float: left;
 6  6             line-height: 43px;
 7  7             font-size: 20px;
 8  8             cursor: pointer;
 9  9             border-right: 1px solid @color-green-font;
10 10 
11 11             &.on {
12 12               color: @color-green-font;
13 13               border-top: 1px solid @color-green-font;
14 14               border-bottom: none;
15 15             }
16 16             &.off {
17 17               border-bottom: 1px solid @color-green-font;
18 18             }
19 19           }
20 20           img {
21 21             width: 163px;
22 22             height: 161px;
23 23             margin-top: 25px;
24 24           }
25 27         }

 

js代码如下

 1 appDirectives.directive(‘switch‘, function ($timeout) {                       //定义一个依赖，名字叫switch，传进去的参数相当于setTimeout，只不过angular又把它封装了一层，相当于它自己的方法；
 2   return function (scope, element, attrs) {                                   //回调函数，scope为域， element为元素， attrs为属性；
 3     scope.isWeixin = false;                                                   //初始化scope.isWeixin的布尔值为false；
 4     var buttons = element.find(‘button‘);                                     //找到button元素， element.find(‘button‘)中的element是#swiper；
 5     buttons.mouseenter(callback).mouseleave(callback);                        //button被鼠标移入时调用callback函数，移除时再次调用callback函数；
 6     function callback() {                                                     //声明一个函数，名为callback；
 7       var me = $(this);                                                       //声明一个变量，名为me，并且当前元素赋给它；
 8       $timeout(function () {                                                  //调用$timeout定时器方法，闭包内的意思是，当前元素的索引号若是等于1 于是scope.isWeixin=true；
 9         scope.isWeixin = me.index() == 1;
10       });
11     }
12   }
13 });

这时判断就做好了，然后把它们注入html，现在我们回到html页面看标绿字体