jquery鼠标键盘悬停事件，形变动画和淡入淡出
鼠标和键盘悬停
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>鼠标悬停</title>
<script type="text/javascript" src='./js/jquery.min.js'></script>
<script type='text/javascript'>
$(function(){
//监听鼠标悬停事件
$("#b").mouseover(function(){
//用类选择器修改元素的样式
$(".c").css("background-color","pink")
$(".c").css("color","green")
$(".c").css("font-size","30px")
})
});
// 用类选择器修改鼠标离开事件
$(function(){
//监听鼠标悬停事件
$("#b").mouseout(function(){
//用类选择器修改元素的样式
$(".c").css("background-color","white")
$(".c").css("color","red")
$(".c").css("font-size","16px")
})
});
// 用类选择器修改鼠标离开事件
$(function(){
$("#z").mouseover(function(){
$("#z").css("background-color","pink")
});
});
</script>
</head>
<body>
<div class="c">风萧萧兮易水寒，壮士一去兮不复返</div><br/><br/>
<input type="button" ><br/><br/>
<img /><br/><br/>
</body>
</html>形变动画
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>animate 动画</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript">
//jquery单一入口
$(function(){
$("#b2").click(function(){
//通过标签选择器来进行动画操作
$("div").animate({
left:'400px',
width:'400px',
// margin:'200px'
height:'300px'
});
$("div").animate({
left:'600px',
});
});
});
</script>
</head>
<body>
<!-- position: absolute 绝对定位 -->
<div ></div>
<br/><br/>
<input type="button" />
</body>
</html>淡入淡出
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>jquery的学习</title>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<!-- jquery代码的入口，用来等待页面元素全部加载完成 -->
<script type="text/javascript">
$(function() {
/* 用jquery选择器来选取某一个div的内容*/
var coo=$("#b").html();
var con= $(".a").val();
alert(con)
// jquery绑定点击事件 click 单击 hide 隐藏 参数单位是毫秒
$(".a").click(function(){
//隐藏div
// $("#b").hide(3000);
$("#b").fadeOut(3000); //慢慢消失 淡出
});
$(".a1").click(function(){
$("#b").fadeIn(3000); //慢慢出来 淡入
});
$("#aa").click(function(){
$("#b").fadeToggle(1000);
});
});
</script>
</head>
<body>
<div >
<img src="./img/微信图片_20181121185908.jpg"/>
</div>
<input type="text" width="200" value="默认显示" />
<input class='a' type="button" value="滚蛋吧肿瘤君"/>
<input class='a1' type="button" value="出来吧皮卡丘"/>
<input >
</body>
</html>- 上一篇 »鼠标悬停css3动画效果
- 下一篇 »JQuery效果-淡入淡出、滑动、动画