jane_panyiyun

2019年12月13日

摘要：案例：图标跟着鼠标飞(有bug) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> img { position: absolute; } </style> </he 阅读全文

posted @ 2019-12-13 13:12 jane_panyiyun 阅读(403) 评论(0) 推荐(0)

JS---案例：完整的轮播图---重点！

摘要：案例：完整的轮播图思路：分5部分做 1. 获取所有要用的元素 2. 做小按钮，点击移动图标部分 3. 做右边焦点按钮，点击移动图片，小按钮颜色一起跟着变（克隆了第一图到第六图，用索引liObj.setAttribute("index", i)，pic = this.getAttribute(" 阅读全文

posted @ 2019-12-13 10:29 jane_panyiyun 阅读(590) 评论(0) 推荐(0)

2019年12月12日

JS---案例：无缝的轮播图

摘要：案例：无缝的轮播图 w <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style: none; 阅读全文

posted @ 2019-12-12 21:52 jane_panyiyun 阅读(378) 评论(0) 推荐(0)

JS---案例---左右焦点轮播图(tb)

摘要：案例左右焦点轮播图(tb) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> body, ul, ol, li, img { margin: 0; padding: 0; l 阅读全文

posted @ 2019-12-12 21:17 jane_panyiyun 阅读(348) 评论(0) 推荐(0)

JS---案例：简单轮播图

摘要：案例：简单轮播图 div叫盒子，里面包了2个小盒子，一个是inner，一个是square inner的div是放ul，里面有li，a，和图片 square的div里面放span，是轮播图的小点 <!DOCTYPE html> <html lang="en"> <head> <meta charset 阅读全文

posted @ 2019-12-12 17:36 jane_panyiyun 阅读(555) 评论(0) 推荐(0)

JS---动画函数封装：设置任意的一个元素,移动到指定的目标位置

摘要：动画函数封装：设置任意的一个元素,移动到指定的目标位置 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> div{ width: 200px; height: 200 阅读全文

posted @ 2019-12-12 16:18 jane_panyiyun 阅读(516) 评论(0) 推荐(0)

JS---案例：移动元素，封装动画函数

摘要：案例：移动元素，封装动画函数 1. div要移动,要脱离文档流 position:absolute 2. 如果样式的代码是在style的标签中设置,外面是获取不到 3. 如果样式的代码是在style的属性设置,外面是可以获取 4. 获取div的当前位置 console.log(my$("dv").o 阅读全文

posted @ 2019-12-12 16:03 jane_panyiyun 阅读(445) 评论(0) 推荐(0)

JS---案例：设置div的宽度

摘要：案例：设置div的宽度 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> <style> * { margin: 0; padding: 0; } div { width: 200p 阅读全文

posted @ 2019-12-12 15:11 jane_panyiyun 阅读(1100) 评论(0) 推荐(0)

JS---案例：点击按钮设置div背景色渐变

摘要：案例：点击按钮设置div背景色渐变背景色渐变：设置透明度 <div id="dv"></div> <input type="button" value="渐变" id="btn" /> <script src="common.js"></script> <script> my$("btn").on 阅读全文

posted @ 2019-12-12 15:03 jane_panyiyun 阅读(893) 评论(0) 推荐(0)

JS---案例：协议按钮禁用（倒计时）

摘要：案例：协议按钮倒计时和禁用 <textarea name="texta" id="" cols="30" rows="10"> 这个世界就是这么疯狂,你不同意,我就让你注册,秦始皇,打钱 </textarea> <input type="button" value="请仔细阅读协议(5)" id=" 阅读全文

posted @ 2019-12-12 14:51 jane_panyiyun 阅读(508) 评论(0) 推荐(0)

每临大事有静气，不信今时无古贤

公告