csx blog

用原生js写的一个下拉框功能插件/***下单框原生js插件* dropdown作为元素class属性的属性值作用在需要添加下拉框效果的元素上*example: dropdown me one two three 四季 春 夏 秋 冬 **/var dropdowns = document.getE

在实际开发中，应用一些微交互、视差效果，可以让页面更加生动。如下面的例子：这个例子中运行了3D transform 的相关知识。具体细节如下分析。1、切图将psd稿上的这个区域切成如下图的3块图片，方便在页面上进行叠加、2、布局给三张图片设置不一样的translateZ（translateZ的值越小，元素大小越小，因为元素远去，我们眼睛看到的就会变小），这样三层图片就形...

JS面向对象之从工厂方式到构造函数一个简单的例子：创建两个对象，每个对象都有各自的属性和方法：上面用面向对象的写法，表示两个对象--小明、小强，可以发现代码重复度很高，就一个名字不一样，别的代码都是一样的。工厂方式工厂方式其实就是函数封装，将多个对象相同部分封装成一个函数（功能）将上面的代码封装成如下：这个封装的过程，就好比是流水线组装产品的过程。所以称为工厂方式。构造函数进一步的。我们来比较我们...

火狐的console控制台可以很方便的测试单行js代码，就像这样：但是在测试一段js代码时并不方便，这是就可以用Scratchpad代码草稿本工具，通过 ctrl+F4 打开窗口，我们可以打开写好的js文件，也可以直接写js，写完也可以进行保存，非常方便。截图如下：

javascript实现省市区三级联动选择的代码（数据为模拟json数据）： select{ width:100px; } 省： 请选择 市： 请选择 区： 请选择 //省 $.getJSON("data/local_P.json",functi

在做移动端的立即购买页面时，点击底部固定栏立即购买按钮需要弹出一个阴影遮罩，在遮罩顶部有一个固定在底部的页面，所以总共是3层页面：最底层浏览页->阴影遮罩页->最上层的立即购买选择规格数量页；效果如下图：在次过程中遇到的一些问题以及解决方案总结如下：问题1：阴影遮罩出现后底部的页面还可以滑动；    解决：在弹出遮罩的js里click事件中，给body加overflow:hidde

要实现input框只能输入正整数，如果检测到输入其他类型的数据就直接为0；代码如下： function NumCheck(t){ var num = t.value; console.log(num); var re = /^\d*$/; //^匹配字符串开始位置 \d 匹配任意一个十进制数字，等价于[0-

实际项目中，需求一个倒计时秒杀功能，每天下午6点后，计算距离第二天上午10点的小时、分钟、秒数，计时到第二天上午10点后开启抢购功能；代码如下： 00 00 00 function leftTimer(year,month,day,hour,minute,second){ var ne

js获取当地时间并且拼接时间格式，在stackoverflow上有人在问，查了资料，各种方法将时间格式改成任意自己想要的样式。    1. var date = new Date(+new Date()+8*3600*1000).toISOString().replace(/T/g,' ').replace(/\.[\d]{3}Z/,''); console.log(date);//

利用offsetTop和scrollTop实现移动端常见的当分类栏移动到顶部时固定位置效果，代码如下： var sub_classify = document.getElementsByClassName('sub_classify')[0]; window.onscroll = function(){ var mTop = sub_classify.offsetTop;

关于弹出层的我的做法：       例如：点击“修改”按钮，弹出弹出框，并将需要修改的信息附到弹出框中；       思路：      1. 点击修改按钮，弹出阴影遮罩，阴影遮罩的样式代码如下： .mask{ width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: fixed; z-index:

1.利用jquery的attr方法实现如下的简单的图片切换效果代码如下： 图片 /* intro */ .intro { width:470px; margin-top: 40px; padding: 25px 19px; border: 1px solid #e6e6e6; background-color:

Document function switch1(img1){ img1.src = 'img/step_c.png'; } function switch2(img1){ img1.src = 'img/step.png'; } empty

我们都知道，现代浏览器可以用sessonStorage和localStorge持久化数据，那么：IE5 ~IE8的浏览器是如何持久化数据的- 用userData BehaviorUser Data：是微软为IE专门在系统中开辟的一块存储空间，所以说只支持Windows+IE的组合，实际测试在2000（IE5.5）、XP（IE6、IE7），Vista（IE7）下都是可以正常使用的。在...