原生JS实现苹果菜单

原生JS实现苹果菜单的相关文章

原生js写的一个弧形菜单插件

弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 1 var defaultPra = { 2 mainMenuId: "ArcMenu",//主菜单id 3 menuBoxId:"menuBox",//菜单包裹id 4 position: "",//弧形菜单 5 customPosition:"0

原生js+css实现二级伸缩菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>原生js实现二级伸缩菜单</title> <style> *{ margin:0; padding:0; } ul,li{ list-style: none; } .closed{ display: block; width: 200px; ba

原生JS封装创建多级菜单函数

手写一个使用原生JS封装的多级菜单的函数,满足以下几点需求. 子类层级不确定,可根据数据自动生成多级菜单. 操作便捷,只需传入一个HTML标签. 缺点: 需要满足特定的数据结构 废话不多说,展示代码.先展示数据代码,注意,使用此封装函数需要满足此数据结构. var data = [{ id: 1, address: "安徽", parent_id: 0 }, { id: 2, address: "江苏", parent_id: 0 }, { id: 3, addre

常用原生JS兼容写法

在我们前端开发中,经常会遇到兼容性的问题,因为要考虑用户会使用不同的浏览器来访问你的页面,你要保证你做的网页在任何一个浏览器中都能正常的运行,下面我就举几个常用原生JS的兼容写法: 1:添加事件方法 addHandler:function(element,type,handler){  if(element.addEventListener){//检测是否为DOM2级方法   element.addEventListener(type, handler, false);  }else if (e

原生JS编写图片切换效果和点击按钮的样式变化

这两天更进一步的了解了JS,老师让我们用原生的js编写图片切换和改变点击按钮样式,就是让我们学会怎么去把一个问题拆分,怎么将一个大问题拆分成许多的小问题,再用函数封装起来.比如一个点击按钮,让其点击时背景色发生改变,点击另一个时,上一个按钮要变回原来本有的颜色:这个问题用jquery,一行代码就搞定,但是用原生js就得分三个部分来考虑: 1.添加改变背景的样式. 2.怎么获取到除了当前点击的按钮以外其他的兄弟节点. 3.怎么去除按钮的样式属性. 也讲了事件委托,实现了可以删除新添加的元素的功能.

蓝鸥原生JS：js的历史及JavaScript的优缺点

蓝鸥原生JS:js的历史及JavaScript的优缺点 蓝鸥零基础学习HTML5-html+css基础 http://11824614.blog.51cto.com/11814614/1852769 JS介绍 js的历史 在上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司. 由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言.你没看错,这哥们只用了1

关于JS（原生js+jq）中获取、设置或者删除元素属性和获取元素值

一.JS获取.设置或者删除元素属性 原生js: $("要获取属性class/id名").getAttribute("属性"); $("要设置属性class/id名").setAttribute("属性","属性值"); $("要删除属性class/id名").removeAttribute("属性"); jq: $("要获取属性class/id名"

利用原生JS实现网页1920banner图滚动效果

内容描述:随着PC设备硬件性能的进步和分辨率的不断提高,现在主流网站逐渐开始采用1920banner图,为适应这一趋势,博主设计了1920banner图的滚动效果,代码利用了原生JS实现了1920banner图的切换效果,并针对低分辨率电脑设备进行了适配,实现了JS代码与HTML代码的完全分离,符合w3c的标准使用规范,希望能给各位开发者朋友以帮助和参考.如发现有缺陷和不足,欢迎大家予以指正,如有更好的意见或解决方法,可在评论区交流互动.一下为代码内容: <!DOCTYPE html> <

原生JS写的ajax函数

参照JQuery中的ajax功能,用原生JS写了一个ajax,功能相对JQuery要少很多,不过基本功能都有,包括JSONP. 调用的方式分为两种: 1. ajax(url, {}); 2. ajax({}); 调用的方法参照JQuery的ajax,只是 不需要写$.ajax ,只需要写 ajax 就可以了. 代码如下: !function () { var jsonp_idx = 1; return ajax = function (url, options) { if (typeof url