本文探讨了如何使用jQuery实现网页元素的交互效果，包括鼠标悬停时显示额外信息和展开隐藏内容的功能，以及通过JavaScript操作DOM实现动态布局变化。
<!--<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-DOM</title>
<style type="text/css">
/*ul li{width:70px;height:70px;float: left;margin:10px;list-style:none;}
ul li img{width:70px;height:70px;}*/
</style>
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=10;
$("ul li.intro").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle?"<br>"+this.myTitle:"";
var imgInfor="<div id='img-infor'><img src='"+this.href+"' alt='产品介绍'/>"+imgTitle+"</div>";
$("body").append(imgInfor);
$("#imgInfor").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function() {
this.title=this.myTitle;
$("#imgInfor").remove();
}).mousemove(function(e) {
$("imgInfor").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
$(function(){
$("h3").bind("mouseover",function(){
$(this).next().show("slow");//$(this).next().toggle();
$(this).next().css("color","red");
$(this).next().fadeIn(6000);
$(this).next().slideDown();$(this).next().slideToggle();
}).bind("mouseout",function(){
$(this).next().hide(3000);
$(this).next().fadeOut();
$(this).next().slideUp();
})
})
</script>
</head>
<body>
<ul>
<li class="intro"><img src="images/pic1.jpg" title="图片解说一"></li>
<li class="intro"><img src="images/pic2.jpg" title="图片解说二"></li>
<li class="intro"><img src="images/pic3.jpg" title="图片解说三"></li>
</ul>
<h3>网球介绍</h3>
<p>
网球是一项隔着球网、用球拍击打橡胶制空心球的运动。现代网球起源于法国。网球又分为单打和双打。网球现在是一项奥运会比赛项目，适合社会各阶层与年龄段人群。网球的比赛规则自1920年代起就几乎没有更改。网球比赛的观众数目也十分多，网球四大满贯赛事特别受到关注。网球是一项隔着球网、用球拍击打橡胶制空心球的运动。现代网球起源于法国。网球又分为单打和双打。网球现在是一项奥运会比赛项目，适合社会各阶层与年龄段人群。网球的比赛规则自1920年代起就几乎没有更改。网球比
</p>
</body>
</html>
-->
<!--<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
jQuery中的事件冒泡和默认行为
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
alert("但前位置坐标:"+event.pageX+","+event.pageY);
var user=$("#userName").val();
if(user==""){
$(".msg").html("<p>请输入正确值</p>");
event.preventDefault();//return false;
};
});
$("#del").click(function(){
$("#sub").unbind();
});
})
</script>
</head>
<body>
<form action="">
用户名:<input type="text" id="userName">
密码：<input type="password" id="pw">
<input type="submit" id="sub" value="提交">
<input type="button" id="del" value="解除事件">
</form>
<span class="msg"></span>
</body>
</html>
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{width:100px;height:100px;background-color: green;position:absolute;filter(alpha(opacity: 10));opacity:0.1;}
</style>
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#box").mouseover(function(){
$(this).animate({left:"400px",width:"300px",height:"300px",opacity:"1"},20).css("border","1px solid red").delay(8000).fadeOut();
});
})
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery-DOM</title>
<style type="text/css">
/*ul li{width:70px;height:70px;float: left;margin:10px;list-style:none;}
ul li img{width:70px;height:70px;}*/
</style>
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
var x=10;
var y=10;
$("ul li.intro").mouseover(function(e){
this.myTitle=this.title;
this.title="";
var imgTitle=this.myTitle?"<br>"+this.myTitle:"";
var imgInfor="<div id='img-infor'><img src='"+this.href+"' alt='产品介绍'/>"+imgTitle+"</div>";
$("body").append(imgInfor);
$("#imgInfor").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
}).show("fast");
}).mouseout(function() {
this.title=this.myTitle;
$("#imgInfor").remove();
}).mousemove(function(e) {
$("imgInfor").css({
"top":(e.pageY+y)+"px",
"left":(e.pageX+x)+"px"
});
});
})
$(function(){
$("h3").bind("mouseover",function(){
$(this).next().show("slow");//$(this).next().toggle();
$(this).next().css("color","red");
$(this).next().fadeIn(6000);
$(this).next().slideDown();$(this).next().slideToggle();
}).bind("mouseout",function(){
$(this).next().hide(3000);
$(this).next().fadeOut();
$(this).next().slideUp();
})
})
</script>
</head>
<body>
<ul>
<li class="intro"><img src="images/pic1.jpg" title="图片解说一"></li>
<li class="intro"><img src="images/pic2.jpg" title="图片解说二"></li>
<li class="intro"><img src="images/pic3.jpg" title="图片解说三"></li>
</ul>
<h3>网球介绍</h3>
<p>
网球是一项隔着球网、用球拍击打橡胶制空心球的运动。现代网球起源于法国。网球又分为单打和双打。网球现在是一项奥运会比赛项目，适合社会各阶层与年龄段人群。网球的比赛规则自1920年代起就几乎没有更改。网球比赛的观众数目也十分多，网球四大满贯赛事特别受到关注。网球是一项隔着球网、用球拍击打橡胶制空心球的运动。现代网球起源于法国。网球又分为单打和双打。网球现在是一项奥运会比赛项目，适合社会各阶层与年龄段人群。网球的比赛规则自1920年代起就几乎没有更改。网球比
</p>
</body>
</html>
-->
<!--<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
jQuery中的事件冒泡和默认行为
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#sub").bind("click",function(event){
alert("但前位置坐标:"+event.pageX+","+event.pageY);
var user=$("#userName").val();
if(user==""){
$(".msg").html("<p>请输入正确值</p>");
event.preventDefault();//return false;
};
});
$("#del").click(function(){
$("#sub").unbind();
});
})
</script>
</head>
<body>
<form action="">
用户名:<input type="text" id="userName">
密码：<input type="password" id="pw">
<input type="submit" id="sub" value="提交">
<input type="button" id="del" value="解除事件">
</form>
<span class="msg"></span>
</body>
</html>
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#box{width:100px;height:100px;background-color: green;position:absolute;filter(alpha(opacity: 10));opacity:0.1;}
</style>
<script type="text/javascript" src="jQuery/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(function(){
$("#box").mouseover(function(){
$(this).animate({left:"400px",width:"300px",height:"300px",opacity:"1"},20).css("border","1px solid red").delay(8000).fadeOut();
});
})
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
