下拉菜单内容与箭头距离 安卓_下拉菜单箭头改变效果（一）【原创】

考虑交互效果下拉时出现指示方向的箭头：当前默认没有下拉菜单时，箭头向上，当悬浮时，下拉框出现，同时箭头保持向下。

用户

• 注册
• 登录

一开始，希望从箭头的url入手，也是应用下数组的处理函数slice();

代码实现如下：

$('.quick-menu-user').hover(function(){

var imgSrc = $('.quick-menu-user i').css('background-image');

imgSrc = imgSrc.slice(4,imgSrc.length-1);

imgbefore = imgSrc.slice(0,imgSrc.length-13);

//把获得的地址从第5个字符到倒数第13个字符间的字符取出来

newSrc = imgbefore +'quick.png';

$('.quick-menu-user i').css('background-image',"url("+newSrc+")");

$('.quick-user-box').show();

},function(){

var imgSrc = $('.quick-menu-user i').css('background-image');

imgSrc = imgSrc.slice(4,imgSrc.length-1);

imgbefore = imgSrc.slice(0,imgSrc.length-9);

//把获得的地址从第5个字符到倒数第9个字符间的字符取出来

newSrc = imgbefore +'quick-top.png';

$('.quick-menu-user i').css('background-image',"url("+newSrc+")");

$('.quick-user-box').hide();

});

之前，在谷歌中一直都是正确的。

转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/12789.html

微信打赏

支付宝打赏

感谢您对作者Sylvia的打赏，我们会更加努力！    如果您想成为作者，请点我