会员
周边
众包
新闻
博问
闪存
赞助商
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
安然(o'~'o)
Powered by
博客园
博客园
|
首页
|
新随笔
|
联系
|
订阅
|
管理
2018年12月27日
JS实现省市联动效果
摘要: 实现的效果为:当选择一个省的时候,会自动出现该省下的市级 效果图如下:
阅读全文
posted @ 2018-12-27 20:30 安然(o'~'o)
阅读(202)
评论(0)
推荐(0)
编辑
2018年12月24日
使用数组封装图片实现轮播图
摘要: 下列实例是将轮播图所需要的图片封装在一个数组里,通过遍历实现图片的循环播放,并通过setInterval函数控制时间间隔。 HTML布局如下: CSS布局如下: JS代码如下:
阅读全文
posted @ 2018-12-24 22:50 安然(o'~'o)
阅读(718)
评论(0)
推荐(0)
编辑
2018年12月14日
JS实现小图放大轮播效果
摘要: JS实现小图放大轮播页面效果入下(图片为优行商旅页面照片): 实现效果:图片自动轮播,鼠标移入停止,移出继续轮播点击下方小图可以实现切换 步骤一:建立HTML布局,具体如下: 其中div为图片轮播区域,li用于放置小图 步骤二:CSS布局 通过定位使小图显示在下方,此时轮播区域显示的为第一张图片 步
阅读全文
posted @ 2018-12-14 21:40 安然(o'~'o)
阅读(4149)
评论(0)
推荐(0)
编辑
JS实现图片放大镜
摘要: 将一个小图放置在一个小盒子里,当鼠标在小盒子里移动时,出现一个移动块,右侧出现一个大盒子,显示出小盒子中移动块所在区域的等比例放大的图片内容。需要实现的效果如下: 基本实现思路为:右侧大盒子为一个可视区域,有左侧小盒子中的图片的等比例放大图片,通过计算图片需要移动的距离来显示出想要放大的内容,超出部
阅读全文
posted @ 2018-12-14 21:04 安然(o'~'o)
阅读(3672)
评论(1)
推荐(0)
编辑
2018年12月9日
Bootstrap网格
摘要: 首先了解一下,什么是网格? 在平面设计中,网格是一种由一系列用于组织内容的相交的直线(垂直的、水平的)组成的结构(通常是二维的)。它广泛应用于打印设计中的设计布局和内容结构。在网页设计中,它是一种用于快速创建一致的布局和有效的使用HTML和CSS的方法。 Bootstrap包含了一个响应式的、移动设
阅读全文
posted @ 2018-12-09 21:25 安然(o'~'o)
阅读(139)
评论(0)
推荐(0)
编辑
JavaScript基本概念
摘要: 一、JavaScript是一种专为与网页交互而设计的脚本语言,由下列三个不同的部分组成: ECMAScript,由ECMA-262定义,提供核心语言功能 文档对象模型(DOM),提供访问和操作网页内容的方法和接口 浏览器对象模型(BOM),提供与浏览器交互的方法和接口 二、标识符 所谓标识符,就是指
阅读全文
posted @ 2018-12-09 20:45 安然(o'~'o)
阅读(199)
评论(0)
推荐(0)
编辑
2018年12月2日
前端面试经典题目(HTML+CSS)二
摘要: 1、浏览器页面由哪三层构成,分别是什么,作用是什么? 构成:结构层、表示层、行为层 分别是:HTML、CSS、JavaScript 作用:HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能与业务。 2、行内元素有哪些?块级元素有哪些? 空(void)元素有那些
阅读全文
posted @ 2018-12-02 20:56 安然(o'~'o)
阅读(219)
评论(0)
推荐(0)
编辑
2018年11月29日
CSS实现太极图(1个div实现)
摘要: 使用一个div实现太极图的步骤如下: HTML部分: 第一步,结合border实现左黑右白的正方形,加上圆角、阴影。代码如下; 效果如下: 第二步,通过伪类,实现一个一个白色的圆形,定位好位置。同时,利用box-shadow:0 200px 0 #000;实现同样大小的圆,放好。 先后实现的效果如下
阅读全文
posted @ 2018-11-29 22:24 安然(o'~'o)
阅读(3616)
评论(0)
推荐(1)
编辑
CSS实现太极图(3个div实现)
摘要: 使用三个div实现太极图的步骤如下: HTML部分 第一步,画一个宽高为300px的圆,并为其加上阴影(为了看起来有立体感) /*animation:rotation 2.5s linear infinite; -webkit-animation:rotation 2.5s linear infin
阅读全文
posted @ 2018-11-29 21:55 安然(o'~'o)
阅读(3350)
评论(0)
推荐(1)
编辑
2018年11月26日
纯CSS实现3D照片墙
摘要: HTML部分: CSS部分: 效果如下(倒影的实现方法已在CSS部分用蓝色标记出来):
阅读全文
posted @ 2018-11-26 22:00 安然(o'~'o)
阅读(3387)
评论(1)
推荐(1)
编辑
下一页