前端学习
77314
在读本科生,互相学习,互相交流!
展开
-
jquery操作与滚动条相关操作
1.返回顶部按钮实现 用到两个函数,和一个属性,scroll()函数检测滚动条事件,通过scrollTop()得到滚动条离页面顶部的距离,文档内高度而不是,滚动条上的高度,点击按钮设置文档scrollTop的值为0,即可返回顶部。赋值下边代码,替换.top为按钮类即可。$(function(){$(window).scroll(function(){ var t=$(this).s原创 2016-09-09 16:43:49 · 512 阅读 · 0 评论 -
json相关知识
1.json全称为Javascript Object Notation,即javascript对象标记法。 1.json全称为Javascript Object Notation,即javascript对象标记法。 2.json的语法规则十分简单,可称得上“优雅完美”,总结起来有: 数组(array)用方括号(“[]”)表示。 对象(Object)用大括号表示。 名原创 2016-09-08 17:46:14 · 251 阅读 · 0 评论 -
jquery ajax
$.ajax() 接收参数为一个对象,键值对形式,键值对表 2. $.ajaxPrefilter() 在调用$.ajax()前对其选项进行修改 3. $.ajaxSetup();这个函数能设置参数是相对于去不ajax请求的代码如下$("button").click(function(){ $.ajaxSetup({url: "demo_ajax_load.txt"原创 2016-09-08 19:49:58 · 224 阅读 · 0 评论 -
js轮播图
近日,想写一些页面练习前面所学的东西,因为经常在极客学院看视频教程,所以一时兴起就仿照极客学院官网,制作了一个简单的页面,实现了基本的前端页面,及动画效果。其中一个轮播图算是有点难度的,故而总结下,加深记忆。/*interval:对应的是自动切换的延时imgwidth:对应轮播图,每个图片的大小container:顶层容器banner_list:包含轮播图的父级容器buttons:可选参数原创 2016-09-21 20:01:21 · 229 阅读 · 0 评论 -
中英文切换导航
总结学到的一些新的特效使用css3 及jquery两种方法实现中英文切换导航。 css3版:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>中英文切换导航条</title> <style> *{ padding: 0;原创 2016-09-21 20:13:05 · 687 阅读 · 0 评论 -
jquery 随鼠标移动的导航条
新学的炫酷特效,分享下,源代码如下:<!doctype html><html lang="en"> <head> <meta charset="UTF-8" /> <title>首页</title> <style> * { padding: 0; margin原创 2016-09-21 20:27:06 · 459 阅读 · 0 评论 -
瀑布流三部曲之css3实现
以前学习瀑布流没有总结过,今天偶然看到,做个笔记,记录下,方便以后查阅。<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3实现瀑布流效果</title> <style> .container {原创 2016-09-21 20:53:34 · 300 阅读 · 0 评论 -
瀑布流三部曲之javascript实现
javascript 瀑布流布局,实现原理,是通过javascript动态的对每个图片盒子进行布局,虽然比之css3相对复杂,但其方便动态加载图片,实现滚动加载效果。 代码如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>javascript瀑布流</title> <link r原创 2016-09-21 21:16:03 · 297 阅读 · 0 评论 -
瀑布流三部曲之jquery
jquery简化了javascript实现,html 和css部分代码与http://blog.csdn.net/qq_14886653/article/details/52613455 javascript实现瀑布流相同,所以不再给出。下面给出js代码:$( window ).on( "load", function(){ // 调用waterfall函数 waterfall()原创 2016-09-21 21:29:34 · 214 阅读 · 0 评论 -
js ajax使用
AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是非常常用的技术,我今天使用两种方法实现ajax调用。1.函数式//参数分别为//url => 请求地址//method => 请求方式(get/post)//data => 传递的数据//success =>成功时回调函数//failed=>失败时回调函数functio原创 2016-09-08 15:32:58 · 413 阅读 · 0 评论 -
js对cookie的相关操作
js对cookie的相关操作1.设置cookie 根据传递参数设置cookie,参数为cookie的名字和值,过期时间为6个月,可以自己设置//设置cookiefunction setCookie(cookiename,cookievalue){ //cookie过期时间 var expireDate = new Date(); expireDate.setMonth(原创 2016-09-08 13:27:43 · 251 阅读 · 0 评论 -
js实现兼容性事件绑定函数
事件分为dom0级事件和dom2级事件,html事件处理。 1.html事件处理<input type="button" vlaue="点我" onclick = "clickbtn();"/>上面这种形式就称为html事件处理,将时间耦合在html中不推荐使用。不符合前端规范。 2.dom0级事件处理btn.onclick = function(){//btn为dom元素 //todo原创 2016-09-10 14:57:04 · 337 阅读 · 0 评论 -
css3 shadow使用
CSS3阴影可以让我们很简答的设置文本或盒子的阴影。CSS提供了两个CSS属性,text-shadow和box-shadow,下面详细说明下:1.text-shadow 文本阴影text-shadow: h-shadow v-shadow blur-radius color|none|initial|inherit;/*h-shadow : 水平阴影的位置(必须)v-shadow : 垂直阴影原创 2016-09-10 16:15:38 · 255 阅读 · 0 评论 -
@font-face使用
1.下载需要的图标文件,一般需要4个字体文件,提供一个网址:https://icomoon.io/#icons(网上还有很多)。下载到字体文件后会得到一个压缩包,里面有需要的东西,可以查看里面的style.css获得详细用法。下面是我的方法: 1.html实体+font 首先得定义@font-face{ font-family:myfont;//这个可以自定义 src:url(原创 2016-09-09 15:42:18 · 498 阅读 · 0 评论 -
css3 gradient 渐变使用
CSS3渐变分为线性渐变和径向渐变,具体见下代码,可以复制完整代码在浏览器中打开看效果:<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>渐变</title> <style> *{ margin: 0; pa原创 2016-09-10 18:17:15 · 308 阅读 · 0 评论 -
js事件代理
js事件代理可以方便我们多个同组对象添加统一事件,简化代码,事件代理使用的是事件冒泡特性(事件会随着子父级层次向外传递),点击子元素触发事件后在父元素获取,通过事件的目标对象确定具体触发的子元素。js原生事件绑定,兼容方法见我的博客另一篇文章:http://blog.csdn.net/qq_14886653/article/details/52495000简单例子,解释下js事件代理<!DOCTYP原创 2016-09-11 16:32:32 · 355 阅读 · 0 评论 -
关于跨域的总结
因为浏览器的同源策略导致,不同域名之间无法访问,故而产生了一些规避的方法,今天学习了下,做下总结,加深记忆。1.使用iframe标签进行跨域操作,原理解析:iframe框架标签拥有src属性,而其本身拥有访问外部页面的功能,我们可以通过iframe访问外部连接,载入之后以iframe为桥梁获取数据。具体见下面例子://前提条件// a.test.com 访问 b.test.com/test 这原创 2016-09-12 22:15:54 · 254 阅读 · 0 评论 -
js,jquery中获得窗口尺寸
Javascript:网页可见区域宽: document.body.clientWidth网页可见区域高: document.body.clientHeight网页可见区域宽: document.body.offsetWidth (包括边线的宽)网页可见区域高: document.body.offsetHeight (包括边线的高)网页正文全文宽: document.bod原创 2016-09-06 23:09:58 · 177 阅读 · 0 评论 -
不知道大小的图片在盒子中垂直居中
1.使用display:table-cell<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><style type="text/css">div { display:table-cell; height:300p原创 2016-09-22 22:04:33 · 983 阅读 · 3 评论 -
js数组
javascript数组javascript数组有两种声明方法一种为:构造器声明 var array = new Array();(不推荐),另一种是直接声明 var array = [];javascript数组可以进行许多操作,可变性很强。更新或增加元素,我们可以使用索引来更新和增加数组中的元素,如果索引值小于数组长度,进行更新,如果索引值大于数组长度进行增加,如果索引与数组长度的差值大于1,原创 2016-09-28 15:59:56 · 392 阅读 · 0 评论