- 博客(215)
- 资源 (8)
- 收藏
- 关注
原创 swiper-居中属性
这一节主要介绍swiper当中的居中属性。 这个居中是指将我们浏览的当前页面进行居中显示,当我们使用分组显示的时候效果比较明显。首先还是要按照第一节的内容完成一个基础的swiper页面。<div class="swiper-container"> <div class="swiper-wrapper"> &...
2016-07-04 21:17:41 10689
原创 Swiper-如何让swiper页面分组显示
本节讲解如何让swiper页面分组显示。有时候一个屏幕当中只显示一个页面并不能满足我们的开发需求,在swiper当中就包装了一个屏幕显示一组页面的方法,只需要在swiper页面的初始化当中添加一条属性即可。 第一步我们依然是编写一个基础的swiper页面。<div class="swiper-container"> <div class="sw...
2016-07-04 21:16:50 7354
原创 Swiper-页面布置
首先我们要搭建一个基础的swiper页面。当然事先不要忘记引用下载好的框架文件。这一章我们添加了设置容器的宽、高 <!doctype html><html> <head> <title>在slide之间加上间隙</title> <meta charset="utf-8"&
2016-07-04 21:16:02 1539
原创 Swiper-页面垂直滚动样式
首先按照第一节课的内容,将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。便于我们确认页面的垂直滚动,以及垂直滚动下导航的样式。在外部容器当中加入翻页导航。<div class="swiper-container"><div class="swiper-wrapper">...
2016-07-04 21:15:05 3263
原创 Swiper-添加了翻页导航功能组件
上一节我们实现了一个基本的滑动页面,除了滑动什么功能都没有,那么这节课我们就要在页面当中添加其他的功能属性了。 首先按照上节课的内容,将一个基本的swiper页面实现。然后在初始化的js代码当中添加属性。 当然事先不要忘记引用下载好的框架文件。我们先添加翻页导航的功能组件。在外部容器当中加入翻页导航。<div class="swiper-container">&...
2016-07-04 21:14:24 1167
原创 Swiper的使用
swiper是一个移动端的页面滑动框架,我们可以使用这个框架来编写自己的简历。swiper当中除了页面滑动意外,还提供了其他各种各样的功能组件,供我们使用。以及方法和回调函数。我们先实现一个基本的swiper页面,只有翻页功能的页面。首先我们要先引用框架文件。swiper.css 和 swiper.js<link rel="stylesheet" href="swiper.css...
2016-07-04 21:13:14 1193
原创 fullpage框架的使用
滑动鼠标滑轮,滚动屏幕 第1节-滑动鼠标滑轮,滚动屏幕 body{ margin: 0; padding: 0; } .section{ text-align: center; font-size: 50px;
2016-07-04 21:12:15 2178 1
原创 jQuery-链接api实现星座运势和手机号归属地查询
连接api 做一个星座运势查询。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>星座运势查询-api</title> <script src="jquery
2016-07-01 09:02:18 1010
原创 jQuery--jQuery动画、animate
1.隐藏和显示hide();隐藏 show();显示 slideDown(), slideUp(): 只会改变元素的高度 fadeIn(), fadeOut(): 只改变元素的透明度 toggle(): 切换元素的可见状态: 如果元素时可见的, 则切换为隐藏; 如果元素时隐藏的, 则切换为可见的. slideToggle(): 通过高度变化来切换匹配元素的可见性. fadeTo(): ...
2016-06-27 21:27:47 325
原创 jQuery--jQuery创建元素、包装集的处理
1.jquery创建元素(三种方法)多个css样式:$('获取元素').css({'属性名':'属性值','属性名':'属性值'});例子:<body><button id="btn1">添加一</button><button id="btn2">添加二</button><button id=&quo
2016-06-27 21:26:19 356
转载 jQuery全屏滚动插件FullPage.js
jQuery全屏滚动插件FullPage.js中文帮助文档API文章目录简介主要功能兼容性使用方法1、引入文件2、HTML3、JavaScript配置1、选项2、方法3、回调函数如何获取七牛最近改版了网站,弄成全屏滚动的特效,真的很炫,于是查看其源代码,发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,
2016-06-26 17:54:40 493
转载 jQuery Easing 使用方法及其图解
从jQuery API文档中可以知道,jQuery自定义动画的函数.animate( properties [, duration] [,easing] [, complete] )有四个参数: properties:一组包含作为动画属性和终值的样式属性和及其值的集合duration(可选):动画执行时间,其值可以是三种预定速度之一的字符串("slow","normal", o
2016-06-26 17:52:28 8316
原创 jQuery--jQuery和DOM对象互相转化、选择器
1. jQuery的简介是一个JavaScript函数库2. jQuery的优势轻量级 强大的选择器 出色的DOM操作封装 可靠的事件处理机制 出色的浏览器兼容性3. jQuery的使用(1.12版本)<script src="jquery.min.js"></script>4.jQuery对象和DOM对象(1)jQuery对象转为DOM对象jQ...
2016-06-22 15:26:47 807
原创 javascript-ajax的使用
index.html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax请求服务器</title></head><body>
2016-06-22 15:25:54 295
原创 javascript--Cookie的使用、案例刀塔传奇
Cookie的使用1、定义:是一种以文件(Cookie文件)的形式保存用户数据信息。2、写入Cookie格式:document.cookie="关键字=值[;expires=有效时间]"例子://存cookie function saveCookie(key, content) { // "zhang" "123" va...
2016-06-22 15:25:11 502
原创 javascript--全选、取消全选、反选
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>全选、取消多选、反选</title> <style type="text/css">
2016-06-22 15:24:31 306
原创 javascript--javascript表单处理
Javascript表单处理1、javascript事件onclick-----鼠标点击onchange-------文本内容或下拉菜单中的选项发生改变onfocus-----获得焦点onblur------失去焦点onMouseOver------鼠标滑过onMouseOut-----鼠标离开onMouseMove-------鼠标移动onLoad------网页文档加载(...
2016-06-22 15:23:18 303
原创 javascript--贪食蛇(完整版-逻辑思路)
逻辑思路:创建表格,目的画线分割 创建地图div,让蛇在上面移动 创建所有的块,蛇头、身体、食物创建的蛇头、身体、食物div,添加到地图中 蛇头、身体、食物随机产生坐标 设置蛇头的初始方向 设置按键改变蛇头方向 开启定时器,自动移动蛇头 4.食物判断是否吃到食物(蛇头的left和top等于食物的left和top) 碰撞则随机产生食物(随机坐标) 5.身...
2016-06-22 15:21:45 7001
原创 javascript--爱奇艺网站首页(轮播图)
实现一个爱奇艺网站首页的轮播图: <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>爱奇艺导航</title> <style type="text/css&
2016-06-14 08:54:32 4127 2
原创 javascript--键值或按钮控制div移动、轮播
1、在屏幕添加四个按钮,上下左右,来控制一个div的移动 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>点击按钮操作上下移动</title></head>
2016-06-14 08:53:42 762
原创 javascript--DOM对象实例集合
在HTML中添加3个对象1.按钮 显示2.按钮 隐藏3.DIV当点击显示时候div显示当点击隐藏div隐藏<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>div显示隐藏</title&
2016-06-14 08:52:28 437
原创 javascript--JS面向对象、其他定义类和对
JS面向对象、其他定义类和对象的方法1、面向对象三大特征:封装、继承、多态封装:用函数把重复调用的代码封装起来集成:子类集成父类的一些特性多态:函数名相同、参数不同2、闭包:类内部的函数fun1()能够调用类fun()内部的属性,进行改写Function fun(){ Function fun1(){}}2、其他定义类和对象的方法:(1)类的定义,通...
2016-06-14 08:49:54 359
原创 javascript--动态添加表格(三种方法)
题目:用户输入行和列,动态创建表格: 方法一:createElement(),创建标签(缺点:每创建表格在原来的基础上新建表格) <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态添加表格-createEl
2016-06-07 22:23:02 1532
原创 javascript--函数的定义和使用
函数的定义和使用:1、 语法: 语法:function 函数名(参数){ 函数体; return变量;---------------想要输出函数值,则需要加return}调用:函数名(); 2、 定义: (1) 通过函数可以把重复使用的代码封装例子: var m=1; function fu...
2016-06-07 22:21:18 314
原创 javascript--字符串、字符数组
字符串和字符数组1、 定义:字符串的核心是字符数组。不等于字符数组 (1) 定义字符串例子:定义:var str = "hello world";输出:Document.write(str); (2) 定义字符数组定义一:var str1 =["h","e","l","l","o","","w",&q
2016-06-06 21:24:12 588
原创 javascript--冒泡排序、数组函数
1、 冒泡排序例子:for (var i = 0; i < stu.length - 1; i++){ for (var j = 0; j < stu.length - i - 1; j++) { if (stu[j] < stu[j + 1]) { var s = stu...
2016-06-03 20:47:44 411
原创 javascript--数组
数组1、定义:一组数组,相当于一组数量2、 语法一:var stu=new Arry(10);--------数组的长度stu.length为10 var[0]=99;-------下标从0开始var[1]=45;……………var[9]=120; 语法二: Varstu=[99,23,45,37]; 3、举一个例子,实现输出所有数组、求最大...
2016-06-02 21:06:15 364
原创 javascript--星座查询
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>星座判断</title></head><body>2.实现星座的判断<
2016-06-01 22:37:03 3205
原创 javascript--if语句、循环语句
If语句和循环语句1、‘’’分支语句(if语句) 语法一:if语句If(条件){语句块} 语法二:if和elseIf(条件){ -----------------条件判断执行:可用ture/false或者1/0 } else{语句块}例子:判断学生成绩:<script>var a = prompt("请输入学生成绩");...
2016-06-01 22:35:40 851
原创 javascript-js基础语法
js基础语法xamp:强大的建站集成软件包分为:apache、mysql、php、perl1、 在HTML中作用:(1) 可以控制DOM(2) 可以控制CSS(3) 用户交互(4) 事件编程(5) 网络通讯例子一:弹框:方法1:<input type="button"value="弹框" onCli...
2016-05-31 20:23:55 524
原创 HTML5+CSS3-动画、视频、音频、canvas
1、 动画 语法:第一步@-webkit-keyframes 命名{ From{-------初始位置 }To{--------------结束位置 }}注意:设多个,则用百分比,如:@-webkit-keyframes 命名{ 0%{-------初始位置 }10%{--------------中间位置...
2016-05-31 20:22:44 2096
原创 HTML5+CSS3-边框背景图、多背景图、CSS选择器、网络字体、边框背景图片、过渡、放大、旋转
边框背景图片1、 background-origin:设置背景图片的起始原点background-origin:border-box;------背景图片从边框开始显示background-origin:padding-bax;-----背景图片从内边距开始显示(默认)background-orign:content-box;------背景图片从内容区域开始显示 例子:...
2016-05-31 20:20:55 1911
原创 HTML5+CSS3-背景渐变、多栏布局column
(13)背景渐变语法:background:-webkit-gradient(linear,0 0,0 100%,from(#fff),to(#000));第一个参数:渐变类型---线性渐变第二个参数:分别为 X,Y轴方向渐变的起始位置第三个参数:分别为 X,Y轴方向渐变的终止位置第四个参数:设置起始位置的颜色第五个参数:设置终止位置的颜色 (14)column--...
2016-05-31 20:20:00 1639
原创 HTML5+CSS3-文本对齐方式、文本修饰线、设定文本大小写、文本阴影、盒子阴影、盒子倒影、渐变色彩
(6)text-align-----文本对齐方式A、text-align :Left;左对齐B、text-align :right;右对齐C、text-align :center;居中D、text-align :justify;内容两端对齐(仅火狐有效果)E、文字从左到右Direction:rtl;--(文档流变成从右向左)text-align :start;(内容对齐...
2016-05-31 20:19:06 1677
原创 HTML5+CSS3-浏览器前缀、css新特征、文本溢出、新的颜色设定、透明设定、文本填充色、文本边框色、圆角
CSS31、 不同的浏览器需要不同的前缀(浏览器的私有属性)前缀 浏览器-webkit chrome/safair-moz firefox-ms IE-o opera2、新特性 (1):CSS选择器 (2):新的颜色制式和透明设定...
2016-05-31 20:14:23 1545
原创 HTML5+CSS3-文档类型声明、新增标签
H5+CSS31、 约等于HTML+CSS3+javascript+api(接口)2、 新认识:兼容性、实用性和用户优先化繁为简3、 文档类型声明:<!doctypehtml>-------大写也可以<html><head><meta charset=”utf-8”>-----字符编码设置<title&g...
2016-05-31 20:13:37 1655
原创 CSS基础知识-五(CSS定位、左右布局方法)
一、CSS定位1、Float:left / right /none;------左浮动/右浮动/无2、Position:absolute;----绝对定位3、Position:relative;-----相对定位(top/right/bottom/left)注意:父级(大div) 子级(子div)1、 Relelative
2016-05-31 20:12:18 3289 1
原创 CSS基础知识-四(边框样式、caption、表格居中、边框宽度和高度、id和class的区别、Div+CSS布局)
表格:1、 边框样式:Border-collapse:collapse(合并) / separate(默认,两个边框);-----设置边框是否重叠Border-spacing:20px;-----表格列之间的距离如:table{ width:600px; height:200px; border:1pxsolid #
2016-05-31 20:11:31 4863
原创 CSS基础知识三(列表编号 )
一、列表编号(ul中设置)List-style-type:none;------不显示编号List-style-type:decimal;------数字编号List-style-type:circle;------空心圆List-style-type:disc;------实心圆List-style-type:square;-----方块List-style-type:u
2016-05-13 19:40:19 792
原创 CSS基础知识二(段落设置CSS效果、图片边框、div和span区别、CSS控制背景、CSS控制链接)
1、 段落设置CSS效果:(1) 对齐方式Text-align:left / right / center / justrfy(两端对齐)(2) 垂直对齐方式Vertical-align:top / bottom / middle (3) 内边距padding(内容和边框的距离)分开写:Padding-top:20px;Padding
2016-05-11 22:46:47 648
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人