展开菜单

jquery resize()方法中click会触发两次的解决方法

在 resize() 方法中添加 click 事件,点击一下会触发两次,会导致使用 toggle 类型的方法有异常。 示例: $(window).resize(function(){ $('button').click(function(){ $('p').fadeToggle('fast'); }); }).trigger('resize'); 上面的代码点击一下 button 后,p 标签的内容会显示后立即隐藏,这是因为连续触发了两次的 button 点击。 解决方法是在点击前,先取消 click 事件,然后再继续点击。 ...

jquery避免setInterval setTimeout首次执行延迟的方法

javascript 的 setInterval(fn, delay) 方法和 setTimeout(fn, delay) 方法的作用是按设置的 delay 间隔时间执行 fn 函数,所以首次执行时就会有 delay 时长的延迟,如果不想首次执行有延时,那么就在这两个方法执行前,先执行一次 fn 函数。 setInterval() 方法 var num = 0; var at = function(){ console.log(num++); return at; } setInterval(at, 1000); setTimeout() 方法 ...

jquery判断scroll()是否停止滚动的代码

scroll()函数没有回调函数,没办法直接检测是否停止了滚动,但是可以换个思路,使用 setTimeout 定时器检测滚动状态。 var status = null; //定义一个定时器,默认为空,表示没滚动运 $(window).scroll(function(){ if(status != null){ clearTimeout(status); alert('正在滚动'); } //一直滚动就会一直触发 setTimeout,触了 status 就不等于null,不等于 null 就会一直执行上面那一句 status =...

IE浏览器加载rem自适应网页元素尺寸显示异常

使用rem制作等比例缩放自适应网页,在IE浏览器下会出现页面加载完成后,使用了 rem 单位的网页元素尺寸显示异常的问题。原因是给body标签的 font-size 属性定义了固定大小的默认值,解决方法是把 font-size 属性值设置为 100%,直接删除该属性。 示例: 原代码 body { font:normal 16px/1.875em 'Arial'; } 修改为 body { font:normal 100%/1.875em 'Arial'; } 如果想要给网页定义默认字体大小,又不想影响rem,在bod...

javascript解决Firefox浏览器不支持zoom等比例缩放方法

由于Firefox浏览器不支持CSS3属性 zoom,所以前面jQuery + CSS属性zoom实现web页面等比例缩放的代码不支持火狐浏览器,要兼容Firefox浏览器,目前想到的方法是借且CSS3属性 transform,但是有点麻烦,适合缩放元素少的网页使用。 1、给每一个需要等比缩放的元素添加class="scale" 2、然后使用下面的js代码 (function(doc, win){ var scal = 1, obj = doc.getElementsByClassName('scale'); var res = functi...

javascript判断视频音频是否播放结束的代码

HTML DOM ended 事件在 HTML video(视频)或 audio(音频)播放完成后触发,因此通过监听 ended 事件就可以判断视频或音频是否已经播放完在,然后执行其它操作。 以下代码支持IE9+浏览器。如果是音频则把 HTML 代码改成 audio 标签的内容即可。 HTML代码: <video id="video1" src="upload/video.mp4" poster="upload/poster.jpg" webkit-playsinline="true" playsinline="tr...

自定义HTML5 video标签视频播放器的皮肤样式

自定义HTML5 video标签视频播放器的皮肤样式

HTML5 视频标签 video 在不同浏览器会有不同的控件样式,想要统一 video 视频控件的样式,可以利用 HTML5 Video 的 Api,用 JavaScript 访问 html video api,将其作为控制视频的媒介,就可以实现 video 视频控件皮肤样式的自定义。 jQuery 是如何获取 video 标签的(基础可以跳过) 在原生 javaScript 中使用 getElementById('videoID') 获取 video 标签会得到一个 Dom 对象,在 jQuery 中使用 $("videoID") 会返回一个 jQ...

使用CSS text-shadow实现文字描边效果的代码

通过 text-shadow 属性水平、垂直阴影的偏移值可以实现文字的描边效果,兼容 Chrome 4.0+、IE10+、Firefox 3.5+、Safari 4.0+、Opera 9.6+ 浏览器,加上私有属性前缀,可能兼容的版本还可以提高,不过我没有测试。 网页效果: WWW.NEIRONG.ORG CSS: -o-text-shadow: 1px 0px 0px #f00, 0px 1px 0px #f00, -1px 0px 0px #f00, 0px -1px 0px #f00; color:#fff; -ms-text-shadow...

支持电脑手机端的QQ临时会话链接

腾讯原来的wpa开头QQ在线状态会话链接好像失效了,在QQ推广工具中生成的在线状态链接也好像有问题,但下面两个QQ临时会话链接还可以正常使用,分别对应电脑端和移动端,会直接弹出QQ临时会话窗口。 电脑端: tencent://message/?Menu=yes&uin=10000&Site=http://www.neirong.org 手机端: mqqwpa://im/chat?chat_type=wpa&uin=10000&version=1&src_type=web&web_src=...

CSS文本居中并且两端对齐的样式属性text-align-last

CSS中 text-align:justify; 实现文本两端对齐,最后一行居左;text-align:center; 实现文本居中显示,两端不对齐。 由于 CSS 一个选择器不能使用相同的两个属性,text-align 属性也不能设置两个属性值,所以不能同时使用 justify 和 center 实现两端对齐居中显示。 要想文本两端对齐且居中显示,需要使用 justify 的附属属性 text-align-last,text-align-last 属性规定文本最后一行的对齐方式,如居左、居中、居右,该属性只有在 text-align 属性设置为 justify ...