点击分享至微信、空间、QQ和微信的javascript代码。 HTML代码部分： <ul> <li class="wb"> <a href="javascript:void(0);" onclick="shareUrl('weibo');">微博</a> </li> <li class="qz"> <a href="javascript:void(0);" onclick="shareUrl('qzone');">QQ空间</a> </li> <li ...

在web前端制作中，可以通过javascript获取当前网页url的相关信息，整理如下： 1、设置或获取对象指定的文件名或路径 window.location.pathname 2、设置或获取整个URL为字符串 window.location.href 3、设置或获取与URL关联的端口号 window.location.port 4、设置或获取URL的协议部分 window.location.protocol 5、设置或获取href属性中在井号“#”后面的分段 window.location.hash 6、...

以下方法基于jQuery，使用前要先引用jquery库文件。 函数代码： function CaoNiMaDeUc(){ $("a").each(function(index, element) { try{ var thishref=$(this).attr("href"); var thisText=$(this).html(); if(thishref.indexOf("uc.cn")>=0){ $(this).replaceWith(thisText); } } catch(e){ ...

HTML代码： <ul id="canvas"> <li> <canvas class="canvas" width="900" height="900"></canvas> <span>70%</span> </li> <li> <canvas class="canvas" width="900" height="900"></canvas> &...

Flexbox 是是 CSS3 引入的新的布局模式，全称是 flexible box （意思是“灵活的盒子容器”）。它决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来。 它之所以被称为 Flexbox ，是因为它能够扩展和收缩 flex 容器内的元素，以最大限度地填充可用空间。与以前布局方式（如 table 布局和浮动元素内嵌块元素）相比，Flexbox 是一个更强大的方式： 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元...

jquery.timelinr.js是一款老牌时间轴插件，可以制作水平和垂直时间轴效果，并且可以进行自动播放。你可以通过参数来控制每次时间轴切换的动画效果。 引用js文件： <script src="js/jquery-1.x.x.min.js"></script> <script src="js/jquery.timelinr-0.9.x.js"></script> HTML结构： <div id="timeline"> <ul id="dates"> &...

给元素使用overflow:scroll;后在苹果手机浏览器上滚动时会卡顿，解决方法是： 在overflow:scroll;滚动的容器中增加样式： -webkit-overflow-scrolling: touch; 或者给body增加： body {overflow-x: hidden} 如果body和html使用了height: 100%;就把height: 100%;去除掉。 另外： 在苹果手机上使用了-webkit-overflow-scrolling:touch;后，可能会导致使用position:fixed;固定定位的元素，随着页面...

form表单输入框input设置disable属性提交后，得不到该输入框的值，解决该类问题可以参考下面两个方法： 方法一： 使用readonly带替代disabled，即把 disabled="disabled" 修改为 readonly="readonly" 二者区别： disabled不能接收焦点，使用tab键时将被跳过，可能不是successful的； readonly可以接收焦点但不能被修改，可以使用tab键进行导航，可能是successful的。 注：只有success...

同一个页面，相同的div元素，要获取这些元素高度最大的值，然后设置指定元素的高度，代码如下： <script> $(function() { var h_max = 0; //定义一个默认变量，并赋值为0，用于比较 $('.ClassName').each(function() { //遍历相同样式名的元素 var h = $(this).height(); //获取每个元素的高度，（可根据需要使用outerHeight、innerHeight） h_max = h > h_max ? h : h_max; //比较获取的元素高度值和默认变...

移动端适配-rem: 认识移动端 做适配方案之前先认识下移动端，熟悉移动端和pc端的区别和特点，才能真正理解做适配的精髓，这里就简单介绍下； 网上找不到主流android设备的数据表，就以iphone为例： 以iphone6为例： 竖屏宽为375，叫做逻辑像素（有的地方叫独立像素）； 竖屏宽的像素750，叫做物理像素，是设备实际的光点个数，要知道屏幕都是由一个一个光点组成的; 像素比（Asset）2x，就是2倍，物理像素/逻辑像素； ppi:像素密度326,实际平方英寸的光点个...

一般是在本地调试cookie，无论使用jquery cookie插件还是js原生态cookie方法，在谷歌浏览器chrome中都不生效，这是什么原因？ 原因是： chrome不支持js在本地操作cookie 据测试，除了chrome浏览器外，其他主流浏览器（ie、firefox等）都支持js在本地操作cookie。 如果是部署到服务器不生效，则可能是浏览器设置成了不支持cookie。 检测当前浏览器是否支持或者Cookie是否被禁用，可以使用以下js代码： var dt = new Date(); dt.setSec...

实现原理很简单，就是通过把浏览器默认的下拉框样式清除，自定义select样式，再把默认的下拉按钮替换为张向右对齐的小箭头图标即可，具体代码如下。 select { /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/ border: solid 1px #000; /*很关键：将默认的select选择框样式清除*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; /*在选择框的最右侧中间显示小箭头图片*/ background: url("ht...