随笔分类 -  jq

div设置overflow-scroll滚动之后，jq获取其子元素的offset.top出现问题。
摘要：先上个图： 布局很简单，左右超过屏幕的部分自行滚动。 1. html 2.css 说明重要点： （1） container设置绝对定位top和bottom都要设置，再设置padding-top就能除开头部返回栏铺满整个屏幕。 （2） 左右两个盒子设置overflow-y:auto和高度100%，这样 阅读全文
posted @ 2018-07-12 16:37 站住，别跑 阅读(5415) 评论(2) 推荐(0)
抛开jQuery，拾起原生JS的DOM操作
摘要：常用的JS DOM操作与jQuery的对比 jQuery用多了，还是需要来熟练熟练原生JS的操作，不然写JS都快离不开jQuery了 目录 "1. 获取DOM" "2. 创建DOM" "3. 添加DOM" "4. 删除DOM" "5. 添加class" "6. 是否存在class" "7. 删除cl 阅读全文
posted @ 2018-06-25 09:21 站住，别跑 阅读(2107) 评论(0) 推荐(1)
jq实现百度图片移入移出内容提示框上下左右移动的效果
摘要：闲来无聊，看到百度图片hover的时候提示框的效果，遂想试一试自己能否实现。 百度图片hover的效果： 需求： 1. 当鼠标从图片上部移入的时候，提示框从上部移到正常位置。从上部移出的时候，提示框从正常位置移到上部。 2. 当鼠标从图片左部移入的时候，提示框从左部移到正常位置。从左部移出的时候，提 阅读全文
posted @ 2018-06-05 11:26 站住，别跑 阅读(1306) 评论(0) 推荐(0)
jq实现数字增加或者减少的动画
摘要：效果图： 1.HTML： 2.JS： 可以自行设定每次增加的大小 问题：1。要是需要用背景图片中的数字替换当前显示的数字，并且有上下滚动的效果怎么做？ background-position 2。实现了问题1的效果之后，如果要最大的位数最先停止动画，后面的位数依次停止怎么做？或者开始动画的时候，最后 阅读全文
posted @ 2018-02-26 17:13 站住，别跑 阅读(901) 评论(0) 推荐(0)
jq模仿雨滴下落的动画
摘要：效果如图： 实现思路：定时器每隔x秒生成宽高、下落速度（即动画执行时间）、left随机的div。 1.CSS： 2.JS: 本来最开始想计算雨滴left和下落高度的最大值，以免出现滚动条，但是后来想直接body加个overflow：hidden不是更好么，省去多余的代码，效果还一样。 除了用JS实现 阅读全文
posted @ 2018-02-26 12:32 站住，别跑 阅读(910) 评论(0) 推荐(0)
jq实现碰到边缘反弹的动画
摘要：先上效果图： 录出来有点卡顿的赶脚，实际上还是挺顺畅的。 1.HTML: 2.CSS: 3.JS: 这里只是简单的效果，由此可引发多个问题： 1）如果多个方块出现，页面会不会卡顿呢？ 2）如果要实现多个方块碰撞之后改变运动的位置，这个怎么做呢？ 3）方块的初始位置能不能随机呢？ 4）多个方块的速度怎 阅读全文
posted @ 2018-02-24 10:29 站住，别跑 阅读(1093) 评论(5) 推荐(0)
textarea自适应高度，div模仿textarea可编辑实现自适应高度，placeholder使用图标
摘要：1.textarea自适应高度，placeholder使用图标 自适应高度，有很多种办法： 1）jq： 效果图： 2）使用插件：autosize，flexText等。。。插件肯定比一两句话的jq强大的多，或者是：这篇文章 1.1 textarea的placeholder使用图标： 只要在placeh 阅读全文
posted @ 2018-01-25 17:57 站住，别跑 阅读(1488) 评论(0) 推荐(0)
js,mui,jq 操作基本的DOM
摘要：一。HTML 二。CSS 1.获取宽高： jq：$("div").height()； js:document.getElementsByTagName("ul")[0].getElementsByTagName("li")[0].offsetHeight； mui:获取第一个li高度就是mui("u 阅读全文
posted @ 2017-11-30 17:34 站住，别跑 阅读(2804) 评论(0) 推荐(0)
点击出现蒙层，然后点击空白地方蒙层消失(阻止冒泡)
摘要：要做一个这样的蒙层很简单。但要怎样实现点击除蒙层子节点之外的空白地方蒙层消失呢？ 思路是： 蒙层添加点击隐藏事件，然后为蒙层子节点的设置阻止冒泡的事件。这样就能达到效果； 简单效果： 阅读全文
posted @ 2017-11-13 15:04 站住，别跑 阅读(3665) 评论(0) 推荐(0)
点击旋转，再点击恢复初始状态
摘要：今天遇到要做一个点击 + 然后开始旋转动画后变成 x 具体实现如下 1.HTML 2.CSS 3.JQ 效果： 阅读全文
posted @ 2017-11-13 14:48 站住，别跑 阅读(2313) 评论(0) 推荐(0)
一个简单的加载动画，js实现
摘要：简单效果图： html: css: js: 动画执行速度与定时器每次间隔时间自己可以按需求修改。如果两个的速度不一样的话，反正测试的时候，当当前浏览器页面最小化，然后再最大化时动画就会有问题，搞不清楚原因 阅读全文
posted @ 2017-05-11 21:00 站住，别跑 阅读(3742) 评论(0) 推荐(0)
banner无缝滚动动画，支持左右按钮和小点
摘要：HTML： CSS： 注意：左按钮与右按钮和ol使用的垂直水平居中不支持ie8以下。可参考我的另外篇文章：http://www.cnblogs.com/zjjDaily/p/5952723.html js: 阅读全文
posted @ 2017-05-11 13:05 站住，别跑 阅读(958) 评论(0) 推荐(0)
banner轮播无缝滚动 jq代码
摘要：HTML： JQ: 说明：如果是上下无缝滚动，就用margin-top;如果是左右滚动就用margin-left，然后是获取每个li的宽度. 阅读全文
posted @ 2017-01-18 11:19 站住，别跑 阅读(852) 评论(0) 推荐(0)
截取字符串指定内容，并用*号代替
摘要：jq: 结果： 1**8 阅读全文
posted @ 2017-01-12 10:49 站住，别跑 阅读(855) 评论(0) 推荐(0)
textarea 字体限制，超出部分不显示并及时显示还剩字体个数
摘要：1）HTML 2)JQ: 阅读全文
posted @ 2016-12-06 14:55 站住，别跑 阅读(2437) 评论(0) 推荐(0)
实现在某一指定位置的div在窗口滚动到指定位置的时候fixed定位
摘要：HTML： CSS: Jq: 效果：与最初的top值比较： 不与最初的top值比较，直接else： 思路：滑下来的时候，如果此时滚动条到顶部的距离大于最初那个div到顶部的距离的时候就让这个div固定定位； 滑上去的时候，如果此时滚动条到顶部的距离比原来div到顶部的距离的时候就去掉固定定位的属性。 阅读全文
posted @ 2016-10-28 10:36 站住，别跑 阅读(12462) 评论(2) 推荐(1)
关于checkbox全选与全不选的实现与遇到的问题
摘要：HTML: 第一种方法： 本以为这种方法能完成全选与全不选的功能，但是当第一次点击时，能正确全选，再点击也能正确全不选；但是当再次点击的时候，就不能全选与全不选了，点了完全没作用。找不到原因是什么！ 第二种方法： 这种方法就能正确的实现全选与全不选的功能了。这又是为什么呢？ 第三种方法： 1) 2) 阅读全文
posted @ 2016-10-25 11:31 站住，别跑 阅读(2394) 评论(0) 推荐(0)
当input获取倒焦点的时候，获得输入内容
摘要：描述：当用户点击输入框时，获取到他在input里输入的内容 $(this).val()==this.value; $(this).val()是jq的写法，this.value是js原生的写法。两个打印出来的值是一样的。 这样即可及时获取当前用户输入的内容。 还有及时监听：http://www.cnb 阅读全文
posted @ 2016-10-17 09:24 站住，别跑 阅读(638) 评论(0) 推荐(0)
checkbox用图片替换原始样式，并实现同样的功能
摘要：1.结构： 2.css里： 1）设置图片的div绝对定位，调整让它与原始input重合。 2）设置input的宽高与图片的div一样大，这样精确一点。 3）然后设置input：position:relative；再设置它的z-index，让它浮在图片那个div的上面。 4）调整两个的位置，让之重合。 阅读全文
posted @ 2016-10-15 14:27 站住，别跑 阅读(6926) 评论(1) 推荐(2)