• 热点推荐:
  • javaScript实现全选与反选功能的案例
    实现全选与反选,分两部分;首先是主控制,点击全选,下面所有的复选框都会被选中;取消全选,下面所有的复选框都会取消选择; 第二就是 当下面的子复选框只要有一个没有被选中,那么主控制就不会被选中,如果子复选框全部选中了,那么主控制也会自动被选中。听起来有点麻烦,但是我又不会写。说白了,就是当我点击全选按钮时,下面的按钮就会自动打钩表示选中,如果取消全选时,下面的全部按钮就会取消选择; 如果下面的按钮有一个没有被选中,那么全选按钮也不会打钩选中。主要是通过表单中的 checked = "checked"的属性来操作,表示选中和未选中。原生javascript代码走起<!DO...
    Time:2021年10月13日 08:29:04  Read:102℃
  • 前端通过鼠标点击随意更换网页背景图片
    有点类似于2345网址导航里面的换肤~!点击某张小图片,然后整个网页背景就会换成某张图片,可以随意切换,这是一个小练习,更换的是body属性,准备几个小li,用for循环遍历li里面的img标签,最后点击哪个img,就把这个img.src给body属性就可以了案例代码:<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   &...
    Time:2021年10月10日 18:24:06  Read:133℃
  • js让一张图片跟随鼠标移动-网页小案例
    当鼠标在网页中的任何一个位置移动时,图片会一直跟随着鼠标移动;需要先获取鼠标在页面中移动时mousemove的位置,通过e.pageX e.pageY获取得到;然后再通过图片绝对定位的left值和top值 和 e.pagex、e.pageY的位置相同就可以了原生js<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   &nb...
    Time:2021年08月30日 07:38:33  Read:205℃
  • javascript实现简单的留言板功能,添加留言和删除留言(前端无接口)
    案例主要核心是创建节点和删除节点,当用户输入留言内容后,点击发布,就会创建一个带有内容的li,当用户点击删除留言时,会删除掉当前所在的li。如果用户没有写留言内容,点击发布,会弹出警告信息。css+js<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta http-equi...
    Time:2021年08月24日 01:59:12  Read:243℃
  • css+js实现微博下拉菜单简单案例效果
    利用ul>li>a创建菜单目标,li里面又包含一层ul>li>a 用作下拉菜单列表。 然后给第二层ul添加display:none隐藏,在js中,当鼠标点击菜单目标a标签时,就显示第二层ul display:block;css+原生js<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">    ...
    Time:2021年08月21日 23:35:34  Read:227℃
  • javascript利用for循环精灵图背景-js技巧
    有些东西学得快,忘记得也快,还不如想起的时候顺手记录下来。比如这个精灵图~!在photoshop中从上往下有规律的排列好位置,然后直接使用for循环依次打印出精灵图中每一张小图片的位置就好了backgroundPosition; 这张精灵图每一张图片的间距是44像素,总共12张小图片,用for循环,索引号是0~11;距离计算就是 索引号*44就可以了。原生js DOM操作精灵图<!DOCTYPE html> <html lang="en"> <head>     <...
    Time:2021年08月19日 20:42:52  Read:215℃
  • javascript实现网页开关灯的效果案例-js技巧
    在网页中通过点击实现开灯和关灯的效果,需要获取body,点击按钮事件,给开灯和关灯设置一个变量flag,当白天时,flag='daytime',当晚上时 flag='night'; 通过if...else来执行开关灯效果。原生js代码<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">   &nb...
    Time:2021年08月18日 06:05:08  Read:246℃
  • javascript代码实现根据时间变换网页背景颜色或图片效果-js技巧
    p{font-size:15px;color:#333;}现实时间一天24小时,当前网页背景会根据时间的变化而改变,比如晚上时,网页的背景颜色会变成黑色,下午时,网页的背景颜色会变成红色等。也可以换成自己喜欢的图片。 获取本机时间的构造函数 new Date(); 小时h  = date.getHours,然后通过if....else实现代码如下原生js实现:<!DOCTYPE html> <html lang="en"> <head>     <met...
    Time:2021年08月18日 05:32:35  Read:251℃
  • 前端小案例旋转菜单,纯CSS制作
    p { font-size: 15px; color: #333; }练习基础小案例旋转菜单,当鼠标点击中心时,菜单就会旋转出现,再次点击时,菜单就会消失~!看起来是不是很炫酷,案例中放的都是不相关的图片;在实际使用中,菜单里可以放一些快捷方式,比如微信,QQ等;此外,在以下代码中还有别的要注意让一个子元素相对于父元素(都有块级元素的属性)居中对齐,需要添加相对定位,子元素添加left:0;right:0;bottom:0;top:0; margin:auto; 比如让一个块级盒子相对于父级盒子进行居中对齐<!DOCT...
    Time:2021年08月09日 17:44:31  Read:210℃
  • 【CSS案例】利用动画实现恐怖阴影的404错误页
    p { font-size: 15px; color: #333; }把背景颜色设置为黑色,字体大小80,白色;再用span往里面写上文字,利用动画keyframes 设置向右走10像素,向上走3像素,把动画时间改成0.08s,看看效果是不是有那种阴森恐怖的感觉了呢,哈哈~!CSS案例<!DOCTYPE html> <html lang="en"> <head>     <meta charset="...
    Time:2021年08月08日 19:00:51  Read:227℃
  • 【CSS案例】实现好看的充电动画特效
    p { font-size: 15px; color: #333; }为了能够把效果做出来,把背景色改为黑色,准备一个充电的主体盒子box,然后用before伪元素做出充电的基本模型;最后用after伪元素在大盒子box里面再创建一个子元素就可以了。让after子元素通过keyframes动画,让它满满填充整个box盒子即可。html+css实例一:<!DOCTYPE html> <html lang="en"> <head>  ...
    Time:2021年08月08日 01:18:24  Read:198℃
排行榜
四种主题风格
广告位 Ad1
关于我们
传授PC资源学习网(www.pc2356.com)个人博客,记录学习前端笔记和日记生活,分享网页源码、软件下载、学习资源等多方面资源网站。
联系我们
意见反馈
举报中心
扫码关注
Copyright@2020-2021 | Powered by©ZBLOG | 传授PC资源分享网 | RSS 订阅 | 站点地图