枯颜668-CSDN博客

原创封装动画函数

// obj是移动对象 target是目标距离 callback回调函数//前提：obj要带定位function animate(obj,target,callback){ // 先清除以前的定时器，只保留一个定时器 clearInterval(obj.timer); // obj是个对象，利用对象来添加定时器，实现给不同元素添加不同的定时器 obj.timer=setInterval(function(){ // 匀速动画当前位置+固...

2022-02-20 22:07:20 298

原创简易瀑布流

1.什么是瀑布流视觉表现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会不断加载数据块并附加至当前尾部。2.html代码<div class="wrapper"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <di...

2022-02-20 22:03:49 363

原创随机颜色对象

最近需要用到颜色随机的效果（类似于随机点名的那种叭）color:rgb(x,y,z); (red,blue,green)思路很简单:主要用到Math对象中的两个函数,Math.random()获得随机数0~1,以及Math.floor(),向下取整function Color(){ this.r = Math.floor(Math.random()*255); this.g = Math.floor(Math.random()*255); this....

2022-02-13 22:45:00 195

原创 grid布局常用属性

grid布局即网格布局（二维），flex布局（一维）<div class="wrap"> <div class="item">item 1</div> <div class="item">item 2</div> <div class="item">item 3</div> <div class="item">item 4</div&gt...

2022-02-13 22:15:00 2625

原创背景渐变颜色

左边线性渐变，右边径向渐变，观察比较（1）background: linear-gradient(pink,skyblue);//从上粉到下蓝各占50%background: radial-gradient(pink,skyblue);（2）background: linear-gradient(to top,pink,skyblue);//第一个是代表方向---从下粉到上蓝(3)background: linear-gradient...

2022-02-06 21:08:53 638

原创 Tab栏切换

1.将tab栏分为上下两部分，上面是导航栏，下面是各部分对应的内容。2.tab栏导航栏部分，点击后样式改变，比如字体颜色、背景颜色改变①定义一个类名：current，改变后的样式，先给第一个写该类名，其他的不写类名②js获取所有对象，利用for循环遍历给每个对象绑定点击事件,并且设置属性index③排他算法：利用for循环将所有对象设置类名为空，被点击的对象设置类名current3.点击不同对象，出现不同的内容①定义一个类名：items，其他的都隐藏起来②获取全部对象，获取点击对象的索

2022-02-06 20:41:05 7832 1

原创白桃立体时钟

html代码：<div class="container"> <div class="clock"></div> </div>css代码：<style> *{ margin:0; padding:0; box-sizing: border-box; } body{ ...

2022-01-30 21:58:02 939

原创动态勾选按钮

html代码：<div class="container"> <label for="yes" id=""> <input type="checkbox" name="" id="yes"> <span>自动登录</span> </label> <label for="forget" id=""> ...

2022-01-30 21:52:41 946

原创自制下拉菜单

html代码：先放一个ul(nav),让里面的li浮动，每个li里面有a和ul(subnav)<ul class="nav"> <li> <a href="#">联系</a> <ul class="subnav"> <li> <a href="#">私信</a></li> ...

2022-01-23 16:52:34 306

原创两面翻转的盒子

html代码：<div class="box"> <div> 天官赐福</div> <div>百无禁忌</div></div>一直都很喜欢这种花里胡哨的东西,这次先尝试了下文字,下次可以试试图片。css代码：<style> body{ perspective:400px;...

2022-01-23 16:03:13 500

qq_61838861的博客