![](https://img-blog.csdnimg.cn/20190918140213434.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
日常练习--前端小效果
文章平均质量分 76
使用JavaScript、css等做出的小效果
Hello_my_new_world
这个作者很懒,什么都没留下…
展开
-
鼠标滑入后边框逐渐包裹效果
实现效果:鼠标滑入组件后,组件由无边框变为由边框包裹,边框从四个角逐渐变长包裹完整个组件;鼠标滑出后边框逐渐变短到消失原创 2021-11-18 20:34:47 · 643 阅读 · 0 评论 -
实现效果——内容与边框有距离
前两天遇到一个要实现的效果:一个颜色块有边框,边框与色块有一定距离,如下:当时第一个想法是:用一个元素包裹另一个元素,外部元素有一定宽度的padding,或内部元素有一定宽度的margin。今天遇到一个css属性可以实现一个HTML元素实现上图效果 ——outline属性。outline:轮廓,是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用,在元素中的位置如图...原创 2019-10-11 23:55:34 · 1792 阅读 · 0 评论 -
实现图片上传时即时显示
使用HTML5中的FileReader实现图片上传时使图片即时显示,图片显示等比例缩放。实现效果:FileReader:构造函数:FileReader()属性:FileReader.error:表示在读取文件时发生的错误。FileReader.readyState:表示FileReader状态的数字。取值如下:常量名 值 描述 EMPTY 0 还没有加载任何数据. LOADING 1 数据正在被加载. DONE 2...原创 2020-07-20 10:15:42 · 382 阅读 · 0 评论 -
各种按钮样式
用css写了几个按钮样式:静态的,不可编辑的,立体的,圆角的,胶囊状的,动态效果的样式。效果预览(录屏保存后有点抖动,稍微有点影响最后两个效果):要写按钮样式首先要去除按钮默认样式:1、更改背景 background ;2、去除边框或更改边框 border ;3、去除默认的按钮点击后的蓝色边框,这是很容易忽略的一个:outline:none;最后一个动态渐变按钮使...原创 2019-03-17 19:16:04 · 2730 阅读 · 0 评论 -
图片上传显示效果
在网页中显示多张图片,并且 width 用百分比布局,高度随内容扩展,每张图片的长宽不一,如何达到一个比较好的显示效果呢?我是打算每张图片以正方形排列,问题是每张图片的长宽不一,若固定大小显示就会拉扯。解决方法:用<ul><li>,固定<li>的大小,显示<li>大小的图片,多于部分隐藏。1.用百分比布局是为了可以在一个容器方便地显示要求...原创 2019-01-14 18:23:17 · 289 阅读 · 0 评论 -
css+jQuery实现页面返回顶部
用css和jQuery实现了一个页面返回顶部的功能:当页面滑动到一定距离,出现返回顶部的标志,点击后快速滑动返回页面顶部。效果预览:思路:在页面顶部时没有返回顶部标志,页面滑动一定距离标志出现。这里需要用到 scroll() 方法 和scrollTop() 方法。 点击页面返回顶部我开始是想用<a>标签,通过定义href="#"返回顶部,可是使用<a>标签...原创 2019-03-23 16:38:41 · 324 阅读 · 0 评论 -
css动画+jQuery实现气泡背景
写了一个动态背景:渐变背景色下移,气泡上移。预览:实现思路:1、先实现渐变背景:将背景色设为渐变(注意设置首尾颜色相同,否则动画时会出现明显分界线) background:linear-gradient(to bottom,#DFDFF5 ,#FF9980,#FFF280,#FFC080,#DFDFF5);2、将背景动起来:先用 background-siz...原创 2019-03-19 23:43:07 · 1233 阅读 · 0 评论 -
css点击动画
做了一个点击出现水纹的css动画效果。效果预览:HTML:<div id="star"> <em id="cir"></em> <em class="em1"></em> <em class="em2"></em&g原创 2019-03-16 23:24:27 · 3051 阅读 · 0 评论 -
html5的canvas 画西瓜
这几天在学HTML5,练习canvas画了半个西瓜。画的西瓜分为“瓜子”,“瓜肉”,“白瓜肉”,“瓜皮”。效果图:注意的地方是:1.瓜肉与瓜皮之间有白色瓜肉,使用 stroke() 方法,但直接画上白色会显得死板,所以给 stroke() 设置样式为渐变色(红-白-绿)。2.瓜子是一个扇形,画扇形需使用arc()方法创建弧/曲线,还需moveTo()方法把路径移动到画布中的...原创 2019-01-25 18:02:12 · 939 阅读 · 0 评论 -
可展开收起效果的网站提示框
分别用JavaScript和jQuery写了滑动效果的网站提示。用jQuery很简单,用 animate() 方法就可以了。用JavaScript稍微复杂一点,需要用到定时器实现动画效果,并且要考虑到鼠标多次移入“提示”时会开启多个定时器,则要清除定时器的情况。效果如图:收起时: 展开时: HTML:<div id="cue-hide"><span i...原创 2019-01-20 00:56:07 · 505 阅读 · 0 评论 -
导航栏
用JavaScript和jQuery写了一个导航栏,后面会慢慢加上新的样式。样式:HTML:<div id="topnav"> <ul class="logo"><li><a href="javascript:void(0)">logo</a></li>&a原创 2019-01-18 21:43:46 · 229 阅读 · 0 评论 -
纯CSS画一只简单的小鸟
用css简单画了一只小鸟,效果图如下:代码如下:HTML:<div class="box-canvas"> <div class="body"> <div class="head"></div> <div class="wing"></div> </div> <div class="mout原创 2020-07-16 23:58:53 · 560 阅读 · 0 评论 -
使用ES6的扩展运算符实现滑过字符变化样式
要求: 鼠标滑动页面上的字符串时,指向的字符样式变大,倾斜一定角度。分析: 将字符串用扩展运算符扩展为一个新的参数序列; 然后使用 map 方法将每个字符包含在<span>标签中; css 为<span>中的字符添加样式。效果预览:css:body{ background:#ffff00...原创 2019-09-14 00:04:33 · 226 阅读 · 0 评论 -
购物车加减按钮
分别用JavaScript,jQuery和vue做了一个简单的购物车加减按钮部分。HTML:<ul class="counter"> <li id="minus"><input type="button" onclick="minuser()" value="-"/></li> <li id="countnum">0<...原创 2019-01-15 21:51:08 · 4767 阅读 · 0 评论 -
javascript实现效果——5秒后跳转至指定页面
分析:1、需要跳转,则要用到 location对象的href属性。2、倒计时5秒需要使用定时器 setInterval。HTML:<div id="msg"></div>JavaScript:window.onload=function(){ var div=document.getElementById("msg"); ...原创 2019-08-11 10:11:58 · 5562 阅读 · 0 评论 -
javascript实现倒计时效果
分析:1、要实现倒计时,所以需要用到 setInterval 定时器。2、需要用到Date函数,计算出倒计时的小时数、分钟数、秒数;再用 innerHTML 把倒计时的 小时数、分钟数、秒数放入三个盒子里显示出来。3、用定时器第一次执行时间隔1秒,页面在此期间有空白,所以采用封装函数的方式,先调用一次此函数。4、时间到了清除定时器 clearInterval() ,加上忽大忽小的动...原创 2019-08-10 23:00:05 · 460 阅读 · 0 评论 -
JavaScript实现小人儿跟随鼠标效果
练手:JavaScript实现小人儿跟随鼠标小效果。小人儿图片(随意图片):分析: 1、图片应该使用绝对定位。 2、需要用到 mousemove 鼠标事件。 3、需要得到鼠标相对于浏览器窗口可视区的 X 和 Y 坐标来改变图片位置坐标,使用——clientX,clientY。html: <img src="./images/timg.gif" i...原创 2019-08-08 23:40:44 · 1660 阅读 · 0 评论 -
JavaScript实现侧边广告效果
用JavaScript实现了一个小效果:滑动页面,侧边广告一起滑动一定距离,返回原来位置。HTML:<div id="aside"> <img src="./images/float.jpg" alt=""> </div> <div class="main"> <p>加油!</p> ...原创 2019-08-01 22:16:59 · 708 阅读 · 0 评论 -
JavaScript 实现导航吸顶
JavaScript实现小效果:导航吸顶,当滚动一定距离时,导航固定在顶部。HTML:<header id="head"> <img src="./images/top.png" alt=""> </header> <nav id="nav"> <img src="./images/na...原创 2019-08-01 00:23:15 · 221 阅读 · 0 评论