<style>
hide{display:none;}
</style>
<script>
$("one span")click(function(){
$(this)parent()siblings("two")toggle();
});
</script>
<div class="one">
<span>显示</span>
</div>
<div class="two hide">显示的内容 </div>
添加stop()方法即可解决
看我中午写的例子：
<!DOCTYPE HTML>
<html>
<head>
<title>已测试，都可以显示</title>
<meta charset=UTF-8 />
<style type="text/css">
menu {
position: relative;
width: 100%;
height: 50px;
background: #efefef;
z-index: 999;
}
menu nav {
position: relative;
width: 100%;
height: 50px;
/ left:50%;
margin-left:-500px; /
}
menu nav li {
float: left;
font-size: 18px;
width: 140px;
}
menu nav li a {
float: left;
display: block;
height: 50px;
padding: 0 30px;
line-height: 50px;
color: #333;
text-decoration: none;
position: relative;
overflow: hidden;
transition: 05s ease;
-webkit-transition: 05s ease;
}
menu nav li a:hover,menu nav li acurrent {
background: #8ecb8d;
color: #fff;
}
menu nav li box {
width: 100%;
height: 35px;
position: absolute;
top: 50px;
/ left: 203px;
left: 198px;
left: 198px\0; /
background-color: rgba(0, 0, 0, 04) !important;
background-color:rgb(0,0,0);
filter: Alpha(opacity = 40);
display: none;
font-size: 16px;
z-index: 999;
}
menu nav li box a {
display: block;
height: 35px;
color: #fff;
line-height: 35px;
border: none;
background: none;
padding: 0;
width: 114px;
text-align: center;
}
menu nav li box a:hover {
text-decoration: underline;
color: #8ecb8d;
}
ul {
list-style: none;
}
</style>
<script type="text/javascript" src="jquery-180minjs"></script>
<script type="text/javascript">
jQuery (function ($)
{
$ ("menu nav li")hover (function ()
{
$(this)find ("a")addClass ("current")end()find ("box")stop()slideDown (140);
},function ()
{
$(this)find ("a")removeClass ("current")end()find ("box")stop()slideUp (140);
});
})
</script>
</head>
<body>
<div class="menu">
<ul class="nav">
<li><a href="#">网站首页</a></li>
<li><a href="#">概况介绍</a>
<div class="box">
<a href="#">院系简介</a> <a href="#">机构设置</a> <a href="#">现任领导</a>
</div></li>
<li><a href="#">党建工作</a>
<div class="box">
<a href="#">支部设置</a> <a href="#">党员教育</a> <a href="#">书记信箱</a> <a href="#">荣誉奖励</a>
</div></li>
<li><a href="#">教学工作</a>
<div class="box">
<a href="#">专业设置</a> <a href="#">师资队伍</a> <a href="#">实习基地</a> <a href="#">教学成果</a>
</div></li>
<li><a href="#">教学资源</a>
<div class="box">
<a href="#">教材专著</a> <a href="#">重点课程</a> <a href="#">主干课程</a>
</div></li>
<li><a href="#">科研工作</a>
<div class="box">
<a href="#">科研课题</a> <a href="#">科研论文</a> <a href="#">科研条件</a>
</div>
<li><a href="#">招生就业</a>
<div class="box">
<a href="#">招生情况</a> <a href="#">就业概况</a> <a href="#">就业信息</a>
</div>
<li><a href="#">联系交流</a>
<div class="box">
<a href="#">合作交流</a> <a href="#">系友通讯</a> <a href="#">对外服务</a>
</div></li>
</ul>
</div>
</body>
</html>
<div class="parent">
<li>a区域</li>
<div class="bb">bbbbb区域</div>
</div><style>
bb{display:none;}
</style><script>
//引入jqueryjs后
$(function(){
$("parent")hover(
function(){
$("bb")show();
},
functin(){
$("bb")hide();
}
);
})
</script>
1、首先打开hbuilder编辑器，新建一个HTML文档，里面输入长篇的文字。
2、然后在上方引入jQuery的脚本，编辑js脚本，使用bind方法绑定浏览器的scroll事件，监听网页滚动，之后用scrollTop()获取垂直滚动距离，最后d出输出的值即可。
3、保存一下打开浏览器，可以看到一个长篇的文档。
4、按F12打开浏览器开发者工具，切换到Console标签下，滚动鼠标，就可以在开发者工具里显示出浏览器高度位置的数据了。
<style>
{
margin: 0%;
padding: 0%;
}
box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="/jquery-1124js"></script>
<script>
/ jQuery的链式调用 /
/ $('div')$('div')text('我是学生')css('color','red')attr({name:'zhangsan',age:30}) /
/ 链式调用的原理jq里面的方法都会return this 把当前调用者return出去实现链式调用 /
/ $('ul li')first()css('background','yellow')end()eq(1)css('background','red') /
/ 获取的只是content里面的距离,不包括padding margin border里面的距离 /
/ 返回以像素为单位的top和left的坐标,仅对可见元素有效 /
/ top和left值都会包括自己的margin和父元素border的值 /
consolelog($('div2')offset()top);
consolelog($('ul')width());
consolelog($('ul')height());
/ offsetParent 返回最近的自己定位的祖先元素 /
consolelog($('div2')offsetParent());
/ position() 返回第一个匹配元素相对于父元素的位置 /
consolelog($('div')position());
/ scrollLeft([position]) 参数可选,设置返回匹配元素相对滚动条左侧的偏移/
/ 设置滚动条的距离 /
$(window)scrollLeft(100)
/ 获取滚动条的距离 /
$(window)scroll(function(){
consolelog($(document)scrollLeft());
})
</script>
<style>
div1{
width: 300px;
height: 300px;
border: 1px solid red;
}
div2{
width: 200px;
height: 200px;
background-color: red;;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">
</div>
</div>
<script src="/jquery-1124js"></script>
<script>
/ mouseenter mouseleave 在进入子元素区域时不会触发
mouseover 和mouseout 会触发 /
/ $('div1')mouseenter(function(){
$(this)css('background','green')
})
$('div1')mouseleave(function(){
$(this)css('background','yellow')
}) /
/ 由mouseenter 和mouseleave组成 /
$('div1')hover(function(){
$(this)css('background','yellow')
consolelog(1);
})
</script>
<style>
{
margin: 0%;
padding: 0%;
}
box{
width: 340px;
border: 1px solid blue;
margin: 10px auto;
}
box h1{
height: 40px;
color: #fff;
padding-left: 15px;
background-color: blue;
font-size: 25px;
}
ul li{
padding-left: 15px;
list-style-type: none;
line-height: 45px;
border-bottom: 1px dashed #ccc;
}
ul li:last-child{
border-bottom: none;
}
</style>
</head>
<body>
<div class="box">
<h1>
祝福冬奥
</h1>
<ul>
<li>贝克汉姆</li>
<li >姚明</li>
<li>张宏</li>
<li>肖恩怀特</li>
</ul>
</div>
<script src="/jquery-1124js"></script>
<script>
/ $('li:eq(0)')mouseenter(function(){
$(this)css('background','red')
})
$('li:eq(0)')mouseout(function(){
$(this)css('background','')
}) /
$('li')hover(function(){
/ css('background','')不会改变元素原来bgc样式 /
$('li')first()css('background','red')siblings()css('background','')
})
$('li:eq(1)')mouseenter(function(){
$(this)css('background','yellow')
})
$('li:eq(1)')mouseout(function(){
$(this)css('background','')
})
</script>
<style>
box{
margin: 30px auto;
width: 500px;
height: 300px;
border: 1px solid cyan;
position: relative;
}
img-list img{
width: 500px;
height: 300px;
display: block;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box">
<div class="img-list">
<img src="/imgs/1jpg" alt="">
<img src="/imgs/2jpg" alt="">
<img src="/imgs/3jpg" alt="">
<img src="/img/4jpg" alt="">
</div>
</div>
<button style="margin-left: 450px;" class="left">后退</button>
<button class="right">前进</button>
<script src="/jquery-1124js"></script>
<script>
/ 定时器 过2s 显示一张图 显示最后一张图的时候再跳回第一张 /
/ let i = 0
$('img')eq(0)show()siblings()hide();
setInterval(function(){
i++;
if(i==$('img')length){
i=0
} /
/ 淡入淡出 /
/ $('img')eq(i)fadeIn('slow')siblings()fadeOut('slow')
},2000) /
let i = 0;
let timer = null
$('img')eq(i)show()siblings()hide();
/ 自动播放 /
show();
$('left')click(function(){
/ 先清空定时器 阻止自动播放 /
clearInterval(timer);
i--;
/ 防止减到-1找不到对应的 /
if(i == -1){
i=$('img')length - 1
}
/ 展示当前对应的其他淡出 /
$('img')eq(i)show()siblings()hide();
/ 继续开始自动播放 /
show();
})
$('right')click(function(){
/ 先清空定时器 阻止自动播放 /
clearInterval(timer);
i++;
/ 防止减到-1 找不到对应的 /
if(i==$('img')length){
i=0
}
/ 展示当前对应的其他淡出 /
$('img')eq(i)show()siblings()hide();
/ 继续开始自动播放 /
show()
/ 定时器 过两秒 显示一张图 显示最后一张图的时候
再跳到第一张 /
})
function show(){
timer = setInterval(function (){
i++;
if(i == $('img')length){
i = 0
}
/ fadeIn 淡入 fadeOut淡出 /
$('img')eq(i)fadeIn()siblings()fadeOut();
},2000)
}
</script>
<body>
用户名:<input type="text"><br>
密码: <input type="password">
<script src="/jquery-1124js"></script>
<script>
/ 按下键盘 /
/ $('input[type=text]')keydown(function(){
alert('我按下了')
}) /
/ 抬起键盘 /
/ $('input[type=password]')keyup(function(){
alert('我抬起了')
}) /
/ keypress 连续敲击键盘 /
/ $('input[type=text]')keypress(function(){
alert('连续打字')
}) /
$(window)keyup(function(e){
if(ekeyCode==13){
alert('已提交')
}
})
</script>
</body>
获取当前位置代码如下：
<html>
<head>
<meta >
先感谢以下楼上那个大神提供的CSS效果，我第一次用，感觉很不错
但是，看了一下，那个渐变效果毕竟是CSS3的属性，对于较老的浏览器就会失灵，还是用js实现可能更保险些。
CSS文件：
#block{ width:200px; height:300px; overflow:hidden;}tab{
color:#FFF;
line-height:60px;
width:100px; height:60px;
background:#000;
margin:10px;
padding-left:5px;
float:right;
position:relative;
left:25px;
-moz-border-radius: 15px; / Gecko browsers /
-webkit-border-radius: 15px; / Webkit browsers /
border-radius:15px; / W3C syntax /
transition:all 02s ease-in-out 0;
}
tab:hover{ width:170px; background:#06F;}
Html文件：
<!doctype html><html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<link rel="stylesheet" type="text/css" href="tabcss">
<body>
<div id="block">
<div class="tab" id="tab1">tab1</div>
<div class="tab" id="tab2">tab2</div>
<div class="tab" id="tab3">tab3</div>
</div>
</body>
</html>
刚才提到了用js实现效果，这里补充一下
首先把CSS样式中的transition属性和tab的hover俩个都注掉或删掉
如果单纯的只是实现d出和变色，非常简单
$("tab")hover(function(e){
$(this)width(170);
$(this)css("background","#06F");
},
function(e){
$(this)width(100);
$(this)css("background","#000");
}
);
但是如果要渐变效果就要稍微复杂一点了
参考以下代码，选中input标签时记录原值，输入字符或其它事件需要时返回原值。
var jiu="";//存储原值为以后改回原值用。
$("cart-input-o")on({
focus: function () {
jiu=$(this)val();
//选中input标签原值赋值给变更jiu
},
keyup: function () {$(this)val(jiu); //恢复原值},
mouseleave:function () {$(this)val(jiu); //恢复原值}
});
以上就是关于用jQuery做一个当鼠标滑入文本框d出隐藏的div，滑出时隐藏div全部的内容，包括:用jQuery做一个当鼠标滑入文本框d出隐藏的div，滑出时隐藏div、jQuery 鼠标滑过执行一个函数，当鼠标在某元素上多次快速的滑过，鼠标离开，函数仍在执行……、jQuery如何实现鼠标移入移出显示与隐藏二级菜单啊等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）