jqueryD3

最新推荐文章于 2023-07-16 16:22:37 发布

应该不会重名了吧

最新推荐文章于 2023-07-16 16:22:37 发布

阅读量209

点赞数

本文链接：https://blog.csdn.net/flypang0126/article/details/106433320

版权

本文介绍了使用HTML、CSS和JavaScript实现图片跟随鼠标移动的效果，以及通过jQuery进行元素的显示、隐藏、淡入淡出等动画操作的方法。通过具体代码示例，读者可以学习如何在网页中添加交互性和动态效果。

摘要由CSDN通过智能技术生成

图片跟随

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
body{text-align:center;}
#small{margin-top: 150px;}
#showBig{position: absolute;
		display:none;
	 }
</style>
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script>
$(function(){
	$("#small").mousemove(function(event){
		var x=event.pageX;
		var y=event.pageY;
		$("#showBig").show();
		//offset()相对偏移
		$("#showBig").offset({
			top:y+20,
			left:x+20
		});
	}).mouseout(function(){
		$("#showBig").hide();
	});
});
</script>
</head>
<body>
<img id="small" width=50px height=50px src="ball.png"/>
<div id="showBig">
<img  width="100px" height="100px"src="ep0.png"/>
</div>
</body>
</html>

动画

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="jqueryD3.css">
<script type="text/javascript" src="../jquery-3.4.1.js"></script>
<script>
$(function(){
		$("#btn1").click(function(){
			$("#div1").show(2000,function(){
				//alert("Niahao");
			});
});
		$("#btn2").click(function(){
			$("#div1").hide(1000);
});
		$("#btn3").click(function(){
			$("#div1").toggle(1000);
});
		$("#btn4").click(function(){
			$("#div1").slideDown(1000);
});
		$("#btn5").click(function(){
			$("#div1").slideUp(1000);
});
		$("#btn6").click(function(){
			$("#div1").slideToggle(1000);
});
		$("#btn7").click(function(){
			$("#div1").fadeIn(1000);
});
		$("#btn8").click(function(){
			$("#div1").fadeOut(1000);
});
		$("#btn9").click(function(){
			//调透明度
			$("#div1").fadeTo("slow",Math.random());
});
		$("#btn10").click(function(){
			$("#div1").fadeToggle(1000);	
});
		$("#btn11").click(function(){
			//传入最终想要的样式 background-color是错的，一定要去掉横杠，小写变大写
			var param={width:"500px",height:"700px",backgroundColor:"blue",borderWidth:"10px solid green"}
			$("#div1").animate(param,2000);	
});
})
</script>
</head>
<body>

<table>
	<tr>
		<td><button id="btn1">显示show()</button><td/>
	</tr>
	<tr>
		<td><button id="btn2">隐藏hide()</button><td/>
	</tr>
	<tr>
		<td><button id="btn3">显示/隐藏切换toggle()</button></td>
	</tr>
	<tr>
		<td><button id="btn4">展开slideDown()</button></td>
	</tr>
	<tr>
		<td><button id="btn5">合并slideUp()</button></td>
	</tr>
	<tr>
		<td><button id="btn6">展开切换slideToggle()</button></td>
	</tr>
	<tr>
		<td><button id="btn7">淡入fadeIn()</button></td>
	</tr>
	<tr>
		<td><button id="btn8">淡出fadeOut()</button></td>
	</tr>
	<tr>
		<td><button id="btn9">淡化到fadeTo()</button></td>
	</tr>
	<tr>
		<td><button id="btn10">淡化切换fade Toggle()</button></td>
	</tr>
	<tr>
		<td><button id="btn11">自定义动画animate()</button></td>
	</tr>
</table>
<div id="div1"style="float:left;border:1px solid;background-color:pink;width: 300px;height: 200px;display:none;">
飞哥帅啊!
</div>
</body>
</html>