特效 偏移量 offsetParent用于获取定位的父级元素 offsetParent和parentNode的区别  var box = document.getElementById('box'); console.log(box.offsetParent); console.log(box.offsetLeft); console.log(box.offsetTop); console.log(box.offsetWidth); console.log(box.offsetHeight);…

JavaScript操作BOM 一.window对象: 二.window对象的属性和方法 1.windows对象的常用属性: 语法:window.属性名="属性值" 2.windows对象的常用方法: 语法:windows.方法名() 3.口的特征属性: 4.history对象的方法: 5.location对象和属性: 三.document对象 document对象的常用属性: referrer的语法:document.referrer URL 的语法: document.URLdoc…

一.什么是JavaScript? 网页交互特效的脚本语言. 特效 二.BOM对象 能够使得JavaScript和浏览器进行对话. 主要是使用Window对象进行操作. History对象:历史,可以实现前进后退 back():后退一个页面,返回上级页面 forward():前进一个页面. go(n): if(n==0) 刷新 else if(n>0) 前进n个页面 else if(n…

常用的五个特效的相关知识点见附录(五道例题后有附录哦~): 例一: 1.在某页面中有一个图片和五个超链接,如下图所示: 单击不同的数字超链接显示不同的图片: 图1 图片幻灯片显示效果 提示: (1)默认显示一个图片,五个超链接调用同一个传参函数,参数设置为显示图片的名称. (2)使用"对象名.属性值"或setAttribute()的方式改变图片的名称. JS参照代码如下: <script type="text/javascript"> var num =…

第三章   JavaScript操作BOM对象 一.window对象 浏览器对象模型(BOM)是javascript的组成之一,它提供了独立与浏览器窗口进行交换的对象,使用浏览器对象模型可以实现与HTML的交互. 他的作用是将相关的元素组织包装起来,提供给程序设计人员使用,从而降低开发人员的劳动量,提高设计Web页面的能力. BOM是一个分层结构: Window对象是整个BOM的核心,在浏览器中打开网页后,首先看到是浏览器窗口,即顶层的window对象:其次是网页内容,即document(文档)…

毫无疑问,我们学习JavaScript是为了完成特定的功能.在最初的JavaScript类型系统中,我们已经分析过JavaScript在页面开发中充当着添加逻辑的角色,而且我们知道JavaScript不仅仅包含基本的语法规范.下面我们就重点看一下JavaScript在页面中干的那些事.总的来说,JavaScript在页面端就干两件事:操作DOM与操作BOM (当然了向Server获取数据也是它的工作,不过获取到数据后还是回来干这两件事,大家对JavaScript最直接的印象应该就是各种光怪陆离的…

Javascript网页特效开发技巧 相信很多人跟我一样,做网站开发已经有两到三年了,但大部分时间还是复制别人的代码,虽然能看懂别人的代码,同时也觉得别人写的代码很简单,但自己却写不出来: 我总结了一下我自己,为什么看到javascript是觉得如此的简单,而自己手动去写却无从下手,为此,我写下我自己的经验,以给后人借鉴: 1.看了一百篇关于javascript的文章,每篇文章上写的都差不多.无非就是,数据类型.算法.函数(类-方法).构造函数.原型.原型继承.对象. 而这些只是javascri…

前言 本篇文章是JavaScript基础知识的BOM篇,如果前面的<JavaScript基础知识-DOM篇>看完了,现在就可以学习BOM了. 注意: 所有的案例都在这里链接: 提取密码密码: yvxo,文章中的每个案例后面都有对应的序号. 1. BOM 基本概念 BOM(Browser Object Model):浏览器对象模型,提供了一套操作浏览器的工具. BOM中包含的内容很多,但是有很多东西是用不到的.在BOM中我们需要掌握定时器. 2. window 对象 window对象是一个全局对…

6个JS特效教程,学完即精通   JavaScript特效教程,学完你就能写任何特效.本课程将JavaScript.BOM.DOM.jQuery和Ajax课程中的各种网页特效提取出了再进行汇总.内容涵盖了几乎网页中所有常见的特效实现, 每个实例都极具代表性,对学习前端技术有很大的帮助. 学习地址 https://pan.baidu.com/s/1hkYIysGxq7CEmlzuuJteQg…

6个JS特效教程,学完即精通 JavaScript特效教程,学完你就能写任何特效.本课程将JavaScript.BOM.DOM.jQuery和Ajax课程中的各种网页特效提取出了再进行汇总.内容涵盖了几乎网页中所有常见的特效实现, 每个实例都极具代表性,对学习前端技术有很大的帮助. 学习地址 https://pan.baidu.com/s/1hkYIysGxq7CEmlzuuJteQg…

BOM:Browser Object Model,即浏览器对象模型,提供了独立于内容的.可以与浏览器窗口进行互动的对象结构. Browser对象:指BOM提供的多个对象,包括:Window.Navigator.Screen.History.Location等. 其中Window对象为顶层对象,其他对象都为Window对象的子对象. 目录 1. Window 对象:表示浏览器打开的窗口,包括获取焦点.改变滚动条.设置定时器等等. 2. Navigator 对象:包含浏览器信息.如:获取浏览器名称.…

Vue-Router 页面正在加载特效 如果你在使用 Vue.js 和 Vue-Router 开发单页面应用.因为每个页面都是一个 Vue 组件,你需要从服务器端请求数据,然后再让 Vue 引擎来渲染到页面上. 例如,这里有个用户个人资料的页面. user.vue 文件如下: <template> <div> <h2 v-text="user.name"></h2> <p v-text="user.description&…

疑难杂症 该画廊特效的特点就是前后元素有层级关系. 我想很多人应该看过或者用过这个插件carousel.js,网上也有相关的教程.不知道这个插件的原型是哪个,有知道的朋友可以告诉我. 该插件相对完美,但是实际在项目中使用时却发现了一个令人头疼的bug.如果图片只有三张,旋转过度时会出现如下的交叉紊乱(没发现的多试几次). See the Pen carousel by Zongbin Niu (@nzbin) on CodePen. 分析一下代码会发现,主要是第一个元素的 z-index 问题.…

这是一个使用了CSS3立体效果的强大特效,本特效使用jQuery跟CSS3 transform来实现在用户鼠标按下拖动时,环形图片墙可以跟随鼠标进行3D旋转动画. 效果体验:http://hovertree.com/texiao/jquery/92/ 进去后可以上下左右的拖动图片. 本示例中使用到了CSS3的transform-style 属性,该规定如何在 3D 空间中呈现被嵌套的元素. 默认值: flat继承性: no版本: CSS3JavaScript 语法: object.style.t…

分享一款基于脚jQuery左右滑动切换特效.这是一款鼠标点击左右箭头按钮图片滚动切换,鼠标移到图片上显示透明边框特效.   效果图如下:   废话不多说,代码奉上!   html代码: <div class="bodyCon08"><!--学员--> <div class="students"> <div id="four_flash"> <div class="flashBg&qu…

一.什么是BOM.什么是DOM BOM即浏览器对象模型,主要用了访问一些和网页无关的浏览器功能.如:window.location.navigator.screen.history等对象. DOM即文档对象模型,针对HTML(或XML)文档的API(应用程序编程接口).描绘的一个层次化的节点树,开发人员可以添加.修改和删除页面的某一部分. 二.细说BOM对象 1.window对象 window对象表示浏览器的一个实例,同时也是ECMAScript 规定的 Global 对象.(Global :所…

一:DOM 文档对象模型(DOM)是表示文档(比如HTML和XML)和访问.操作构成文档的各种元素的应用程序接口(API) DOM是HTML与JavaScript之间沟通的桥梁.   DOM下,HTML文档各个节点被视为各种类型的Node对象. 每个Node对象都有自己的属性和方法,利用这些属性和方法可以遍历整个文档树. 由于HTML文档的复杂性,DOM定义了nodeType来表示节点的类型,有12种节点类型.   节点类型 描述 子节点 1 Element 代表元素 Element, Text…

BOM是browser object model的缩写,简称浏览器对象模型.先看看下面这张图 window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象. 通过图可以看出 平时经常用到的一些对象都是BOM对象. 下面将一一为您介绍 这些子对象的用途. 一  window对象 window对象除了是BOM中所有对象的父对象外,还包含一些窗口控制函数. JavaScript中的任何一个全局函数或变量都是window的属性.如下代码中的全局变量sTest…

包含js,jquery,css,html5特效,源代码 本文地址:http://www.cnblogs.com/roucheng/p/texiao.html 2017新年快乐特效 jQuery最新最全版本下载 CSS3实现手机移动端触屏向上拖动的提示箭头动画 jQuery+HTML5弹出创意搜索框层 html5手机端的点击弹出侧边滑动菜单代码 纯css3艺术文字样式效果代码 纯css3手机页面图标样式代码 jQuery自动与手动图片切换效果下载 纯css3天气动画场景特效 HTML5填充颜色的f…

效果展示:http://hovertree.com/texiao/js/35/ 数字采用漂亮的糖果皮肤设计 效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content=&qu…

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向. 效果展示 http://hovertree.com/texiao/jquery/83/ 效果图如下: 完整HTML代码如下: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http…

纯css3 3D立方体模块,鼠标触碰,模块炸开,大立方体中套小立方体 效果展示 手机扫描二维码体验效果: 效果图如下: 源码下载:http://hovertree.com/h/bjaf/0qmul8gc.htm 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /><meta name="viewport" content="width=…

基于CSS属性animation动画制作,效果流畅弹性十足 效果展示 http://hovertree.com/texiao/css3/32/ 源码下载:http://hovertree.com/h/bjaf/fo1jlmhi.htm 效果图如下: 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <meta name="renderer" co…

HOLOLENS 扫描特效 及得出扫描结果(SurfacePlane) 要求只扫出地板和墙, 由于地板和墙面积较大 扫描结果 HOLOTOOLKIT老版本点在参数调节PlaneFinding.FindPlanes(meshData, snapToGravityThreshold, MinArea); //MinArea是重点 //由0.025f调整为1.0public float MinArea = 1.0f;//0.025f; 其它的是设定扫描结查最少需要的地板数和wall,(扫描时间默认最少…

看到一个在地图上的特效,就是标注当前位置之后,图标一直在跳动,那效果看着比较得劲,就自己写了个图标跳动的jsjs代码: setTimeout("jump()",5); var t=0,a=10,v=t*a,s=30,updown=true;// s路程,a加速度,t时间,updown判断上升还是下降 function jump(){ if(t<=0){ updown=true; }else if(t*t*a>=s){ updown=false; } if(updown){…

一.BOM 1.操作浏览器的一些方法 (浏览器对象模型) 2.window是is中的顶级变量,是一个全局的变量,所有人都可以访问到它,基本 的方法和属性 (document,alert,console.log,这些东西都是window的),由于他太常用可以省略不写,全局变 量和全局函数是window的一个属性和方法   3.window.onload=function(){ [入口函数] 事件会在页面加载完成后,以及页面中的所有图片都加载完才开始执行 } img标签会加载,而图片不会被加载,是为…

浏览器对象模型(Browser Object Model,BOM):浏览器为js提供的对象集合. 1 windows对象 windows对象:表示浏览器的框架以及与其相关的内容,比如滚动条和导航栏图标等等.或者说windows对象就代表浏览器本身.windows对象是个全局对象,他不需要使用名称访问自己的属性和方法. //下面的代码本质是相同的 alert("hello!"); window.alert("hello!"); windows对象的某些属性也是对象.这…

BOM操作 //浏览器对象模型 opener=window.open(页面的url,打开方式) opener.document.body.style.background="red";//把打开的页面背景颜色变成红色,涉及跨域问题 //方法打开一个新的页面,如果打开url为空则打开一个空白页面,如果打开方式为空则默认打开方式 window.close()// 火狐不兼容,关闭当前页面 window.navigator.userAgent//获取浏览器信息 window.location…

引言Cocos2d-x引擎中有很多Action,这样可以方便的让开发者调用相应的Action去完成一些动作,例如:移动,弹跳,淡入淡出等.可在实际的开发过程中,由于游戏的需要,显然地,引擎自带的Action是完全不够用的,很多时候都需要我们自己去写.今天我就来分享一个让精灵和粒子绕着圆角矩形运动的实例,细讲一下实现过程(仅凭个人想法实现,如有其他更好的方法,欢迎交流分享). 效果该实例类似天天爱消除等系列游戏中的按钮特效: 实现方法刚开始本来考虑自己定义一条圆角矩形的路径,即建一个自己的动作模块…

需求描述 需要实现类似QQ中对联系人的操作:向左滑动,滑出删除按钮.滑动超过一半时松开则自动滑到底,不到一半时松开则返回原处. 纯js实现 使用了h5的touchmove等事件,以及用js动态改变css3的translate属性来达到动画效果: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewp…