时间:2021-05-26
纠结了两天,憋出了个蛋,欢迎拍砖!!!
复制代码 代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ment/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
jQuery(function(){
window.a=0; window.b=1 ; //同为1隐藏弹层
$('ul').delegate('.grid','mouseover',function(){ // 鼠标放在头像上
if($('.f')){
$('ul').append('<div class="f"></div>')
$('.f').css({top:$(this).offset().top})
}
window.a=0;
$('.f').show();
})
$('ul').delegate('.f','mouseover',function(){// 鼠标在弹层上
window.b=0;
});
$('ul').delegate('.grid','mouseout',function(){// 鼠标离开头像
window.a=1;
})
$('ul').delegate('.f','mouseout',function(){// 离开弹层
window.b=1;
});
setInterval(function(){//console.log(window.a +" "+ window.b +" "+ window.c);
if(window.a&&window.b){
$('.f').hide();
}
},100)
})
</script>
</head>
<body>
<ul>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
<li><div class="grid"></div></li>
</ul>
</body>
</html>
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
思路: 两个div,一上一下。上面的包含iframe,用以展示弹窗内容。下面的div实现半透明的遮罩效果。代码:复制代码代码如下:
效果:思路:利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV。代码:复制代码代码如下:div{width:2
两个对象:div1和div2,其中div1是div2的父元素,div2只能在div1的范围内拖拽图中,红点是鼠标的位置,两个绿色箭头相减的结果就是disX,最后
最近写项目需要实现一个功能:鼠标移动到一个图片左边显示左箭头,移动到右边显示右箭头。实现方法:一个img上面定位两个div,div的样式如下:复制代码代码如下:
我使用了下面的JS来控制两个DIV的等高,放在网页的最下面。复制代码代码如下:varmainCon=document.getElementById("sideb