随笔分类 -  jQuery

制作手风琴插件
摘要：1，第一步：先用 jQuery 实现手风琴效果 2，第二步，把 jQuery代码封装，写成插件，给 jQuery原型添加一个 accordion(手风琴）方法 3，第三步，单独把 封装的 accordion方法放在一个 js 文件，成为一个差价，用的时候，只需要在 jQuery文件之后引入这个 js 阅读全文
posted @ 2019-09-19 17:36 shanlu 阅读(184) 评论(0) 推荐(0)
五角星评分
摘要：案例分析： 1，鼠标经过每个 li , 当前 li 以及前面当前这个 li 前面所有的 li 都变成实心 2，鼠标离开 ul ,所有的 li 都变成空心 3，如果点击了某个 li , 鼠标离开 ul 的时候，点击的这个 li 以及这个 li 之间的所有 li 都变成实心 4，因此 ， 当点击了某个 阅读全文
posted @ 2019-09-18 21:25 shanlu 阅读(399) 评论(0) 推荐(0)
表格删除
摘要：布局： div.wrap > input *2 + table table > thead + tbody thead > tr > th*3 tbody > tr (x4) > td (x3) > a.get 案例分析： 1，点击清空按钮，tbody全部清空，只剩下标题栏 2，点击最后一列删除的a 阅读全文
posted @ 2019-09-18 14:27 shanlu 阅读(191) 评论(0) 推荐(0)
小火箭返回顶部
摘要：布局: <p>返回顶部</p> div. actGotop > a 案例分析: 1,页面滚动, 当超出去1000px 的时候 , 小火箭会渐渐的显示出来( fadeIn) , 如果小于1000,就让小火箭隐藏. 2, 小火箭作为背景图片 (gotop.png) 放在 a 中, 当鼠标移动到 a 链接 阅读全文
posted @ 2019-09-16 14:03 shanlu 阅读(533) 评论(0) 推荐(0)
弹幕效果
摘要：布局： div.boxDom > div. idDom > content > p+input +button jQuery代码： 还可以补充回车键发送： 完整代码： 阅读全文
posted @ 2019-09-15 20:04 shanlu 阅读(158) 评论(0) 推荐(0)
微博发布
摘要：布局： div.box > span+textarea + button + ul 案例分析： 1，在textarea中输入内容 2，获取textarea的值，创建 li 元素添加到 ul 中去 3，li 的内容就是 textarea 的值 jQuer代码： 完整代码： 阅读全文
posted @ 2019-09-15 19:45 shanlu 阅读(210) 评论(0) 推荐(0)
城市选择案例
摘要：布局： h1 select#src-city > option*5 btn-box > button*4 select#target-city 案例分析： 1，点击第一个按钮，左边所有的城市全部移动右边 2，点击第二个按钮，右边所有的城市全部移到左边 3，点击第三个按钮，左边选中的城市全部移到右边 阅读全文
posted @ 2019-09-15 19:03 shanlu 阅读(269) 评论(0) 推荐(0)
音乐导航
摘要：布局： div.nav > ul + div ul > li*9 > a + span div > audio*9 案例分析： 起初，每个小li 中有一个 span 作为它的背景，隐藏在下面（top:60) 当鼠标移到某个小 li 的上方，该小 li 中的 span 会从下往上渐渐显示，(top:0 阅读全文
posted @ 2019-09-15 18:32 shanlu 阅读(448) 评论(0) 推荐(0)
手风琴效果案例
摘要：案例分析： 每张图片的宽度是1200，初始5张图片平均放在1200宽的 box 里面，每张图片所占宽度是240 当鼠标移动到某张图片上方时，该图片宽度变成800，其余图片宽度平均每张100 当鼠标离开 box 时，就恢复到初始状态，所有图片平均每张宽度240 关键代码： 完整代码： 阅读全文
posted @ 2019-09-15 18:04 shanlu 阅读(769) 评论(1) 推荐(1)
京东呼吸灯（轮播图）
摘要：布局： div.slider > ul + div.arrow ul > ll（*8）> a > img div.arrow > span.arrow-left + span.arrow-right 案例分析： 当左箭头一点击，上一张图片渐渐的显示，其他图片渐渐的隐藏 当右箭头一点击，下一张图片渐渐 阅读全文
posted @ 2019-09-15 16:42 shanlu 阅读(352) 评论(0) 推荐(0)
表格全选案例
摘要：布局： div.wrap > table > thead + tbody thead > tr > th *3 (第一个 th 里面是一个 input ) tbody > tr (*3 ) > td *3 (第一个 td 里面是一个 input ） 案例分析： 1，thead中的全选按钮点击，tbo 阅读全文
posted @ 2019-09-15 15:35 shanlu 阅读(372) 评论(0) 推荐(0)
tab栏切换
摘要：布局： div.wrapper > ul.tab + div.products ul.tab > li*4 div.products > div.main*4 div.main > a > img 案例分析： 鼠标移到 tab 栏的上方，对应栏目的 上边框颜色变成红色 并且下面 products 里 阅读全文
posted @ 2019-09-15 11:45 shanlu 阅读(224) 评论(0) 推荐(0)
淘宝精品案例
摘要：案例分析： 1，鼠标移动到左右两边的 li 上面，所对应的中间的图片就会展示出来，其余图片隐藏 2，左边的 li 的索引号是 0-8 , 中间图片 li 的索引号是 0-17 ， 右边 li 的索引号是 0-8 ，但是 右边 li 所对应的图片的索引号是 9-17 ， 要加8 关键代码 完整代码 阅读全文
posted @ 2019-09-14 09:09 shanlu 阅读(483) 评论(0) 推荐(0)
手风琴下拉菜单案例
摘要：案例分析: 点击 span (标题1234), 下面的div 会向下滑动 其他 span 的 div 会隐藏 给所有的 span 注册点击事件, 让当前 span 的兄弟 div 显示出来, 下一个兄弟 nextElemenetSibling 关键代码 完整代码: 阅读全文
posted @ 2019-09-13 16:29 shanlu 阅读(561) 评论(0) 推荐(0)
突出展示案例
摘要：案例分析: 鼠标经过每个li, 所经过的 li 会变亮 (透明度变低) , 其他的 li 会变暗 siblings , 所有的兄弟不包括自己 鼠标离开 wrap ,所有的 li 都会变亮 关键代码: 完整代码: 阅读全文
posted @ 2019-09-13 15:37 shanlu 阅读(259) 评论(0) 推荐(0)
下拉菜单案例
摘要：布局: wrap > ul > li*3 (一级菜单123) wrap > ul > li > a + li*3 (隐藏的) 案例分析: 鼠标经过 , 会显示下拉菜单 鼠标离开, 又会隐藏 关键代码 代码优化: 完整代码 阅读全文
posted @ 2019-09-13 15:19 shanlu 阅读(404) 评论(0) 推荐(0)
jQuery笔记
摘要：<1>隐式迭代：偷偷的遍历，在jQuery中，不需要手动写 for 循环了，会自动进行遍历 $("li"）可以获取所有的 li 元素 <2>大版本分类 1.x版本：能够兼容IE678浏览器 2.x版本：不兼容IE678浏览器 1.x和2.x版本jquery都不再更新版本了，现在只更新3.x版本。 3 阅读全文
posted @ 2019-09-13 14:59 shanlu 阅读(274) 评论(0) 推荐(0)