gyq04551的博客

原创 滑动效果 简单封装(js文件)

// 页面加载完毕事件window.onload = function () { // 滑动效果 执行函数 left_scroll();}//v1位父盒子 v2为子盒子// v1为父盒子的class类名 书写时记得加引号 left_scroll("father","children")function left_scroll(v1,v2) { // 1获取 必要的节点 (即父盒子)

原创 App touch事件(滑动效果)

*{ padding: 0; margin: 0; } .fa{ height: 300px; width: 600px;; border: 1px solid red; margin: 0 auto; overflow: hidden; } ul{ border: 2px solid black; w

原创 css3-颜色渐变 线性 径向

/**/ div{ width: 1000px; height: 100px; border: 1px solid #000; margin:0 auto; margin-top:50px; } /* lin

原创 css3-颜色（RGBA HSLA 透明等）

/**/ .out{ width: 400px; height: 400px; background-color: blue; margin:100px auto; border: 1px solid #000; /*transparent 透明的*/ backgroun

原创 css3-文本阴影效果、凹凸效果

p{ font-size: 150px; font-family: "Microsoft Yahei"; text-align: center; line-height: 150px; font-weight: bold; /* 文字阴影： 水平位移 垂直

原创 css3-私有化前缀（兼容问题）

.box{ width: 1100px; height: 200px; border: 1px solid #000; margin:100px auto; /* 背景渐变*/ /* -webkit-： chrome s

原创 css3-属性、伪类、nth-child选择器

/* 伪类： ：link ：hover :active :visited 伪类的特点：以 ：开头 */ .box{ width: 600px; height: 430px; margin:100px auto; }

原创 css3-宽度 位置 等过渡属性

/*------------------------------宽度过渡-----------------------------------*/ /**/ /*.box{*/ /*/!* 给box添加了过渡，时间为2s*!/*/ /*transition: width 2s,background-color 1s;

原创 css3-多列布局

--> --> --> -->

原创 css3-动画steps等属性

<!--@keyframes move { from{ transform: translateX(0px) rotate(0deg) ; } to{ transform: translateX(500px) rotate(555deg)

原创 css3-边框 圆角 阴影 等属性

右上——》右下--》左下*/-->

原创 css3-背景图片尺寸 裁剪 原点 多背景等属性

/**/ /*background: url(images/baby0.jpg) no-repeat;*/ /* 设置背景图片大小*/ /*长和宽*/ /*background-size:100px 100px;*/ /*background-size: 50% 50%;*/ /*

原创 css3-3D旋转 透视 位移等属性

<!--.rotateX:hover img{ transform:rotateX(360deg); }--> <!--.rotateX:hover img{ transform:rotateY(360deg); }-->

原创 css3-2d变换 旋转 等属性

/*--------------------------------2d变换 之 缩放 scale-----------------------------------*/ /*.box .box2:hover{*/ /*background-color: blue;*/ /*/!* transform:

原创 html5-类名的操作-属性

.box{ width: 300px; height: 100px; margin:10px auto; border: 1px solid #000; } .active{ border-radius: 50%; background-color: pink;

原创 html5多媒体

audio { /*top: 100px;*/ display: block; height: 100px; width: 500px; margin: 0px auto; /*text-align: center;*/ backg

原创 html5表单

/**/ /*form{*/ /*width: 100%;*/ /*/!* 最大宽度*!/*/ /*max-width: 640px;*/ /*/!* 最小宽度*!/*/ /*min-width: 320px;*/ /*margin:0 a

原创 html5-Dom操作

.box{ width: 300px; height: 100px; margin:10px auto; border: 1px solid #000; } // va

原创 html5 标签特性

原创 html5 标签特性

原创 jquery 多库共存

//-------------------------------多库共存 放弃使用权---------------------------------- jQuery(function () { //打印版本号。// console.log($.fn.jquery); //让1.11.1放弃$的使用权

原创 jquery的动画 显示 隐藏 效果 停止

div{ width: 300px; height: 300px; display: none; background-color: pink; } //------------------------------动画之显示和隐藏-----------

原创 jquery的样式操作，类操作（添加 删除 css）

div { width: 100px; height: 100px; background-color: pink; } .current { background-color: red; } $(functi

原创 jquery和jsDom的区别和转换

//----------------------------jquery中的Dom对象和js中的dom对象区别和联系----------------------// //入口函数 $(document).ready(function(){ //jquery对象是一个数组。数组中包含着原生JS中的DOM对象。 var j

原创 jquery获取标签中的属性值 并且赋值

//---------------------------获取标签中的属性值 并赋值----------------------------------------------- jQuery(document).ready(function () { //val(); 获取标签中的value属性的值。带有参数是赋值(类比js中的value属性)

原创 jquery节点的操作 创建 删除 复制

添加li 我是土著li //-------------------------------创建节点----------------------------// //1.类似于js中的document.getElement.creatElement("li"); console.log($("我是li标签>"));

原创 jquery事件的绑定 解绑 触发 对象

//------------------------事件绑定与解绑的几种方法------------------------------------------ //这种绑定事件的方法是不会层叠的。 // $(document).click(function () { // alert(1

原创 jquery属性操作 添加属性

$(function () { //获取元素，绑定属性 var jqinp = $("input").eq(0); var jqinp2 = $("input:checkbox"); var jqbtn = $("button"); jqbtn.click(function (

原创 jquery选择器

//--------------------------------基本选择器----------------------------------------------------------------- //入口函数 jQuery(document).ready(function () { //三种方法获取jquery对象，然后用css

原创 jquery坐标值操作 获取与赋值 offset等

body { height: 5000px; } .box1 { width: 300px; height: 300px; position: relative; margin: 10px; overflow: auto;

原创 认识jquery 入口函数 和$区别

//-------------------------------什么是jquery------------------------------------ //原生js // window.onload = function () { // var btn = document.getElementsByTagN

原创 js事件对象event pageY screenY clientY

Title //-----------------------------事件体验-------------------- //点击页面的任何部分 document.onclick = function (event) { //兼容写法 event = event || window.event;//

原创 js冒泡体验跟取消

Title .box1 { width: 500px; height: 500px; background-color: pink; } .box2 { width: 300px; height: 300px;

原创 js浏览器区域 宽高 可视宽高 client家族等

Title//---------------------------client家族---------------------- //clientWidth和clientHeight var box = document.getElementsByTagName("div")[0]; //不包括margin和borde

原创 js缓动框架(封装)

Title//-------------------------缓动框架封装(回调函数)------------------ //参数变为3个 function animate(ele,json,fn){ //先清定时器 clearInterval(ele.timer);

原创 js缓动动画及其封装

Title div { width: 100px; height: 100px; background-color: pink; position: absolute; left: 0; } 运动到200运动到400

原创 js滚动事件scroll家族

Title//-----------------------滚动事件------------------ //基本语法 window.onscroll = function () { console.log(1); }//---------------------scrollWid

原创 js动画基本原理和简单封装

div { width: 100px; height: 100px; background-color: pink; position: absolute; } //-------------------------动画的基本原理--------------------

原创 js的scroll的封装

Title //需求：封装一个兼容的scroll().返回值是json，用scroll().top获取scrollTop //需求：封装一个兼容的scroll().返回值是json，用scroll().left获取scrollLeft window.onscroll = function () {// var json = scroll();//

原创 js的offset家族属性

Title div { width: 100px; height: 100px; padding: 10px; margin: 100px; background-color: pink; border: 10px solid #