input多图上传并即时显示的代码

以下代码经过Firefox、Chrome浏览器测试没有问题,其余浏览器未作测试。 HTML代码: <div id="billList"> </div> <div class="uploadBtn"> <div class="btn"> <p>点击上传</p> <p>票据凭证</p>...
Web前端开发 / / 3074次阅读

判断滚动到指定位置的javascript代码

经常会用到,判断浏览器窗口是否滚动到指定id的区域。 javascript代码: function isScrolledIntoView(el) { var elemTop = el.getBoundingClientRect().top; var elemBottom = el.getBoundingClientRect().bottom; var isVisible = (elemTop...
Web前端开发 / / 3617次阅读

关闭当前浏览器选项卡javascript代码

Firefox火狐浏览器默认情况下,windows.close()对于非window.open的页面无效,需要windows.close()生效需要修改浏览器的配置,即在firefox浏览器的地址栏输入:about:config然后找到dom.allow_scripts_to_close_windows;把false改为true,但是这对于网站来说,不可能去修改用户的浏览器设置的,因此还是要通过前端代码解决。 既然Fi...
Web前端开发 / / 7342次阅读

通过js获取当前页面url的信息

在web前端制作中,可以通过javascript获取当前网页url的相关信息,整理如下: 1、设置或获取对象指定的文件名或路径 window.location.pathname 2、设置或获取整个URL为字符串 window.location.href 3、设置或获取与URL关联的端口号 window.location.port 4、设置或获取URL的协议部分 windo...
Web前端开发 / / 12810次阅读

CSS3 Flexbox布局快速入门教程

Flexbox 是是 CSS3 引入的新的布局模式,全称是 flexible box (意思是“灵活的盒子容器”)。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强...
Web前端开发 / / 4189次阅读
CSS3 Flexbox布局快速入门教程

老牌滚动时间轴jQuery插件Timelinr

jquery.timelinr.js是一款老牌时间轴插件,可以制作水平和垂直时间轴效果,并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。 引用js文件: <script src="js/jquery-1.x.x.min.js"></script> <script src="js/jquery.timelinr-0.9.x.js"></...
Web前端开发 / / 5482次阅读
老牌滚动时间轴jQuery插件Timelinr

解决使用overflow:scroll;样式在苹果ios上滚动卡顿

给元素使用overflow:scroll;后在苹果手机浏览器上滚动时会卡顿,解决方法是: 在overflow:scroll;滚动的容器中增加样式: -webkit-overflow-scrolling: touch; 或者给body增加: body {overflow-x: hidden} 如果body和html使用了height: 100%;就把height: 100%;去除掉。 另外:...
Web前端开发 / / 9768次阅读

html form表单input使用disabled后提交不能获取表单值

form表单输入框input设置disable属性提交后,得不到该输入框的值,解决该类问题可以参考下面两个方法: 方法一: 使用readonly带替代disabled,即把 disabled="disabled" 修改为 readonly="readonly" 二者区别: disabled不能接收焦点,使用tab键时将被跳过,可能不是successful的;...
Web前端开发 / / 4732次阅读