前端框架jQ使用之图片浮动和日历显示

最新推荐文章于 2025-06-30 09:33:27 发布

BalanceWei

最新推荐文章于 2025-06-30 09:33:27 发布

阅读量687

点赞数

CC 4.0 BY-SA版权

分类专栏：前端实用总结前端框架——jQuery 文章标签：图片浮动日历显示 jQ

本文链接：https://blog.youkuaiyun.com/qq_36793007/article/details/83001825

前端实用总结同时被 2 个专栏收录

8 篇文章

订阅专栏

前端框架——jQuery

5 篇文章

订阅专栏

本文介绍如何使用jQ实现图片的自动浮动效果及系统时间的日历显示功能，详细解析了代码实现过程，包括图片边界判断、方向控制、时间格式化等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在掌握了jQ的基础知识之后，我们来看看jQ如何实现图片浮动和日历显示？

其实，图片浮动和日历显示并没有直接关系，我只是把他们写到了一起，

写在前面：一定要记得导入js库，建议不要最新的。

直接上代码：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>时间显示和浮动广告</title>
		<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#wide {
				width: 1920px;
				height: 1200px;
				background-image: url(img/cun.jpg);
			}
			
			input {
				font-size: 35px;
				border-style: none;
				background-color: paleturquoise;
			}
			
			#time {
				width: 200px;
				margin: 0 400px;
			}
			
			#nowtime {
				margin-right: 10PX;
			}
			
			button {
				font-size: 20px;
				background-color: pink;
			}
			
			#but {
				width: 200px;
				margin: 0 250px;
			}
		</style>
	</head>

	<body>
		<div id="wide">
			<div id="time">
				<input size="35" /><br />
				<div id="but">
					<button id="timestop">时间暂停</button><button id="nowtime">当前时间</button>
				</div>
			</div>
			<div id="photo">
				<img src="img/1.png" width="353px" height="254px" id="flyphoto" />
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var isstart = 1; //用来判断是否用户点击了按钮
		var t1, t2, t3; // 保存setInterval方法
		var x = 200,
			y = 200; //图片的起始位置
		var movex = true,
			movey = true; // x和y轴的移动触发
		var step = 5; // 每次移动距离
		var delay = 100; // 移动间隔时间
		var isstop = 1; //用来启动广告暂停和移动的变量

		$().ready( //执行方法
			function() {
				showtime();
				buttonclick();
				flyphoto();
				// 鼠标移入移出图片移动的方法
				$("img").hover(
					function(){
						clearTimeout(t3);
					},
					function(){
						t3 = setInterval("flyphoto()", delay); // 间隔时间执行图片移动
					}
				);
			}
		);

		t3 = setInterval("flyphoto()", delay); // 间隔时间执行图片移动
		t1 = setInterval("showtime()", 1000); // 间隔时间执行时间走动
		// 图片浮动事件
		function flyphoto() {
			var L = T = 75; // 初始左上边界
			// 初始右下边界
			var R = 1300 - 353,
				B = 590 - 254;
			var off = $("#photo").offset(); // 获得图片的坐标对象
			// 通过坐标对象设置初始位置
			off.left = x;
			off.top = y;

			$("#photo").offset(off);
			// x轴和y轴的移动距离控制
			x = x + step * (movex ? 1 : -1); //判断水平方向，判断movex的真假，然后执行x的值加减

			if(x < L) { //到达左边界之后的处理
				movex = true;
				x = L;
			}

			if(x > R) { //到达右边界之后的处理
				movex = false;
				x = R;
			}

			y = y + step * (movey ? 1 : -1); //判断垂直方向，判断movey的真假，然后执行y的值加减

			if(y < T) {
				movey = true;
				y = T;
			}

			if(y > B) {
				movey = false;
				y = B;
			}

		}

		//按钮事件
		function buttonclick() {
			$("#timestop").click( // 点击暂停按钮
				function() {
					isstart = 1;
					clearInterval(t1); //清除调用方法方法
					clearInterval(t2); //清除调用方法方法
				}
			);
			$("#nowtime").click( // 点击当前时间按钮
				function() {
					if(isstart == 1) {
						isstart = 0;
						t2 = setInterval("showtime()", 1000); // 继续走当前时间
					}
				}
			);
		}

		// 获取系统时间，并转化为中文格式
		function showtime() {
			var time = new Date();
			//获取年月日
			var year = time.getFullYear();
			var month = time.getMonth() + 1;
			var date = time.getDate();
			// 获取星期并转化为中文版
			var weekday = time.getDay();
			if(weekday == 0) {
				weekday = "天";
			} else if(weekday == 1) {
				weekday = "一";
			} else if(weekday == 2) {
				weekday = "二";
			} else if(weekday == 3) {
				weekday = "三";
			} else if(weekday == 4) {
				weekday = "四";
			} else if(weekday == 5) {
				weekday = "五";
			} else if(weekday == 6) {
				weekday = "六";
			}
			// 获取时分秒
			var hours = time.getHours();
			var minu = time.getMinutes();
			var scends = time.getSeconds();
			if(minu < 10) { //不足10分钟前面填0
				minu = "0" + minu;
			}
			if(scends < 10) { // 不足10秒钟前面填0
				scends = "0" + scends;
			}
			//将24进制转换成12进制
			var apm = "AM";
			var temp = hours - 12
			if(hours > 12) {
				hours = temp;
				apm = "PM"
			}
			var nowtime = "今天是：" + year + "年" + month + "月" + date + "日" + "," + "星期" + weekday + "  " + hours + ":" + minu + ":" + scends + apm;
			$("input").val(nowtime);
		}
	</script>

</html>

以上代码可以供学习交流直接使用，转载请声明来源。

图片资料：