jquery的setInterval函数用法「建议收藏」
jQuery 函数 建议 收藏 用法 setInterval
2023-06-13 09:12:08 时间
大家好,又见面了,我是你们的朋友全栈君。
html代码
1 <!doctype html>
2 <html>
3 <head>
4 <meta charset="utf-8"/>
5 <link rel="stylesheet" href="./css/style.css"/>
6 <script src="./js/jq.js" type="text/javascript"></script>
7 <script src="./js/js.js" type="text/javascript"></script>
8 </head>
9 <body>
10 <!--所有包-->
11 <div id="wrap">
12 <!--头部-->
13 <header>
14 <h1>my Blog</h1>
15 <h2>everyting is value!</h2>
16 </header>
17 <!--内容块-->
18 <div id="content">
19
20 <div id="good1">
21
22 </div>
23 <div id="good2">
24
25 </div>
26 <div id="good3">
27
28 </div>
29 <div id="good4">
30
31 </div>
32 <div id="good5">
33
34 </div>
35
36 </div>
37
38 <!--底部-->
39 <footer>
40
41 </footer>
42 </div>
43
44 </body>
45 </html>
css代码
1 *{
2 padding: 0;
3 margin:0;
4 font-family: Arial;
5 }
6 body{
7 padding: 30px;
8 background: rgb(192,192,192)}
9 #wrap{
10 padding: 50px;
11 width: 900px;
12 height: auto;
13 margin:0px auto;
14 background:rgb(255,255,255);
15 }
16 header{
17 position: relative;
18 height: auto;
19 padding-bottom: 10px;
20 border-bottom: 3px solid rgb(28,137,123)
21 }
22 header h1{
23 text-align: center;
24 height: 45px;
25 font-size: 36px;
26 line-height: 45px;
27 font-weight: 400;
28 font-family: Garamond;
29 color: rgb(187,10,10);
30 }
31 header h2{
32 text-align: right;
33 font-size: 12px;
34 font-style: italic;
35 font-weight: 600;
36 }
37 #content{
38 position: relative;
39 height: 500px;
40 width: 100%;
41
42 }
43 #content #good1{
44 position: absolute;
45 top: 0px;
46 left: 0px;
47 width: 180px;
48 height: 180px;
49 background: rgba(234,175,174,0.54);
50 border-radius: 90px;
51 }
52 #content #good2{
53 position: absolute;
54 top: 20px;
55 left: 120px;
56 width: 180px;
57 height: 180px;
58 background: rgba(234,175,174,0.54);
59 border-radius: 90px;
60 }
61 #content #good3{
62 position: absolute;
63 top: 0px;
64 left: 180px;
65 width: 180px;
66 height: 180px;
67 background: rgba(234,175,174,0.54);
68 border-radius: 90px;
69 }
70 #content #good4{
71 position: absolute;
72 top: 40px;
73 left: 350px;
74 width: 180px;
75 height: 180px;
76 background: rgba(234,175,174,0.54);
77 border-radius: 90px;
78 }
79 #content #good5{
80 position: absolute;
81 top: 60px;
82 left: 650px;
83 width: 180px;
84 height: 180px;
85 background: rgba(234,175,174,0.54);
86 border-radius: 90px;
87 }
js代码
1 $(document).ready(function(){
2 var content=$('#content');
3
4 var one=$('#good1');
5 var x=0;
6 var y=0;
7 var xs=10;
8 var ys=10;
9 var contentW=$('#content').width();
10 var contentH=$('#content').height();
11 function scroll(){
12 x+=xs;
13 y+=ys;
14 one.css({"left":x+"px","top":y+"px"});
15 if(x>=contentW-one.width() ||x<=0)
16 {
17 xs=-1*xs;
18 }
19 if(y>=contentH-one.height() ||y<=0)
20 {
21 ys=-1*ys;
22 }
23
24 }
25
26 st=setInterval(scroll,50);
27 one.mouseover(function(){
28 clearInterval(st);
29 });
30 one.mouseout(function(){
31 st=setInterval(scroll,50);
32 });
33
34
35
36 });
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/155630.html原文链接:https://javaforall.cn
相关文章
- 使用jQuery处理ctrl+enter或者enter发送信息事件
- jquery validation engine ajax验证,jQuery Validation Engine 表单验证「建议收藏」
- jquery.cookie使用方法详解编程语言
- jQuery事件详解编程语言
- jquery serialize()函数用法详解编程语言
- JQuery初体验(建议学习jquery)
- php实现jQuery扩展函数
- Jquery实战_读书笔记1—选择jQuery
- 基于jQuery的合并表格中相同文本的相邻单元格的代码
- JQuery里面的几种选择器查找满足条件的元素$("#控件ID")
- jQuery中将函数赋值给变量的调用方法
- jQuery.extend函数的详细用法
- JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
- 6款新颖的jQuery和CSS3进度条插件推荐
- 基于asp.net下使用jquery实现ajax的解决方法
- jQuery动态地获取系统时间实现代码
- Jquery模板数据绑定插件的使用方法详解
- jquery与js函数冲突的两种解决方法
- jquery中focus()函数实现当对象获得焦点后自动把光标移到内容最后
- 使用JQUERY进行后台页面布局控制DIV实现左右式
- jquery中ajax函数执行顺序问题之如何设置同步
- jQuery函数的第二个参数获取指定上下文中的DOM元素
- Jquery图片延迟加载插件jquery.lazyload.js的使用方法
- jquery实现预览提交的表单代码分享
- jquery获取radio值实例
- jQuery函数map()和each()介绍及异同点分析
- Jquery$.ajax函数外的一段代码的执行顺序