个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
24
4
我正在尝试制作一种新的菜单，在屏幕中间有 4 个方 block ，当您将鼠标悬停在这些方 block 上时，它们会放大，每个方向不同，因此它们不会重叠。我已经把动画部分和基本部分搞定了，唯一的问题是，我如何让它们朝不同的方向移动？我已经通过添加一个 if 语句来解决这个问题，该语句获取元素的 id 并使用它来找出正方形所在的位置。但是，这个声明失败了，我认为是在它检查 id 的部分。我可以借助一些帮助来解决这个问题，因为我基本上已经尝试了所有方法来让它工作。提前致谢!
这是带有工作动画的 JSFiddle:https://jsfiddle.net/2qkv1xua/这是相同的 JSFiddle，但添加了 if 语句:https://jsfiddle.net/2qkv1xua/1/
当然还有代码:
[HTML]
<body>
<div id="menu_holder">
<div class="menuItem" id="menu_item_1"></div>
<div class="menuItem" id="menu_item_2"></div>
<div class="menuItem" id="menu_item_3"></div>
<div class="menuItem" id="menu_item_4"></div>
</div>
</body>
[CSS]
* {
margin: 0 auto;
padding: 0;
}
#menu_holder {
position: absolute;
width: 410px;
height: 410px;
margin: 0;
padding: 105px;
top: calc(50% - 305px);
left: calc(50% - 305px);
}
.menuItem {
width: 200px;
height: 200px;
float: left;
}
#menu_item_1 {
margin: 0px 5px 5px 0px;
background-color: rgb(190, 184, 235);
}
#menu_item_2 {
margin: 0px 0px 5px 5px;
background-color: rgb(139, 157, 195);
}
#menu_item_3 {
margin: 5px 5px 0px 0px;
background-color: rgb(82, 153, 211);
}
#menu_item_4 {
margin: 5px 0px 0px 5px;
background-color: rgb(11, 85, 99);
}
[JS]
$(document).ready(function () {
$('.menuItem').hover(
if (this.attr('id') == "#menu_item_1") {
function () {
$(this).filter(':not(:animated)').animate({
width: "300px",
height: "300px",
marginTop: "-100px",
marginLeft: "-100px"
});
},
function () {
$(this).animate({
width: "200px",
height: "200px",
marginTop: "0",
marginLeft: "0"
});
}
});
});
最佳答案
在每个 menu_item 周围都有包装器并且所有东西都绝对定位，你可以这样做:
<div id="menu_holder">
<div class="menuWrapper" id="menu_wrapper_1"><div class="menuItem" id="menu_item_1"></div></div>
<div class="menuWrapper" id="menu_wrapper_2"><div class="menuItem" id="menu_item_2"></div></div>
<div class="menuWrapper" id="menu_wrapper_3"><div class="menuItem" id="menu_item_3"></div></div>
<div class="menuWrapper" id="menu_wrapper_4"><div class="menuItem" id="menu_item_4"></div></div>
</div>
* {
margin: 0 auto;
padding: 0;
}
#menu_holder {
position: absolute;
width: 180px;
height: 180px;
left: 10px;
top: 10px;
border: 1px dashed #999;
}
.menuWrapper {
position: absolute;
width: 87px;
height: 87px;
}
#menu_wrapper_1 {
left: 0;
top: 0;
}
#menu_wrapper_2 {
right: 0;
top: 0;
}
#menu_wrapper_3 {
left: 0;
bottom: 0;
}
#menu_wrapper_4 {
right: 0;
bottom: 0;
}
.menuItem {
position: absolute;
width: 50px;
height: 50px;
}
#menu_item_1 {
background-color: rgb(190, 184, 235);
right: 0;
bottom: 0;
}
#menu_item_2 {
background-color: rgb(139, 157, 195);
left: 0;
bottom: 0;
}
#menu_item_3 {
background-color: rgb(82, 153, 211);
right: 0;
top: 0;
}
#menu_item_4 {
background-color: rgb(11, 85, 99);
left: 0;
top: 0;
}
$(document).ready(function () {
$('.menuItem').hover(function () {
$(this).stop().animate({
width: "80px",
height: "80px"
});
}, function () {
$(this).stop().animate({
width: "50px",
height: "50px"
});
});
});
我减小了尺寸以使 fiddle 框架中的演示效果更好
关于javascript - JQuery id 测试失败，带有单独 div 的动画系统，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31357451/
24
4
0
我有这个代码: System.err.print("number of terms = "); System.out.println(allTerms.size()); System.err
我有以下问题:在操作系统是 Linux 的情况下和在操作系统是 MacOs 的情况下，我必须执行不同的操作。 所以我创建了以下 Ant 脚本目标: /u
我正在调用 system("bash ../tools/bashScript\"This is an argument!\"&")，然后我正在调用 close(socketFD) 直接在 system
使用最初生成的随机元素来约束随机数组的连续元素是否有效。 例如:我想生成一组 10 个 addr、size 对来模拟典型的内存分配例程并具有如下类: class abc; rand bit[5:0
我正在创建一个必须使用system(const char*)函数来完成一些“繁重工作”的应用程序，并且我需要能够为用户提供粗略的进度百分比。例如，如果操作系统正在为您移动文件，它会为您提供一个进度条，
我即将编写一些项目经理、开发人员和业务分析师会使用的标准/指南和模板。目标是更好地理解正在开发或已经开发的解决方案。 其中一部分是提供有关记录解决方案的标准/指南。例如。记录解决/满足业务案例/用户需
在开发使用压缩磁盘索引或磁盘文件的应用程序时，其中部分索引或文件被重复访问(为了论证，让我们说一些类似于 Zipfian 分布的东西)，我想知道什么时候足够/更好地依赖操作系统级缓存(例如，Debia
我们编写了一个 powershell 脚本，用于处理来自内部系统的图像并将其发送到另一个系统。现在，业务的另一部分希望加入其中，对数据进行自己的处理，并将其推送到另一个系统。打听了一下，公司周围有几个
我正在尝试朗姆酒我的应用程序，但我收到以下错误:System.Web.HttpUnhandledException:引发了“System.Web.HttpUnhandledException”类型的异
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是偏离主题的，
所以我在其他程序中没有收到此错误，但我在这个程序中收到了它。 这个程序是一个我没有收到错误的示例。 #include int main() { system("pause"); } // en
我在 c# System.URI.FormatExption 中遇到问题 为了清楚起见，我使用的是 Segseuil 的 Matlab 方法，并且它返回一个图片路径 result。我想为其他用户保存此
我正在尝试像这样设置文本框的背景色: txtCompanyName.BackColor = Drawing.Color.WhiteSmoke; 它不喜欢它，因为它要我在前面添加系统，例如: txtCo
请帮助我解决 System.StackOverflowException我想用 .aspx 将记录写入数据库我使用 4 层架构来实现这一切都正常但是当我编译页面然后它显示要插入数据的字段时，当我将数据
我使用了一些通常由系统调用的API。 因此，我将 android:sharedUserId="android.uid.system" 添加到 manifest.xml， 并使用来自 GIT 的 And
我正在尝试创建一个小型应用程序，它需要对/system 文件夹进行读/写访问(它正在尝试删除一个文件，并创建一个新文件来代替它)。我可以使用 adb 毫无问题地重新挂载该文件夹，如果我这样做，我的应用
我想从没有 su 的系统 priv-app 将/system 重新挂载为 RW。如何以编程方式执行此操作？只会用 Runtime.getruntime().exec() 执行一个 shell 命令吗
我正在尝试制作一个带有登录系统的程序我对此很陌生，但我已经连续工作 8 个小时试图解决这个问题。这是我得到的错误代码 + ServerVersion 'con.ServerVersion' threw
当我“构建并运行”Code::Blocks 中的程序时，它运行得非常好!但是当我从“/bin”文件夹手动运行它时，当它试图用 system() 调用“temp.bat”时，它会重置。这是为什么？它没有
我想使用 system/pipe 命令来执行具有特殊字符的命令。下面是示例代码。通过系统/管道执行命令后，它通过改变特殊字符来改变命令。我很惊讶地看到系统命令正在更改作为命令传递的文本。 run(ch
我是一名优秀的程序员,十分优秀！