1.鼠标移入事件
不会弄动态图上来,只好截图了= =
大致就是这个样子,鼠标移入微博或者微信的框框里,就切换到相应的样式类名、图片、文字
原理:主要是做判断,判断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地址为\'\';
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>