sword_chiu-CSDN博客

原创用数组的三种方法渲染页面

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.

2020-07-09 18:28:45 3845

var that;class Tab { constructor(id) { // 获取元素 that = this; this.main = document.querySelector(id); this.add = this.main.querySelector('.tabadd'); // li的父元素 this.ul = this.main.querySelector('.fisrstnav.

2020-07-08 10:24:34 175

原创 focus轮播图（带自动功能的轮播图）

解释：.arrow-l是指左右点击的按钮focus指的是轮播图的框focusWidth是指轮播图大小（移动距离）无缝轮播图的要素在于需要创建一张额外的图（与第一张一致）到ul的最后面，等轮到最后一张图时，快速切回第一张图相关公式：移动的距离left为索引*轮播图框的宽因为要实现圆圈与轮播图的互动（点击同一个索引，会有同索引的图），所以要有一个自定义属性index来关联num是用来查看点了几次，并用来控制点击左右按钮后跳到什么距离（类似于index）circle用来控制在点击左右按钮后，圈圈同步

2020-07-03 00:15:39 651

原创鼠标移动上去之后元素向外移动，移出后元素回走效果

鼠标移动上去效果如下源代码：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box { pos

2020-07-02 11:44:29 416

原创函数封装实现页面动作功能

// 用途：在页面上实现来回移动的盒子 // obj:要移动的对象元素 // target:目标位置 // callback:回调函数，跑完之后做什么操作 function move(obj, target, callback) { // 先清除，以免产生过多的定时器 clearInterval(obj.timer) obj.timer = setInter...

2020-07-02 01:16:21 150

原创京东商品移动放大镜效果

效果图：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .big { position: rel

2020-07-01 00:31:38 202

原创移动端通用common.less样式

html { font-size: 50px;}@media screen and (min-width: 320px) { html { font-size: 21.33333333px; }}@media screen and (min-width: 360px) { html { font-size: 24px; }}@media screen and (min-width: 375px) { html { font-size: 25px;

2020-06-13 15:09:58 679

原创移动端通用样式

html { font-family: "Helvetica Neue", Helvetica, sans-serif; /*谷歌浏览器字体最小字体12px*/ -webkit-text-size-adjust: 100%; /*100%/none 关闭字体大小自动调整功能*/ /*a标签及拥有 :active伪类的元素有默认的高亮框*/ -webk...

2020-06-07 09:35:14 579

原创用css动画结合3d转换来做旋转木马

效果预览代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> body { perspective: 1200px; } section { position: relative;

2020-06-04 18:50:41 257

原创鼠标移动到导航栏上实现底面翻转成正面的实现组件

鼠标移动前效果鼠标移动后效果实现代码<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> /* 首先需要一个大盒子，因为是绕着大盒子转动的，里面两个a标签重叠 */ /* 其次在背面的a标签需要往x轴移动-90度。这样就形成一个立体的十字效.

2020-06-04 17:14:11 229

原创用css动画效果做小熊奔跑

代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title> <style> body { background-color: #ccc; } div { position: absolute;

2020-06-03 16:59:12 2487 3

原创 CSS3动画实现地图热点效果

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Document</title></head><style> @keyframes suo { 0% {} 70% { width: 40px; height: 40px;

2020-06-02 21:37:03 878 1

原创行内元素、行内块、块元素的特点

块级元素（代表div）特点：宽度默认与父级相同独占一行可设置宽高，margin padding注：p标签、h、dt等文字类标签内最好不要放块级元素行内元素（代表 span a）特点不能设置宽高一行内显示默认宽度是内容宽度padding值只左右下有效，margin值只左右有效可以看到这里设置span的margin，只左右有效可以看到这里设置padding，但是只左右下有效结论：行内元素最好只设置左右padding跟margin 以免造成元素属性混乱行内元素内最好不放块级

2020-05-24 10:45:22 3433

原创 Python面向对象-类的各种方法与代码演示

class Price: '''这是一个类''' count = 0 #这是一个类属性可以用类名.属性，也可以用实例名.属性来使用 def __init__(self,name):#类的构造函数，默认__init__ ，参数第一个必须用self #类的构造函数用于类创建实例的过程。也定义了实例属性 self.name ...

2020-05-07 11:04:47 426

sword_chiu的博客