使用jQuery实现的图片的圆周运动

最新推荐文章于 2021-09-03 21:08:34 发布
置顶 最新推荐文章于 2021-09-03 21:08:34 发布
阅读量389 收藏
点赞数
文章标签： jQuery javascript java 圆周运动 运动
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangzijian121/article/details/81871225
版权

这个是小demo是使用jQuery实现的滑稽图片的圆周运动，并且中央图片的透明度会随着点击而发生变化，
圆周的速度会随这点击的次数而增加。

<!DOCTYPE html>
<html>
<head>
<title>index.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html" charset="UTF-8">
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
* {
	margin: 0px;
	padding: 0px;
}

#input_1 {
	background-image: url('./img/huaji.jpg');
	background-size: 100%;
	margin-left: 100px;
	margin-top: 400px;
	width: 100px;
	height: 100px;
}

#big_huaji {
	position: fixed;
	left: 350px;
	top: 400px;
	height: 175px;
	width: 200px;
	background-image: url('./img/big_ huaji.png');
	background-size: 100%;
	opacity: 0.0;
	border: none;
	outline: none;
}

#big_huaji_out_div {
	position: fixed;
	left: 350px;
	top: 400px;
	height: 175px;
	width: 200px;
	border: 1px solid red;
	text-align: center;
}

#tishi {
	margin-top: 80px;
	border: none;
	outline: none;
	background-color: #fff;
}
</style>
</head>
<script type="text/javascript">
	function fun_1() {
		$(function() {
			$('center').css('display', 'none');
			//x^2+y^2=1  x=1-(y*y) (x-a)^2+(y-b)^2 = r^2
			var res = parseInt($('#input_1').css('margin-left'));
			var res_top = parseInt($('#input_1').css('margin-top'));
			var a = res + 300;
			var b = res_top;
			var r = 300;//定义图形运行的圆周半径。
			var stop_button = $('#stop');//定义停止的按钮
			var count_left = res;
			$('#input_1').css('margin-left', 600 + 'px');
			var num = parseInt(res);
			var index = true;
			var sudu = 1;
			var opacity = 0;
			$('#big_huaji').click(function() {
				opacity += 0.02;
				if (opacity > 0.10) {
					fun_clear();
				}
				fun_touming(opacity);
				sudu += 0.5;
				return sudu;
			})
			var move_Heart = setInterval(function() {
				if (index == true) {
					count_left += sudu;
					var count_top = fun_zuobiao_y(count_left, a, b, r);
					$('#input_1').css('margin-top', count_top + 'px');
				} else if (index == false) {
					count_left -= sudu;
					var count_top = fun_zuobiao_y(count_left, a, b, r);
					$('#input_1').css('margin-top', res_top - (count_top - res_top) + 'px');
				}
				if (count_left + (sudu + 1) > res + (2 * r)) {
					index = false;
				}
				if (count_left - (sudu + 1) < res) {
					index = true;
				}
				$('#input_1').css('margin-left', count_left + 'px');
				fun_create(count_left, count_top);
				stop_button.click(function() {
					clearInterval(move_Heart);
				})
			}, 1)
		})
	}
	function fun_zuobiao_y(x, a, b, r) {
		return Math.sqrt(Math.pow(r, 2) - Math.pow(x - a, 2)) + b;
	}
	function fun_create(x, y) {
		$(function() {
			$('#input_1').append('<hr style="width:20px; height: 20px; border: 1px solid red;>');
			;
		})
	}
	function fun_touming(opacity) {
		$('#big_huaji').css({
			opacity : opacity
		})
	}
	//清除
	function fun_clear() {
		$('#big_huaji_out_div').css({
			border : "none",
		})
		$('#tishi').css('display', 'none')
	}
	fun_1();
</script>
<body>
	<input value="停止" type="button" id="stop" style="position: fixed;">
	<div id="big_huaji_out_div">
		<input value="连续点击召唤神兽" type="button" id="tishi"> <input
			type="button" id="big_huaji">
	</div>
	<br>
	<input id="input_1" type="button" style="outline: none;border: none;">
	<hr style="width:1px; height: 1px; border: 1px solid red;">
	<hr style="width:1px; height: 20px; border: 1px solid red;">
	<hr style="width:1px; height: 20px; border: 1px solid red;">
</body>
</html>

此demo的还存在的问题：圆周运动的边界的运动并不平滑，有待改善。
博主QQ：1219116968

王子健121
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
用javascript模拟太阳系行星的圆周运动.zip
07-11
HTML和CSS布局，用javascript写运动函数渲染的一个小demo，模拟了太阳系的行星运转（没有月球）
使用jQuery实现图片的圆周运动
qq_33980346的博客
08-20 458
这个是小demo是使用jQuery实现的滑稽图片的圆周运动，并且中央图片的透明度会随着点击而发生变化，圆周的速度会随着点击次数的增加而加快。 index.html #input_1 { background-image: url(‘./img/huaji.jpg’); background-size: 100%; margin-left:...
jquery 练习 圆周运动
weixin_42617075的博客
08-23 434
juqery 圆周练习 &amp;lt;head&amp;gt; &amp;lt;style lang=&quot;&quot;&amp;gt; body { margin: 0; } #sun { width: 100px; height: 100px; background-color: yello...
圆周运动的实现
CIA的博客
09-03 374
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> * { margin: 0; padding: 0; } #ball { height: 30px; width: 30px; background: red; position: absolu
圆周运动
weixin_45052104的博客
06-08 125
window.onload = function(){ var oDiv = document.getElementById(‘div1’); var r = 100; //半径 //圆心的位置 var x = 700; //left值 var y = 300; //top值 var num = 0; //角度 setInterval(function(){ num++; //M...
使用jQuery实现图片轮播.html
01-11
使用jQuery实现图片轮播html5手机web页面
使用jQuery实现图片遮罩半透明坠落遮挡
10-24
主要介绍了使用jQuery实现图片遮罩半透明坠落遮挡，效果非常棒，小伙伴们做相册的时候可以直接拿走使用。
jQuery实现图片下载代码
10-16
主要为大家详细介绍了jQuery实现图片下载代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
jquery实现图片滚动效果的简单实例
10-26
主要介绍了jquery实现图片滚动效果的简单实例，有需要的朋友可以参考一下
基于Jquery实现的图片预览插件
08-25
基于Jquery实现的图片预览插件，支持图片手动和鼠标滚轮滑动放大缩小、支持图片旋转转和多图片切换、支持图片分组预览，下载后即可快速使用。
一张图片绕圆心做圆周运动
06-05
一个动作类CCRoundBy，使精灵绕某个圆心做圆周运动，配合CCMoveTo可以做螺旋运动
图片跳动,js让图片跳动起来.jQuery
07-12
网上溜达，偶见一网站的产品可以“跳动”，给用户以活跃的感觉，于是自己也实现一下，如果您碰巧也在完成产品展示类的网站不妨也给产品来点“灵性”。描述的有点晕乎了，其实很简单就是jquery的一个动画效果 。请鼠标滑过图片
JS模拟圆周运动
图图小淘气的博客
11-25 296
Math.sin(x) x 的正玄值。返回值在 -1.0 到 1.0 之间； Math.cos(x) x 的余弦值。返回的是 -1.0 到 1.0 之间的数； 这两个函数中的X 都是指的“弧度”而非“角度”，弧度的计算公式为： 2*PI/360*角度； 30° 角度 的弧度 = 2*PI/360*30 如何得到圆上每个点的坐标？ 解决思路：根据三角形的正玄、余弦来得值； 假设一个...
js实现椭圆轨迹_用js实现一组图片同心椭圆周运动 图片有从小到大渐近效果
weixin_28698129的博客
02-17 871
最近在网站项目中，有要求将一组图片绕同心以椭圆周轨迹循环运动，并且图片有从小到大的渐近效果。经过考虑，决定用js实现这个特效。效果如下： 实现思路：先实现圆周运动，通过设置长边与短边，就能实现椭圆运动了。首先写html代码，设置容器并附id“container”,然后加上若干图片。 加上适当的样式。最为重要的是将#container设置为相对定位，这样才能使图片的...
原生JS实现圆周运动
weixin_33918357的博客
09-29 118
<body> <div id="ball" style="width:20px; height:20px; background:red; border-radius:50%; position:absolute; left:0; top:80px;"></div> <script> var ball = document.getElementBy...
曲线运动,圆周运动
维克多噗噗的博客
03-24 350
Math.sin()—-Math.cos()曲线运动<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content=" "> <title>Document</title> <style type="text/css"> *{margi
jquery 计算运动方向_jQuery惊人的圆周运动效果
culiao9310的博客
09-28 189
jquery 计算运动方向View demo 查看演示Download Source 下载源Today we are going to create a stunning circular motion effect with jQuery. We will be using the jQuery.path plugin to animate a circu...
js实例：圆周运动
六国破灭，非兵不利 ，战不善，弊在赂秦。赂秦而力亏，破灭之道也。或曰：六国互丧，率赂秦耶？曰：不赂者以赂者丧，盖失强援，不能独完。故曰：弊在赂秦也。 秦以攻取之外，小则获邑，大则得城。较秦之所得，与战胜而得者，其实百倍；诸侯之所亡，与战败而亡者，其实亦百
05-31 835
&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;style type="text/css"&gt; body{ margin: 0; padding: 0; }
JavaScript实现圆周运动
y1314999的博客
07-13 659
Js实现圆周运动 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
使用jquery实现图片轮播
最新发布
05-12
使用jQuery实现图片轮播的步骤如下： 1. 首先，需要准备好需要轮播的图片和相关的HTML结构，一般会使用ul li结构。 2. 在HTML中引入jQuery库和轮播插件（如slick.js、swiper.js等）。 3. 初始化轮播插件，并传入...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

王子健121

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值