招聘网站设计师要求,广州网站建设推广公司哪家好,网站项目的设计制作,wordpress主题开发 书day01 - jQuery 学习目标#xff1a; 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍
1.1.1 JavaScript 库
…day01 - jQuery 学习目标 能够说出什么是 jQuery 能够说出 jQuery 的优点 能够简单使用 jQuery 能够说出 DOM 对象和 jQuery 对象的区别 能够写出常用的 jQuery 选择器 能够操作 jQuery 样式 能够写出常用的 jQuery 动画 1.1. jQuery 介绍
1.1.1 JavaScript 库
JavaScript库即 library是一个封装好的特定的集合方法和函数。从封装一大堆函数的角度理解库就是在这个库中封装了很多预先定义好的函数在里面比如动画animate、hide、show比如获取元素等。 简单理解 就是一个JS 文件里面对我们原生js代码进行了封装存放到里面。这样我们可以快速高效的使用这些封装好的功能了。 比如 jQuery就是为了快速方便的操作DOM里面基本都是函数方法。 常见的JavaScript 库jQuery、Prototype、YUI、Dojo、Ext JS、移动端的zepto等这些库都是对原生 JavaScript 的封装内部都是用 JavaScript 实现的我们主要学习的是 jQuery。
1.1.2 jQuery的概念
jQuery总体概况如下 : jQuery 是一个快速、简洁的 JavaScript 库其设计的宗旨是“write LessDo More”即倡导写更少的代码做更多的事情。 j 就是 JavaScript Query 查询 意思就是查询js把js中的DOM操作做了封装我们可以快速的查询使用里面的功能。 jQuery 封装了 JavaScript 常用的功能代码优化了 DOM 操作、事件处理、动画设计和 Ajax 交互。 学习jQuery本质 就是学习调用这些函数方法。 jQuery 出现的目的是加快前端人员的开发速度我们可以非常方便的调用和使用它从而提高开发效率。
1.1.3 jQuery的优点
轻量级。核心文件才几十kb不会影响页面加载速度。跨浏览器兼容基本兼容了现在主流的浏览器。链式编程、隐式迭代。对事件、样式、动画支持大大简化了DOM操作。支持插件扩展开发。有着丰富的第三方的插件例如树形菜单、日期控件、轮播图等。免费、开源。
1.2. jQuery 的基本使用
1.2.1 jQuery 的下载
jQuery的官网地址 https://jquery.com/官网即可下载最新版本。 各个版本的下载https://code.jquery.com/ 版本介绍 1x 兼容 IE 678 等低版本浏览器 官网不再更新 2x 不兼容 IE 678 等低版本浏览器 官网不再更新 3x 不兼容 IE 678 等低版本浏览器 是官方主要更新维护的版本 1.2.2. 体验jQuery
步骤
引入jQuery文件。在文档最末尾插入 script 标签书写体验代码。$(‘div’).hide() 可以隐藏盒子。
1.2.3. jQuery的入口函数
jQuery中常见的两种入口函数
// 第一种: 简单易用。
$(function () { ... // 此处是页面 DOM 加载完成的入口
}) ; // 第二种: 繁琐但是也可以实现
$(document).ready(function(){... // 此处是页面DOM加载完成的入口
}); 总结
等着 DOM 结构渲染完毕即可执行内部代码不必等到所有外部资源加载完成jQuery 帮我们完成了封装。相当于原生 js 中的 DOMContentLoaded。不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。更推荐使用第一种方式。
1.2.4. jQuery中的顶级对象$
$是 jQuery 的别称在代码中可以使用 jQuery 代替但一般为了方便通常都直接使用 $ 。$是jQuery的顶级对象相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象就可以调用jQuery 的方法。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srcjquery.min.js/scriptstylediv {width: 200px;height: 200px;background-color: pink;}/style
/headbodydiv/divscript// 1. $ 是jQuery的别称另外的名字// $(function() {// alert(11)// });jQuery(function() {// alert(11)// $(div).hide();jQuery(div).hide();});// 2. $同时也是jQuery的 顶级对象/script
/body/html1.2.5. jQuery 对象和 DOM 对象
使用 jQuery 方法和原生JS获取的元素是不一样的总结如下 :
用原生 JS 获取来的对象就是 DOM 对象jQuery 方法获取的元素就是 jQuery 对象。jQuery 对象本质是 利用$对DOM 对象包装后产生的对象伪数组形式存储。 注意 只有 jQuery 对象才能使用 jQuery 方法DOM 对象则使用原生的 JavaScirpt 方法。 !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srcjquery.min.js/scriptstylediv {width: 100px;height: 100px;background-color: pink;}/style
/headbodydiv/divspan/spanscript// 1. DOM 对象 用原生js获取过来的对象就是DOM对象var myDiv document.querySelector(div); // myDiv 是DOM对象var mySpan document.querySelector(span); // mySpan 是DOM对象console.dir(myDiv);// 2. jQuery对象 用jquery方式获取过来的对象是jQuery对象。 本质通过$把DOM元素进行了包装$(div); // $(div)是一个jQuery 对象$(span); // $(span)是一个jQuery 对象console.dir($(div));// 3. jQuery 对象只能使用 jQuery 方法DOM 对象则使用原生的 JavaScirpt 属性和方法// myDiv.style.display none;// myDiv.hide(); myDiv是一个dom对象不能使用 jquery里面的hide方法// $(div).style.display none; 这个$(div)是一个jQuery对象不能使用原生js 的属性和方法/script
/body/html1.2.6. jQuery 对象和 DOM 对象转换
DOM 对象与 jQuery 对象之间是可以相互转换的。因为原生js 比 jQuery 更大原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。
// 1.DOM对象转换成jQuery对象方法只有一种
var box document.getElementById(box); // 获取DOM对象
var jQueryObject $(box); // 把DOM对象转换为 jQuery 对象// 2.jQuery 对象转换为 DOM 对象有两种方法
// 2.1 jQuery对象[索引值]
var domObject1 $(div)[0]// 2.2 jQuery对象.get(索引值)
var domObject2 $(div).get(0) !DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srcjquery.min.js/script
/headbodyvideo srcmov.mp4 muted/videoscript// 1. DOM对象转换为 jQuery对象// (1) 我们直接获取视频得到就是jQuery对象// $(video);// (2) 我们已经使用原生js 获取过来 DOM对象var myvideo document.querySelector(video);// $(myvideo).play(); jquery里面没有play 这个方法// 2. jQuery对象转换为DOM对象// myvideo.play();$(video)[0].play()$(video).get(0).play()/script
/body/html总结实际开发比较常用的是把DOM对象转换为jQuery对象这样能够调用功能更加强大的jQuery中的方法。
1.3. jQuery 选择器
原生 JS 获取元素方式很多很杂而且兼容性情况不一致因此 jQuery 给我们做了封装使获取元素统一标准。
1.3.1. 基础选择器
$(选择器) // 里面选择器直接写 CSS 选择器即可但是要加引号
1.3.2. 层级选择器
层级选择器最常用的两个分别为后代选择器和子代选择器。
基础选择器和层级选择器案例代码
bodydiv我是div/divdiv classnav我是nav div/divp我是p/pulli我是ul 的/lili我是ul 的/li li我是ul 的/li/ulscript$(function() {console.log($(.nav));console.log($(ul li));})/script
/body1.3.3. 筛选选择器
筛选选择器顾名思义就是在所有的选项中选择满足条件的进行筛选选择。常见如下 :
案例代码
bodyulli多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/li/ulolli多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/lili多个里面筛选几个/li/olscript$(function() {$(ul li:first).css(color, red);$(ul li:eq(2)).css(color, blue);$(ol li:odd).css(color, skyblue);$(ol li:even).css(color, pink);})/script
/body另: jQuery中还有一些筛选方法类似DOM中的通过一个节点找另外一个节点父、子、兄以外有所加强。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srcjquery.min.js/script
/headbodyolli我是ol 的li/lili我是ol 的li/lili classitem我是ol 的li/lili我是ol 的li/lili我是ol 的li/lili我是ol 的li/li/olulli我是ol 的li/lili我是ol 的li/lili我是ol 的li/lili我是ol 的li/lili我是ol 的li/lili我是ol 的li/li/uldiv classcurrent俺有current/divdiv俺木有current/divscript// 注意一下都是方法 带括号$(function() {// 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟$(ol .item).siblings(li).css(color, red);// 2. 第n个元素var index 2;// (1) 我们可以利用选择器的方式选择// $(ul li:eq(2)).css(color, blue);// $(ul li:eq(index)).css(color, blue);// (2) 我们可以利用选择方法的方式选择 更推荐这种写法// $(ul li).eq(2).css(color, blue);// $(ul li).eq(index).css(color, blue);// 3. 判断是否有某个类名console.log($(div:first).hasClass(current));console.log($(div:last).hasClass(current));});/script
/body/html偏重于记忆演示代码略。 案例新浪下拉菜单
!DOCTYPE html
htmlheadmeta charsetutf-8title新浪下拉菜单/titlestyle typetext/css* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}.nav {width: 402px;height: 50px;border: 1px solid #ccc;margin: 200px auto;} .navli {float: left;width: 100px;height: 50px;text-align: center;}.navli:hover {background-color: #FFC0CB;}.navli a {display: block;height: 50px;line-height: 50px;}.dropdown {display: none;}.dropdownli {width: 100px;height: 50px;line-height: 50px;border: 1px solid #FFC0CB;border-top: 0;}/stylescript src./js/jquery-3.5.0.js/script/headbodyul classnavlia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/li /ulscript typetext/javascript$(function() {// 鼠标经过$(.navli).mouseover(function() {$(this).children(ul).show();})// 鼠标离开$(.navli).mouseout(function() {$(this).children(ul).hide();})})/script/body
/html
1.3.4 知识铺垫
jQuery 设置样式
$(div).css(属性, 值) jQuery 里面的排他思想
// 想要多选一的效果排他思想当前元素设置样式其余的兄弟元素清除样式。
$(this).css(“color”,”red”);
$(this).siblings(). css(“color”,””);隐式迭代
// 遍历内部 DOM 元素伪数组形式存储的过程就叫做隐式迭代。
// 简单理解给匹配到的所有元素进行循环遍历执行相应的方法而不用我们再进行循环简化我们的操作方便我们调用。
$(div).hide(); // 页面中所有的div全部隐藏不用循环操作链式编程
// 链式编程是为了节省代码量看起来更优雅。
$(this).css(color, red).sibling().css(color, ); 1.3.5 案例淘宝服饰精品案例 思路分析: 1.核心原理鼠标经过左侧盒子某个小li就让内容区盒子相对应图片显示其余的图片隐藏。 2.需要得到当前小li 的索引号就可以显示对应索引号的图片 3.jQuery 得到当前元素索引号 $(this).index() 4.中间对应的图片可以通过 eq(index) 方法去选择 5.显示元素 show() 隐藏元素 hide() 代码实现:
!DOCTYPE html
htmlheadmeta charsetutf-8title淘宝精品服饰案例/titlescript src./js/jquery-3.5.0.js/scriptstyle typetext/css* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}#box {width: 302px;height: 272px;border: 1px solid pink;margin: 200px auto;}.left {float: left;width: 100px;}.left li {width: 100%;height: 30px;line-height: 30px;text-align: center;border-bottom: 1px solid pink;border-right: 1px solid pink;}.left li:hover {background-color: pink;}.left li:last-child {border-bottom: 0;}#content {float: left;width: 200px;height: 272px;/* overflow: hidden; */}#content div {width: 200px;height: 272px;display: none;}#content .current {display: block;}#content div a img{width: 200px;height: 272px;}/style/headbodydiv idboxul classleftlia href女靴/a/lilia href雪地靴/a/lilia href冬裙/a/lilia href呢大衣/a/lilia href毛衣/a/lilia href棉服/a/lilia href女裤/a/lilia href羽绒服/a/lilia href牛仔裤/a/li/uldiv idcontentdiv classcurrenta href#img src./img/女靴.jpg alt/a/divdiva href#img src./img/雪地靴.jpg alt/a/divdiva href#img src./img/冬裙.jpg alt/a/divdiva href#img src./img/呢大衣.jpg alt/a/divdiva href#img src./img/毛衣.jpg alt/a/divdiva href#img src./img/棉服.jpg alt/a/divdiva href#img src./img/女裤.jpg alt/a/divdiva href#img src./img/羽绒服.jpg alt/a/divdiva href#img src./img/牛仔裤.jpg alt/a/div/div/divscript typetext/javascript$(function() {// 1、鼠标经过左侧的li时$(#boxul li).mouseover(function() {//2、得到当前li的索引号var index $(this).index();//3、让我们右侧的div盒子相应的索引号的图片显示出来就好了// $(#box #contentdiv).eq(index).show()//4、让其余的图片就是其他的兄弟隐藏起来:排他思想// $(#box #contentdiv).eq(index).siblings(div).hide()// 将上面的3 4 合二为一链式编程$(#box #contentdiv).eq(index).show().siblings(div).hide();})})/script/body
/html
1.4. jQuery 样式操作
jQuery中常用的样式操作有两种css() 和 设置类样式方法
1.4.1. 方法1: 操作 css 方法
jQuery 可以使用 css 方法来修改简单元素样式 也可以操作类修改多个样式。
常用以下三种形式 :
// 1.参数只写属性名则是返回属性值
var strColor $(this).css(color);// 2. 参数是属性名属性值逗号分隔是设置一组样式属性必须加引号值如果是数字可以不用跟单位和引号
$(this).css(color, red);// 3. 参数可以是对象形式方便设置多组样式。属性名和属性值用冒号隔开 属性可以不用加引号
$(this).css({ color:white,font-size:20px});
//如果是复合属性则必须采取驼峰命名法如果值不是数字则需要加引号 注意 1css() 多用于样式少时操作多了则不太方便。 2如果是复合属性则必须采取驼峰命名法如果值不是数字则需要加引号
1.4.2. 方法2: 设置类样式方法
作用等同于以前的 classList可以操作类样式 注意操作类里面的参数不要加点。
常用的三种设置类样式方法
// 1.添加类
$(div).addClass(current);// 2.删除类
$(div).removeClass(current);// 3.切换类如果已经存在current类则去除该类如果不存在current类则加上该类
$(div).toggleClass(current);
注意
设置类样式方法比较适合样式多时操作可以弥补css()的不足。原生 JS 中 className 会覆盖元素原先里面的类名jQuery 里面类操作只是对指定类进行操作不影响原先的类名,相当于追加一个类名。
1.4.3. 案例tab 栏切换 思路分析: 1.点击上部的li当前li 添加current类其余兄弟移除类。 2.点击的同时得到当前li 的索引号 3.让下部里面相应索引号的item显示其余的item隐藏 代码实现
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlestyle* {margin: 0;padding: 0;}li {list-style-type: none;}.tab {width: 978px;margin: 100px auto;}.tab_list {height: 39px;border: 1px solid #ccc;background-color: #f1f1f1;}.tab_list li {float: left;height: 39px;line-height: 39px;padding: 0 20px;text-align: center;cursor: pointer;}.tab_list .current {background-color: #c81623;color: #fff;}.item_info {padding: 20px 0 0 20px;}.item {display: none;}/stylescript srcjquery.min.js/script
/headbodydiv classtabdiv classtab_listulli classcurrent商品介绍/lili规格与包装/lili售后保障/lili商品评价50000/lili手机社区/li/ul/divdiv classtab_condiv classitem styledisplay: block;商品介绍模块内容/divdiv classitem规格与包装模块内容/divdiv classitem售后保障模块内容/divdiv classitem商品评价50000模块内容/divdiv classitem手机社区模块内容/div/div/divscript$(function() {// 1.点击上部的li当前li 添加current类其余兄弟移除类$(.tab_list li).click(function() {// 链式编程操作$(this).addClass(current).siblings().removeClass(current);// 2.点击的同时得到当前li 的索引号var index $(this).index();console.log(index);// 3.让下部里面相应索引号的item显示其余的item隐藏$(.tab_con .item).eq(index).show().siblings().hide();});})/script
/body/html1.5. jQuery 效果 jQuery 给我们封装了很多动画效果最为常见的如下
显示隐藏show() / hide() / toggle() ;划入画出slideDown() / slideUp() / slideToggle() ;淡入淡出fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;自定义动画animate() ; 注意 动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行。 jQuery为我们提供另一个方法可以停止动画排队stop() ; 1.5.1. 显示隐藏
显示隐藏动画常见有三个方法show() / hide() / toggle() ;
语法规范如下: 代码演示
bodybutton显示/buttonbutton隐藏/buttonbutton切换/buttondiv/divscript$(function() {$(button).eq(0).click(function() {$(div).show(1000, function() {alert(1);});})$(button).eq(1).click(function() {$(div).hide(1000, function() {alert(1);});})$(button).eq(2).click(function() {$(div).toggle(1000);})// 一般情况下我们都不加参数直接显示隐藏就可以了});/script
/body1.5.2. 滑入滑出
滑入滑出动画常见有三个方法slideDown() / slideUp() / slideToggle() ;
语法规范如下: 代码演示
bodybutton下拉滑动/buttonbutton上拉滑动/buttonbutton切换滑动/buttondiv/divscript$(function() {$(button).eq(0).click(function() {// 下滑动 slideDown()$(div).slideDown();})$(button).eq(1).click(function() {// 上滑动 slideUp()$(div).slideUp(500);})$(button).eq(2).click(function() {// 滑动切换 slideToggle()$(div).slideToggle(500);});});/script
/body1.5.3 淡入淡出
淡入淡出动画常见有四个方法fadeIn() / fadeOut() / fadeToggle() / fadeTo() ;
语法规范如下: 代码演示
bodybutton淡入效果/buttonbutton淡出效果/buttonbutton淡入淡出切换/buttonbutton修改透明度/buttondiv/divscript$(function() {$(button).eq(0).click(function() {// 淡入 fadeIn()$(div).fadeIn(1000);})$(button).eq(1).click(function() {// 淡出 fadeOut()$(div).fadeOut(1000);})$(button).eq(2).click(function() {// 淡入淡出切换 fadeToggle()$(div).fadeToggle(1000);});$(button).eq(3).click(function() {// 修改透明度 fadeTo() 这个速度和透明度要必须写$(div).fadeTo(1000, 0.5);});});/script
/body案例:高亮显示 代码演示
!DOCTYPE html
htmlhead langenmeta charsetUTF-8title/titlestyle typetext/css* {margin: 0;padding: 0;}ul {list-style: none;}body {background: #000;}.wrap {margin: 100px auto 0;width: 630px;height: 394px;padding: 10px 0 0 10px;background: #000;overflow: hidden;border: 1px solid #fff;}.wrap li {float: left;margin: 0 10px 10px 0;}.wrap img {display: block;border: 0;}/stylescript srcjquery.min.js/scriptscript$(function() {//鼠标进入的时候,其他的li标签透明度0.5$(.wrap li).hover(function() {$(this).siblings().stop().fadeTo(400, 0.5);}, function() {// 鼠标离开其他li 透明度改为 1$(this).siblings().stop().fadeTo(400, 1);})});/script
/headbodydiv classwrapullia href#img srcimages/01.jpg alt //a/lilia href#img srcimages/02.jpg alt //a/lilia href#img srcimages/03.jpg alt //a/lilia href#img srcimages/04.jpg alt //a/lilia href#img srcimages/05.jpg alt //a/lilia href#img srcimages/06.jpg alt //a/li/ul/div
/body/html1.5.4 自定义动画
自定义动画非常强大通过参数的传递可以模拟以上所有动画方法为animate() ;
语法规范如下:
代码演示
bodybutton动起来/buttondiv/divscript$(function() {$(button).click(function() {$(div).animate({left: 500,top: 300,opacity: .4,width: 500}, 500);})})/script
/body1.5.5 停止动画排队
动画或者效果一旦触发就会执行如果多次触发就造成多个动画或者效果排队执行。
停止动画排队的方法为stop() ;
stop() 方法用于停止动画或效果。stop() 写到动画或者效果的前面 相当于停止结束上一次的动画。
总结: 每次使用动画之前先调用 stop() ,在调用动画。
1.5.6. 事件切换
jQuery中为我们添加了一个新事件 hover() ; 功能类似 css 中的伪类 :hover 。介绍如下
语法
hover([over,]out) // 其中over和out为两个函数over:鼠标移到元素上要触发的函数相当于mouseenterout:鼠标移出元素要触发的函数相当于mouseleave如果只写一个函数则鼠标经过和离开都会触发它
hover事件和停止动画排列案例(新浪下拉菜单案例优化)
!DOCTYPE html
htmlheadmeta charsetutf-8title新浪下拉菜单/titlestyle typetext/css* {margin: 0;padding: 0;box-sizing: border-box;}li {list-style: none;}a {text-decoration: none;}.nav {width: 402px;height: 50px;border: 1px solid #ccc;margin: 200px auto;}.navli {float: left;width: 100px;height: 50px;text-align: center;}.navli:hover {background-color: #FFC0CB;}.navli a {display: block;height: 50px;line-height: 50px;}.dropdown {display: none;}.dropdownli {width: 100px;height: 50px;line-height: 50px;border: 1px solid #FFC0CB;border-top: 0;}/stylescript src./js/jquery-3.5.0.js/script/headbodyul classnavlia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/lilia href#微博/aul classdropdownlia href私信/a/lilia href评论/a/lilia href我/a/li/ul/li/ulscript typetext/javascript$(function() {// // 鼠标经过// $(.navli).mouseover(function() {// // $(this).children(ul).show();// $(this).children(ul).stop().slideDown(300);// })// // 鼠标离开// $(.navli).mouseout(function() {// // $(this).children(ul).hide();// $(this).children(ul).stop().slideUp(300);// })// 1.事件切换 hover :就是鼠标经过和离开的复合写法// $(.navli).hover(function() {// $(this).children(ul).stop().slideDown(300);// },function() {// $(this).children(ul).stop().slideUp(300);// })// 2.事件切换 hover 如果只写一个函数,那么鼠标经过和离开都会触发这个函数$(.navli).hover(function() {// stop 方法必须写到动画的前面$(this).children(ul).stop().slideToggle();})})/script/body
/html
1.5.7. 案例王者荣耀手风琴效果 思路分析: 1.鼠标经过某个小li 有两步操作 2.当前小li 宽度变为 224px 同时里面的小图片淡出大图片淡入 3.其余兄弟小li宽度变为69px 小图片淡入 大图片淡出 代码实现:
!doctype html
htmlheadmeta charsetutf-8title手风琴案例/titlestyle typetext/css* {margin: 0;padding: 0;}img {display: block;}ul {list-style: none;}.king {width: 852px;margin: 100px auto;background: url(images/bg.png) no-repeat;overflow: hidden;padding: 10px;}.king ul {overflow: hidden;}.king li {position: relative;float: left;width: 69px;height: 69px;margin-right: 10px;}.king li.current {width: 224px;}.king li.current .big {display: block;}.king li.current .small {display: none;}.big {width: 224px;display: none;}.small {position: absolute;top: 0;left: 0;width: 69px;height: 69px;border-radius: 5px;}/style/headbodyscript srcjs/jquery.min.js/scriptscript typetext/javascript$(function() {// 鼠标经过某个小li 有两步操作$(.king li).mouseenter(function() {// 1.当前小li 宽度变为 224px 同时里面的小图片淡出大图片淡入$(this).stop().animate({width: 224}).find(.small).stop().fadeOut().siblings(.big).stop().fadeIn();// 2.其余兄弟小li宽度变为69px 小图片淡入 大图片淡出$(this).siblings(li).stop().animate({width: 69}).find(.small).stop().fadeIn().siblings(.big).stop().fadeOut();})});/scriptdiv classkingulli classcurrenta href#img srcimages/m1.jpg alt classsmallimg srcimages/m.png alt classbig/a/lilia href#img srcimages/l1.jpg alt classsmallimg srcimages/l.png alt classbig/a/lilia href#img srcimages/c1.jpg alt classsmallimg srcimages/c.png alt classbig/a/lilia href#img srcimages/w1.jpg alt classsmallimg srcimages/w.png alt classbig/a/lilia href#img srcimages/z1.jpg alt classsmallimg srcimages/z.png alt classbig/a/lilia href#img srcimages/h1.jpg alt classsmallimg srcimages/h.png alt classbig/a/lilia href#img srcimages/t1.jpg alt classsmallimg srcimages/t.png alt classbig/a/li/ul/div
/body/html1.6. 今日总结
