ul | 易学教程

tab选项卡的实现

阅读更多关于 tab选项卡的实现

tab选项卡的实现会用到原生js的dom操作 html <body> <div id="tab"> <div id="tab_header"> <ul> <li class="seclect">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div id="tab_body"> <div class="dom" style="display: block;"> <ul> <li>1</li> <li>1</li> <li>1</li> <li>1</li> </ul> </div> <div class="dom"> <ul> <li>2</li> <li>2</li> <li>2</li> <li>2</li> </ul> </div> <div class="dom"> <ul> <li>3</li> <li>3</li> <li>3</li> <li>3</li> </ul> </div> <div class="dom"> <ul> <li>4</li> <li>4</li> <li>4</li> <li>4</li> </ul> </div> <div class="dom"> <ul> <li>5</li> <li>5</li> <li>5</li> <li>5</li> </ul> <

事件委托

阅读更多关于事件委托

认真看,每个人都可以看懂的-_-也可以结合js高级程序设计第三版一起看哦～什么是事件委托--官方解释对“事件处理程序过多”问题的解决方案就是事件委托。事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如，click 事件会一直冒泡到 document 层次。也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序下面一句话很重要！很重要！很重要！只要进行了点击就是会有捕获阶段->目标阶段->冒泡阶段三个阶段,和你在哪个阶段去添加事件处理程序无关意思就是只要有点击,都会有着三个阶段,不管是有没有绑定事件事件委托主要是利用了冒泡,假如我用鼠标点击了box2,第三阶段是冒泡阶段 ,会从 id为box2的li标签-->ul-->body-->html-->window 说明我不管是点击box1,box2,还是box3 都会经历 boxn -->ul-->body-->html-->window的过程,所以我们可以在li的上一级ul添加一个事件处理程序,因为event里面会有一个target我们获取获取到目标元素 event.target 和 event.currentTarget有什么区别？ event.target表示的目标元素,事件捕获到最底层的那个元素,event

HTML连载67-手风琴效果、2D转换模块

阅读更多关于 HTML连载67-手风琴效果、2D转换模块

一、手风琴效果 <style> *{ margin:0; padding:0; } ul{ width: 960px; height: 300px; margin:100px auto; border:1px solid red; } ul li { list-style: none; width: 158px; height: 300px; float:left; border:1px solid black; transition-property:width; transition-duration:1s; } ul li img { height: 300px; width: 300px; } ul:hover li{ width: 100px; } ul li:hover{ width: 300px; } </style> </head> <body> <ul> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li><img src="image/play_tennis.jpg" alt=""></li> <li>

轮播的实现

阅读更多关于轮播的实现

　　轮播是学习jquery开始的第二个实现的动效，也是学习时间最久的一个。在实现轮播的过程中总是会遇到各种各样的问题，请教过很多人，也多次问过度娘。今天，也不敢果敢的说，可以马上写好一个轮播。希望是通过随笔的方式，记录下一些思维过程。　　首先是html结构，一个简单的轮播，单张图片无缝轮播，主要分为三大层：div>ul>li，li里面的img图片。　　其次，css样式：div固定住宽高，overflow：hidden；ul的宽度建议是动态获取（下一步会讲是怎么获取）；关于li我习惯使用浮动，让他们依次排列，在ul上要记得清楚浮动（clear：both）。　　重要的是jquery的方法，主要有用到的有animate（），setInterval（），hover（）。在写方法之前，缕清一下动效的逻辑：图片依次循环自右向左滑过，当滑完最后一张时，第一张显示，如此重复。　　1、获取li的个数length和宽度width var len=$('li').length, liWidth=$('li').width, 　　因为是无缝轮播，要实现自然的过渡，我们还得做点什么，当图片滑到最后一张时，怎么样才会很自然的过渡到第一张，这个时候，如果第一张就在最后一张的后面，就可以了，所以，我们需要将第一张clone后append到li的最后 $('li:first').clone()

Vue自带的过滤器

阅读更多关于 Vue自带的过滤器

gitHub地址:https://github.com/lily1010/vue_learn/tree/master/lesson05 http://www.cnblogs.com/lily1010/category/872662.html 一过滤器写法 {{ message | Filter}} 二 Vue自带的过滤器:capitalize 功能:首字母大写 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Vue自带的过滤器</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <script src="../js/vue.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div class="test"> {{message | capitalize}} </div> <script type="text/javascript"> var myVue = new Vue({ el: ".test", data: {

如何用CSS制作横向菜单?

阅读更多关于如何用CSS制作横向菜单?

原文地址： http://www.w3cn.org/article/tips/2005/105.html 介绍很详细的尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原理，我想专门写一篇详细教程会对大家比较有帮助。我们先来看一个菜单的例子，最终效果是: 首页产品介绍服务介绍技术支持立刻购买联系我们然后我们来详细讲解步骤第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> 效果是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： <div class="test"> <ul> <li><a href="1">首页</a><

用CSS制作横向菜单

阅读更多关于用CSS制作横向菜单

尽管在我的网站和文章里都有提到CSS制作菜单的方法，但很多初学者还是不太清楚如何实现，以及实现原理，我想专门写一篇详细教程会对大家比较有帮助。我们先来看一个菜单的例子，最终效果是: 首页产品介绍服务介绍技术支持立刻购买联系我们然后我们来详细讲解步骤第一步：建立一个无序列表我们先建立一个无序列表，来建立菜单的结构。代码是： <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a></li> <li><a href="4">技术支持</a></li> <li><a href="5">立刻购买</a></li> <li><a href="6">联系我们</a></li> </ul> 效果是：首页产品介绍服务介绍技术支持立刻购买联系我们第二步：隐藏li的默认样式因为看起来不是很好看，菜单通常都不需要li默认的圆点，我们给UL定义一个样式来消除这些圆点。当然，为了更好的控制整个菜单，我们把菜单放在一个div里。页面代码变成： <div class="test"> <ul> <li><a href="1">首页</a></li> <li><a href="2">产品介绍</a></li> <li><a href="3">服务介绍</a><

html基础

阅读更多关于 html基础

---恢复内容开始--- html 是一种标记语言，而不是编程语言，它是制作网页的基础语言，主要用于描述超文本语言，主要描述超文本中内容的显示方式 html基本结构 <html> <head> <title></title> </head> <body></body> </html> XHTML和HTML的区别？标记嵌套的使用（严格和不严格）大小写的使用（区分和不区分）引号的使用（属性必须加引号/随意）结束标记（不许省略/可以省略）样式的使用（type/style）定义文字方向文字从右向左 <bdo dir = "rtl"> 往事随风 </bdo> 文字从左向右 <bdo dir = "itr"> 往事随风 </bdo> 设置文字字体大小颜色 <font face = "宋体" size = "3" color = "red"> 以后洒脱 </font> -------> 以后洒脱居中标签 <center> </center> 水平线 <hr> (单标签) 设置段落对齐方式左对齐 <p align = "left"> 以后洒脱 </p> 居中对齐 <p align = "center"> 以后洒脱 </p> 右对齐 <p align = "right"> 以后洒脱 </p> 标题标签 <h1></h1> ...<h6></h6> 列表分类无序列表 <ul>

上次刮刮卡的ul委派写法

阅读更多关于上次刮刮卡的ul委派写法

第一次 ul委派事件失败的了所以用循环写的这次用ul委派写法下面js代码 var ul = document . getElementsByTagName ( "ul" ) [ 0 ] ; var li = document . getElementsByTagName ( "li" ) ; var index = 1 ; var map = { } ; //创建一个对象来保存对应li的透明度 for ( var i = 0 ; i < li . length ; i ++ ) { li [ i ] . className = String ( i ) ; //给每个li加个类名 map [ i ] = index ; 用map对象保存每个对应li的透明度 } ul . onmouseover = function ( e ) { var event = e || window . event ; var target = event . target || event . srcElement ; map [ target . className ] -= 0.35 ; //当事件触发的时候每个对应li的透明度减少 if ( map [ target . className ] < 0 ) { //判断透明度的大小 map [ target . className ]

jQuery温习篇---强大的JQuery选择器

阅读更多关于 jQuery温习篇---强大的JQuery选择器

学习 jQuery 已经有 1 年多的时间了，但是一直由于做 WinForm 程序开发没有经常实践。现在又开始重拾 WebForm 开发。写几篇 jQuery 系列，温习下 jQuery 框架的知识。在 jQuery 出世以来，它取得很大的成就和认同。 JQuery 是一个轻量级的 JavaScript 框架，它的发布版很小仅 16K 左右。它能让你方便简洁的写出漂亮的动画效果、实现各种视觉效果，轻松的处理 JavaScript 的 DOM 数以及 Ajax 的交互行为。它的优点在于轻量级、简单易学、易扩展、跨浏览器和网上拥有大量的 jQuery 插件使用。由于它这一大堆的优点，它已经被微软官方认可加入 VS IDE 中拥有强大的智能提示，并据官方的统计现在至少有 20% 的国际性大网站已经加入 jQuery 作为其脚本。 1 ：首先是 JavaScript 的 DOM 和 jQuery 包装集的区分 1.1: 在 JavaScript 中我们访问的方式是操作 DOM 结构 , 提供的可用方法有： 1: document.getElementById("ID") ：根据 ID 获取 DOM 对象。 2 ： document.getElementsByName("name") ：根据 HTML 标记 name 属性获取一个 DOM 数组。 3 ： document

订阅 ul