ZhangXD_BLOG-CSDN博客

原创 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&gt

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&amp

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