![](https://img-blog.csdnimg.cn/20201231234422383.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
javascript
javascript入门
黄大仙No.1
黄大仙
展开
-
js 轮播图中点击小圆圈图片跳到指定图片
html代码(部分)<div class="w"> <div class="main"> <!--焦点图模块--> <div class="focus fl"> <a href="javascript:;" class="arrow-l"><</a> <a href="javascript:;" class="arrow-r".原创 2020-09-13 10:58:28 · 1990 阅读 · 0 评论 -
rem适配方案
文章目录rem适配方案rem实际开发适配方案rem适配方案技术使用(市场主流)技术方案1技术方案2(推荐)rem实际开发适配方案1rem+媒体查询+less技术1.设计稿常见尺寸宽度2.动态设置html标签font-size大小3.元素大小取值方法rem适配方案1.让一些不能等比自适应的元素,达到当设备尺寸发生改变的时候,等比例适配当前设备2.使用媒体查询根据不同设备按比例设置htm的字体大小,然后页面元素使用rem做尺寸单位,当html字体大小变化元素尺寸也会发生变化,从而达到等比缩放的适配r.原创 2020-09-13 10:58:07 · 215 阅读 · 0 评论 -
html 苏宁首页,简单实现
文章目录效果图:0. 下载链接1. 视口标签2. 搜索模块3. banner模块4. 广告模块5.导航栏模块效果图:采用rem+media布局,页面大小会随浏览器窗口大小发生变化0. 下载链接链接:https://pan.baidu.com/s/1K51YENrKnnluvjg5WwIgcw提取码:99991. 视口标签 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-sc.原创 2020-08-24 18:06:50 · 1228 阅读 · 0 评论 -
html 导入的图片的名字可能会影响图片是否显示
今天写网页代码时,碰到个困扰了我好几个小时的问题,只是简单的用img引入了一个图片,结果无论如何就是不显示出来:代码(局部):<div class="ad"> <a href="#"> <img src="upload/ad1.gif" alt="1"> </a> <a href=""> <img src="./upload/ad2.gif" alt=""> </a> <原创 2020-08-24 17:14:46 · 293 阅读 · 0 评论 -
css Less基础
维护css的弊端less介绍Less使用less变量变量名语法规范less编译less嵌套less算数运算维护css的弊端CSS是一门非程序式语言,没有变量、函数、 SCOPE(作用域)等概念CSS需要书写大量看似没有逻辑的代码,CSS冗余度是比较高的。不方便维护及扩展,不利于复用,没有很好的计算能力。非前端开发工程师来讲,往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CS代码项目。less介绍Less( Leaner Style Sheets的缩写)是一门CSS扩展语言,也成为CSS预原创 2020-08-23 18:02:58 · 373 阅读 · 0 评论 -
rem基础
目录1. rem单位介绍2. 媒体查询2.1什么是媒体查询2.2语法规范1. mediatype媒体类型2. 关键字3. 媒体特性4. rem+媒体查询实现元素大小动态变化index.htmlstyle640.cssstyle320.css1. rem单位介绍rem (root em)是一个相对单位,类似于em,em是父元素字体大小.不同的是rem的基准是相对于html元素的字体大小.比如, 根元素(html)设置font-size=12px,非根元素设置 width:2rem,则width..原创 2020-08-23 15:45:40 · 387 阅读 · 0 评论 -
css 什么是em
1em等于父元素的font-size大小的1倍案例<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { font-size: 12px; } p { /*1em等于父元素的font-size*/ width: 10em;原创 2020-08-23 13:10:28 · 499 阅读 · 0 评论 -
html 模拟携程网首页
目录目录架构css/index.css/index.htmljs/index.jscss/normalize.css目录架构css/index.css@font-face { font-family: 'icomoon'; src: url('../fonts/icomoon.eot?8ahhy7'); src: url('../fonts/icomoon.eot?8ahhy7#iefix') format('embedded-opentype'), url(..原创 2020-08-22 21:53:39 · 3619 阅读 · 0 评论 -
flex布局以及原理
一. flex介绍flex是 flexible Box的缩写,意为弹性布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局当我们为父盒子设为flex布局以后,子元素的loat、 clear和 vertical-align-属性将失效.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局采用Flex布局的元素,称为lex容器( flex container),简称容器”。它的所有子元素自动成为容器成员,称为Flex项目( flex item)总结fex布局原理:就是通过给原创 2020-08-20 22:40:50 · 2580 阅读 · 0 评论 -
css 解决网页代码中超链接在移动端点击时出现蓝色高亮的问题
为超链接添加-webkit-tap-highlight-color,把高亮颜色设置为透明即可<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { /*将高亮色更改为透明色*/ -webkit-tap-highlight-color: transpar原创 2020-08-19 14:34:09 · 449 阅读 · 0 评论 -
css 旋转木马简单实现
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 800px; transform-style: preserve-3d; transform: rotateX(-20deg); } secti.原创 2020-08-17 18:47:10 · 523 阅读 · 0 评论 -
css 3d导航栏
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } ul { margin: 200px .原创 2020-08-16 13:21:30 · 419 阅读 · 0 评论 -
css rotate翻转图像案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .box { position: relative; width: 300px; height: 300px; .原创 2020-08-15 17:48:57 · 197 阅读 · 0 评论 -
css 动画3d旋转案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { perspective: 500px; } .box { position: relative; .原创 2020-08-15 17:22:43 · 174 阅读 · 0 评论 -
css 动画 keyframes
动画是CSS3中最具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果.相比较过渡效果,动画可以实现更多变化,更多控制, 连续播放等效果.动画的基本使用:步骤分为两步:1.定义动画2.调用动画一.定义动画(类似定义类选择器)@keyframes move { /*动画开始*/ from { transform: translateX(0px); }原创 2020-08-14 21:03:33 · 542 阅读 · 0 评论 -
css 实现盒子的旋转,缩放,位移
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 200px; height: 200px; background-color: pink; .原创 2020-08-14 18:32:01 · 1533 阅读 · 0 评论 -
js localStorage案例,存储用户名
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="username"><input type="checkbox" name="" id="remember">记住用户名<.转载 2020-08-14 13:27:47 · 324 阅读 · 0 评论 -
js window.localStorage|本地存储数据
window.localStorage生命周期为永久生效,除非手动删除,否则页面关闭也会存在可以多页面共享 (同一浏览器)以键值对的形式存储使用函数功能具体实现存储数据localStorage.setItem(key,value)获取数据localStorage.getItem(key)删除数据localStorage.removeItem(key)清空数据localStorage.clear()要想查看自己存储的数据,...原创 2020-08-14 13:07:35 · 1204 阅读 · 0 评论 -
js sessionStorage本地存储
本地存储特性数据存储在用户浏览器中设置, 读取方便,甚至页面刷新数据不丢失容量较大,sessionStorage约为5M,localStorage约为20M只能存储字符串, 可以将对象JSON.stringify()编码后存储window.sessionStorage特 点生命周期为关闭窗口生命周期为关闭窗口同一窗口下数据共享以键值对形式存储案例:html部分代...原创 2020-08-12 23:27:39 · 1476 阅读 · 0 评论 -
js bootstrap框架如何下载和使用 (详解)
框架,顾名思义就是一套架构,他会基于自身的特点向用户提供一套较为完整的解决方案. 框架的控制权在框架本身, 使用者要按照框架的某种规范进行开发.插件一般是为了解决某个问题而专门存在,其功能单一,并且比较小前端常用的框架有Bootstrap, Vue, Angular, React等. 既能开发PC端, 也能开发移动端.前端常用的移动端插件有swiper, superslide, iscroll等框架: 大而全,一整套解决方案插件: 小而转移, 某个功能的解决方案bootstrap框架使用方法:原创 2020-08-12 22:21:09 · 3157 阅读 · 2 评论 -
js 视频插件zyMedia下载和使用方法
js 视频插件zyMedia使用方法 点击进入下载链接效果图:使用方法:打开zyMedia-master/examples/video.html,查看网页源代码可以看到,要想使用此插件,需要导入zy.media.min.css和/src/zy.media.js, 可以把这两个文件复制到自己写的代码的目录里,然后引入到所需要的代码里,引入之后,复制下面代码到自己的网页里,改成自己需要的视频路径和标题即可原创 2020-08-12 20:45:07 · 2481 阅读 · 1 评论 -
js 两个值得推荐的网页插件网站
插件使用方法: 点击进入一. 轮播图插件链接:https://www.swiper.com.cn这原创 2020-08-12 18:59:30 · 762 阅读 · 0 评论 -
js 利用插件 简单 快速 高效书写轮播图
你还在为轮播图没完成而伤心吗?你还在为轮播图出现的bug而烦恼吗?好消息,特大好消息,利用插件swiper插件方便快速实现轮播图插件地址:https://www.swiper.com.cn/demo/index.html打开页面获取插件点击即可下载解压假设你需要下面的分页器,记住030这个编号打开解压后的文件下的demos下的编号为030的html文件,右击查看网页源代码,将涉及到的css与js引入到你的代码中即可目录里的.min.css与.css的区别在于.min.css是高压文原创 2020-08-12 15:35:26 · 238 阅读 · 0 评论 -
js 移动端轮播图效果(优化后)
一、取消点击事件300ms延迟通过fastclick插件取消取消延迟办法详解二、增加返回顶部按钮,在屏幕移动到一定程度时才会显示index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- 禁止用户缩放屏幕,可以取消点击延迟 <meta name="原创 2020-08-12 14:51:38 · 272 阅读 · 0 评论 -
js 三种解决移动端点击事件默认300ms后才执行的延迟问题
js 解决移动端点击事件默认300ms后才执行的问题原因:手机端访问电脑上的网站可能会需要两指一起放大,或是双击缩小原大小等操作,所以设计手机浏览器的程序员们为点击事件增加了300ms的延迟,即只有点击后无操作超过这300ms,才被人为是点击事件,为了解决这一问题,有以下两种解决方案:法一. 禁止用户缩放屏幕,这样因为300ms延迟是缩放屏幕导致的,禁止缩放屏幕后就不会有延迟只需在head标签里加入以下代码,就可以轻松解决300ms问题 <meta name="viewport" con原创 2020-08-12 13:57:21 · 1572 阅读 · 0 评论 -
js 移动端轮播图效果
效果图index.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="../base.css"> <link rel="stylesheet" href="移动端轮播图.css"> <原创 2020-08-11 22:50:48 · 281 阅读 · 0 评论 -
js 获取元素类名以及添加删除指定类名element.classList.toggle()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .bg { background-color: black; } </style></head><body>&l.原创 2020-08-11 21:29:50 · 1731 阅读 · 0 评论 -
js 拖动盒子 (手机版)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 3000px; } div { position: relative; .原创 2020-08-11 13:59:46 · 180 阅读 · 0 评论 -
js 触摸事件对象
触摸列表说明touches正在触摸屏幕的所有手指的一个列表targetTouches正在触摸当前DOM元素上的手指的一个列表changedTouches手指状态发生了改变的列表,从无到有,从有到无变化e.touches正在触摸屏幕的所有手指的列表e.targetTouches正在触摸当前dom元素的手指列表e.changedTouches原来有现在没有或者原来没有现在有的手指列表当我们手指离开屏幕时,就没有了touches和targetTouches列表但...原创 2020-08-11 13:37:47 · 305 阅读 · 0 评论 -
js 手机触屏事件
触屏touch事件说明touchstart手指在触摸到一个dom元素时触发touchumove手指在一个dom元素上滑动时触发touchend手指从一个dom元素上移开时触发代码示例,主页要在控制台点击下面图标进入手机显示模式<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</...原创 2020-08-11 13:14:06 · 1196 阅读 · 0 评论 -
js 实现筋斗云效果(点击tab栏里面的某个地方,会有图片移动到此地方)
js 实现筋斗云效果animate.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> * { padding: 0; margin: 0; } div {原创 2020-08-11 11:42:07 · 343 阅读 · 0 评论 -
js 实现点击按钮页面滚动到顶部其他位置
animate()<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> body { height: 5000px; } .slider-bar { position: a.原创 2020-08-11 10:28:43 · 1447 阅读 · 0 评论 -
网页设计大作业,仿制品优购页面
按照pink老师讲课的内容,手打的品优购网页品优购网页设计原创 2020-08-11 11:11:49 · 1386 阅读 · 1 评论 -
解决办法:服务器中网页内容修改后,火狐浏览器不能及时更新网页内容
服务器中网页内容修改后,火狐浏览器不能及时更新网页内容该问题是由火狐浏览器从之前缓存中加载内容导致的,因为这样可以节省加载页面的事件,直接从本地加载,所以解决办法就是清理缓存快捷键:ctrl+shift+delete...原创 2020-08-11 08:48:52 · 751 阅读 · 0 评论 -
js 动画函数使用案例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script src="animate.js"></script> //封装了动画函数 <style> .sliderbar { right: 0; .原创 2020-08-11 08:48:38 · 1032 阅读 · 0 评论 -
animate.js
animate.js该函数实现元素的移动效果,obj为要移动的元素,target为移动的距离,向右移动是正数,向左移动是负数.callback是回调函数,当移动结束后,执行此函数function animate(obj, target, callback) { //调用时callback() clearInterval(obj.timer); obj.timer = setInterval(function () { // 缓动动画公式:(目标值-现在的位置) /原创 2020-08-10 07:53:40 · 6418 阅读 · 0 评论 -
js 缓冲动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: absolute; left: 0; width: 100px; hei..原创 2020-08-10 07:53:30 · 169 阅读 · 0 评论 -
js 简单动画
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> div { position: absolute; left: 0; width: 100px; heig.原创 2020-08-10 07:53:18 · 130 阅读 · 0 评论 -
mouseover和mouseenter
事件说明mouseover会冒泡mouseenter与mouseover功能相同,但是不会冒泡mouseleave不会冒泡,与mouseenter对应什么是冒泡原创 2020-08-10 07:53:08 · 79 阅读 · 0 评论 -
offset client scroll
原创 2020-08-10 07:52:58 · 73 阅读 · 0 评论