- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
因此,我在编写网站的这一小部分时遇到了一些困难,但它有一点问题。我只知道 jquery 是危险的,但我希望有人可以帮助我做得更好、更高效。
以下是我认为可以改进的方法,但我不知道如何实现这些:
以下是页面链接:http://204.12.117.109/~sandbox/map/
这是我正在使用的 jquery 代码:
$(function() {
$('.city').mouseenter(function(){
var relid = $(this).attr('rel');
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
});
$('.city').mouseleave(function(){
var relid = $(this).attr('rel');
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
});
});
这是我正在使用的 CSS:
#communities { background: url(images/bgCommunities.gif) scroll bottom right no-repeat; position: relative; }
#communities .lists { width: 340px !important; }
#cities li { width: 160px !important; margin: 0px 2px !important; padding: 4px 0 4px 4px; }
#cities li:hover { background-color: rgb(240,240,240); }
#boyle, #long, #santa, #rich, #fres, #sac, #city, #sLA, #coach, #kern, #oak, #merc, #sal, #del { position: absolute; width: 8px; height: 12px; background: url(images/pin.png) 0 0 no-repeat; }
#boyle { top: 230px; right: 95px; }
#long { top: 241px; right: 92px; }
#santa { top: 236px; right: 84px; }
#rich { top: 139px; right: 165px; }
#fres { top: 173px; right: 121px; }
#sac { top: 133px; right: 147px; }
#city { top: 258px; right: 78px; }
#sLA { top: 235px; right: 90px; }
#coach { top: 239px; right: 62px; }
#kern { top: 206px; right: 105px; }
#oak { top: 148px; right: 162px; }
#merc { top: 161px; right: 136px; }
#sal { top: 171px; right: 155px; }
#del { top: 71px; right: 185px; }
这是我正在使用的 HTML:
<div id="communities">
<div class="lists">
<ul id="cities">
<li class="city" rel="boyle"><a href="#">Boyle Heights</a></li>
<li class="city" rel="long"><a href="#">Long Beach</a></li>
<li class="city" rel="santa"><a href="#">Central Santa Ana</a></li>
<li class="city" rel="rich"><a href="#">Richmond</a></li>
<li class="city" rel="fres"><a href="#">Central/SE/SW Fresno</a></li>
<li class="city" rel="sac"><a href="#">Sacramento</a></li>
<li class="city" rel="city"><a href="#">City Heights</a></li>
<li class="city" rel="sLA"><a href="#">South Los Angeles</a></li>
<li class="city" rel="coach"><a href="#" >Coachella Valley</a></li>
<li class="city" rel="kern"><a href="#">South Kern</a></li>
<li class="city" rel="oak"><a href="#">East Oakland</a></li>
<li class="city" rel="merc"><a href="#">SW Merced/East Merced</a></li>
<li class="city" rel="sal"><a href="#">East Salinas (Alisal)</a></li>
<li class="city" rel="del"><a href="#">Del Norte County</a></li>
</ul>
</div>
<div class="pin" id="boyle"></div>
<div class="pin" id="long"></div>
<div class="pin" id="santa"></div>
<div class="pin" id="rich"></div>
<div class="pin" id="fres"></div>
<div class="pin" id="sac"></div>
<div class="pin" id="city"></div>
<div class="pin" id="sLA"></div>
<div class="pin" id="coach"></div>
<div class="pin" id="kern"></div>
<div class="pin" id="oak"></div>
<div class="pin" id="merc"></div>
<div class="pin" id="sal"></div>
<div class="pin" id="del"></div>
最佳答案
明白了(东部时间 02:31)! (现在正在研究随机版本......我喜欢挑战!):
编辑(参见http://zequinha-bsb.int-domains.com/map/cities.html)
知道了 2 @ 3:29am est(我是按小时付费......还是根本不付费?)随机版本位于底部及其各自的链接。
<script type="text/javascript">
var firstEntry = true;
var lastOn = '';
function showAllPins() {
if ($('#communities').hasClass('theMouseIsOff')) {
$("#communities div[id!=''].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
firstEntry = true;
$('#communities').removeClass('theMouseIsOff');
}
}
function showPin(relid){
lastOn = relid;
if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
if (firstEntry == true) {
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
firstEntry = false;
} else {
$("#communities div[id=" + relid + "].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
}
}
function removeLastPin() {
$('#communities').addClass('theMouseIsOff');
$("#communities div[id=" + lastOn + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
setTimeout('showAllPins()',5000);
}
$(document).ready( function () {
$('.city').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
</script>
随机版本:
<script type="text/javascript">
var firstEntry = true;
var lastOn = '';
function showAllPins() {
if ($('#communities').hasClass('theMouseIsOff')) {
var citiesArr = [];
$('.pin').each( function () {
citiesArr.push(this.id);
$('#'+this.id).hide();
});
var stillHidden = citiesArr.length;
while (stillHidden > 0) {
var a = Math.floor(Math.random()*citiesArr.length);
if ($('#'+citiesArr[a]).is(':hidden')) {
$('#'+citiesArr[a]).show().delay(Math.floor(Math.random()*900)).animate({
opacity: 1,
top: '+=40',
}, Math.floor(Math.random()*900), 'easeOutBounce');
stillHidden--;
}
}
firstEntry = true;
$('#communities').removeClass('theMouseIsOff');
}
}
function showPin(relid){
lastOn = relid;
if ($('#communities').hasClass('theMouseIsOff')) $('#communities').removeClass('theMouseIsOff');
if (firstEntry == true) {
$("#communities div[id!=" + relid + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
firstEntry = false;
} else {
$("#communities div[id=" + relid + "].pin").animate({
opacity: 1,
top: '+=40',
}, 500, 'easeOutBounce');
}
}
function removeLastPin() {
$('#communities').addClass('theMouseIsOff');
$("#communities div[id=" + lastOn + "].pin").animate({
opacity: 0,
top: '-=40',
}, 500);
setTimeout('showAllPins()',2000);
}
$(document).ready( function () {
$('.city').mouseenter( function () {
relid = $(this).attr('rel');
showPin(relid);
}).mouseleave( function () { removeLastPin() });
});
</script>
编辑(在removeLastPin中删除了relid作为参数)
您可以在这里查看:http://zequinha-bsb.int-domains.com/map/randomCities.html
关于Mouseenter 上的 jQuery 动画问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8146314/
我试图在鼠标输入鼠标离开事件时替换图像属性源。单击时,图像应保持事件状态。我需要 mouseleave 事件在单击后停止。到目前为止,点击后鼠标离开仍然继续,切换回图像,代码如下: jQue
我经常看到这样的代码: $("#thing").on("mouseenter",function(){ Do stuff }); 就个人而言,我几乎总是这样写: $("#thing").mouseen
我用 mouseenter 和 mouseleave 制作了一些积木 hover MouseEnter(e) { setTimeout(() => { //check if m
使用菜单目标: https://github.com/hfknight/jQuery-menu-aim/blob/master/jquery.menu-aim.js 在响应方面遇到问题。它使用 mou
我有一个盒子,悬停时会播放加载动画,然后在 2 秒后展开: http://jsfiddle.net/frank_o/WwD5V/23/embedded/result/ 但是如果我按照下面的 V 形 A
我是 Jquery 和 JS 的新手,所以希望有人能够提供帮助!我已经构建了我的第一个图像 slider ,除了手持设备之外,它都运行良好。基本上,当宽度降至某个点以下时,幻灯片会重叠,但是当我将鼠标
我正在编写一个函数,当鼠标进入 DOM 的特定部分以显示菜单时,删除包含内容 display:hidden; 的类。现在,当页面加载并且我最初将鼠标悬停在该区域上时,该事件不会触发。但是,如果我将鼠标
我有一组 3 个菜单项,我正在尝试向其中添加 mouseenter 事件。我似乎根本无法让它发挥作用。我还尝试循环遍历 .menu-item 类,但没有任何反应。 这让我发疯。有谁知道为什么这不起作用
我正在创建一个自定义光标“预告片”(请参阅 fiddle :https://jsfiddle.net/alexdlf/hx6yzu4w/) 通常,圆圈 (.cursor) 应跟随光标。将鼠标悬停在
我有两个对话气泡每两秒更改一次内容。我试图每次将鼠标放在气泡上时,我的changeComment函数都会停止,这样用户将有更多时间阅读评论,当鼠标离开气泡时,函数将再次启动。 我在这里有我的演示:ht
我编写了一段代码,当鼠标悬停在特定元素上时,我需要触发功能。 对于以下所有静态代码,其工作正常 $("table td").on("mouseenter",function(){ consol
我有一个由 5 个 JLabel 对象组成的数组,并且我已向所有对象添加了鼠标监听器,在 mouseEntered() 函数中,我将标签设为不透明(true)更改其背景颜色,但此代码无法正常工作,请帮
我正在尝试进行 mouseEntered 测试来更改方形颜色,但是 MouseListener mouseEntered 不会执行。鼠标有响应,但仅对单击、按下和释放有响应。所以我不确定发生了什么事。
我在尝试制作一个更改其图标的突出显示“标签”时遇到问题,好吧,所以当为一个 jLabel 调用 MouseEntered 事件时,附近的每个标签的事件也会被调用,并且它们的图标也会被更改。我尝试通过使
我必须调用一个由特定元素上的 mouseenter 事件触发的函数。 如何仅当鼠标在特定元素上“停留”超过 5 秒时才触发 mouseenter 事件? 最佳答案 你可以使用定时器(setTimeou
我有两个可排序列表,一个是嵌套的,鼠标输入对嵌套可排序列表的 li 元素有效果。我的问题是,当用户在作为输入字段的子元素上的列表中快速移动鼠标时,mouseenter 和 mouseleave 函数的
我有一些小div,单击它们时,会显示一个更大的div,覆盖所有内容 - 有点像灯箱。为了隐藏大 div,我单击它(没有“关闭此”链接)。 这是点击代码: // First click - draw i
我有一个网站,当您将鼠标悬停在图像上时,图像上会显示一段文本。 达到了预期的效果,除了以下事实:如果您的光标位于图像上的新文本元素上,则所有内容都会开始闪烁。 任何帮助将不胜感激。 这是 fiddle
当元素上触发 mouseenter 事件时,我使用此指令执行某些操作。但是,当我快速拖动鼠标时,在元素上某些元素会被跳过,而不会触发 mouseenter 事件。 我实际上想在鼠标移动时突出显示网格的
基本上,我有一个包含大约 12 个列表项的无序列表。我想在鼠标悬停在其中任何一个上时对它们应用一种样式,而在鼠标不在任何一个上时应用不同的样式。 例如,以下是我当前的代码,它只有在悬停 li 时才具有
我是一名优秀的程序员,十分优秀!