随笔分类 - javascript
js,jquery相关
摘要：那些不错的插件emmetjavascriptCompletions
阅读全文
摘要：在win7下安装与使用1 nodejs官网下载，安装 https://nodejs.org/2 下载最新的 npm，在E:\nodejs\中解压 http://nodejs.org/dist/npm/高级系统设置->高级->环境变量->系统变量 中path中添加 E:\nodejs\新建 NODE_...
阅读全文
摘要：scrollHeight: 获取对象的滚动高度。scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离scrollWidth:获取对象的滚动宽度offsetHeight:获取对象相对于版面或由...
阅读全文
摘要：收藏一下1、判断select选项中是否存在Value=”paraValue”的Item2、向select选项中加入一个Item3、从select选项中删除一个Item4、删除select中选中的项5、修改select选项中value=”paraValue”的text为”paraText”6、设置se...
阅读全文
摘要：今天写一地图的效果，鼠标点击对应的区域，弹出所点击区域的名字。因为设计的区域名字有特殊效果，所以，在点击区域里面套了个标签写上区域名字用来识别，但是这个文字呢不同显示在页面上，所以就给 em 加个了display:block;text-indent:-9999px的样式。用jqueryvar _index = $(this).index(); 获取当前点击的标签对应的名字时，发现在ie8每次获取的标签所在位置都不正确，其它浏览器都正常。百思不得其解，找了很长时间问题，发现，把 text-indent:-9999px样式去掉，这个问题解决了。结论：text-indent:-9999px 这个样式
阅读全文
摘要：SuperScrollorama 是一个用来实现超酷的滚动动画效果的 jQuery 插件。实现的效果有：文字褪色，飞，旋转，缩放，斯马什，针脚，滑动，隐退，反弹，颜色，扔，移动，视差。地址：http://johnpolacek.github.io/superscrollorama/TweenMax.min.jsFlash业界久负盛名的动画引擎（TweenLite等）GreenSock推出了新一代动画引擎平台GreenSock Animation Platform，这个是JS版本！地址：http://www.greensock.com/jump-start-js/skrollr.min.js视差
阅读全文
摘要：<script>在文档完全加载后想运行某个函数，用下面的函数addLoadEventfunction addLoadEvent(func){ var oldonload = window.onload; if(typeof window.onload !='function'){ window.onload = func; }else{ window.onlad = function(){ oldonload(); func(); } }}insertAfter函数，与insertBefore对应fu...
阅读全文
摘要：最近在看javascript详解这本书看到这个例子文字滚动，拆分文字来做到文字滚动。代码如下<!DOCTYPE html><html><head><meta charset="gb2312" /><title>专题</title><style type="text/css"> body{color:#333;font:12px/20px arial; background:#FFF;}body,div,form,img,p,h1,h2,dl,dt,dd,ul,li{pad
阅读全文
摘要：今天有一需求，一堆视频，一堆链接，点击相关的链接，在本页打开相关的视频。第一想法，很简单么，直接把src值改成点击的那个的href值就可以了。试了下，发现这样不行，视频该怎么放还是怎么放，永远是刚打开那个。第二想法，给embed外面加个标签，把里面内容清空，再写进去，这样总可以了吧。试了下，和上面一样，依旧不行。又试了许多类似方法，还是不行。最后，想的，把embed标签隐藏（display:none），再清空试下。终于可以了。哎浪费了一上午时间。代码如下var tabv = document.getElementById("f_tabv");var tabva = tabv
阅读全文
摘要：以下代码来自javascript DOM编程艺术（第2版）js提供的获取dom元素的方法有document.getElementById('abc') 获取ID名为abc的元素document.getElementsByTagName('li') 获取标签名为li的一组元素document.getElementsByClassName("list") 获取类名为list的一组元素 （这个方法有一些浏览器支持，一些不支持）那么，如果在项目中要用这个方法，还是自己封装一个比较好：function getElementsByClassName(pa
阅读全文
摘要：表格隔行变色，也是一个提高用户体验的js效果。效果实现：表格奇偶行的颜色不一样。这样可以防止用户看数据时串行。鼠标移入某行时变颜色，移出再变回来。这样可以让用户清楚的知道自己正在看哪一行。表格点击变色。便于用户选中自己想保留的项。说明：i%2 每个数和2取模的值，只有0和1两种，这样就可以实现隔行变色的效果tables_li[i].onoff = 1; 为了实现点击变色，鼠标移入移出时，颜色不被覆盖。上代码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3
阅读全文
摘要：要做一个点击radio，触发相应事件的js。可是radio的点击面积太小，为了扩大它的点击面积，给它外层套了个label。发现问题了？怎么点label的区域都选中不了radio，只有label里面有文字了，点击才行.解决办法：给label加个透明的背景图，上面的问题就可以解决了。现在呢，可点击的问题是解决。又出现了新的问题？在触发的事件中加了alert()，才发现alert()竟然执行了两次。思考？百思不得其解，代码里也没让它运行两次呀，百度搜了下，发现有网友说label会内部触发 onclick选中radio的事，果断尝试。调用相关的函数后，加了个return false;阻止默认事件，发现
阅读全文
摘要：效果如下，有时可能会多个效果一起变化。要点一：box.onmouseover = function(){ startrun(box,{width:200,height:300},function(){ startrun(box,{opacity:100}) }) }通过json串可以传很多值，这样就可以同时改变很多属性了。要点二：遍历json串中的属性值对，找出所有的属性和对应的值，计算相应的数。并设置一个标识位，当没达到目标值时，标识位设为false，当标识位为true时，可以关闭定时器，执行下一次的调用最后，上代码<!DOCTYPE html><html><h
阅读全文
摘要：效果如下，添加新内容，会高度先变化，然后再渐显出来。 要点一：if(list_li.length>=1){ list.insertBefore(li,list_li[0]); }else{ list.appendChild(li); }从在前面插入新内容，如果没有新内容，就是在后面插入新内容。要点二： var height=li.offsetHeight; li.style.height='0';取得li的高度，然后再li的高度设置为0,因为高度的变化是从0到现有高度。要点三： startrun(li,"height",height,function(
阅读全文
摘要：效果如下，鼠标移上，先宽度变化，再高度变化，最后透明度变化，鼠标移出，再依次变回去。要点一：startrun(obj,attr,target,fn)box.onmouseover = function(){ startrun(box,"width",200,function(){ startrun(box,"height",200,function(){ startrun(box,"opacity","100") }); }); }如上面，函数也可以做为参数使用，就可以达到先执行某个动作，再执行某个动作的效果了。要
阅读全文
摘要：效果如下，每一个的运动效果都不一样哟~~1234要点一：function getstyle(obj,name){ if(obj.currentStyle){ return obj.currentStyle[name]; }else{ return getComputedStyle(obj,false)[name]; }}从样式表中根据id和属性名取值。要点二：if(attr == "opacity"){ cur = Math.round(parseFloat(getstyle(obj,attr))*100); }else{ cur = parseInt(getstyle(o
阅读全文
摘要：页面向上向下滚动，分享到的模块随着滑动。要点：var scrtop =document.documentElement.scrollTop||document.body.scrollTop; var height = document.documentElement.clientHeight||document.body.clientHeight; var top = scrtop + (height - share.offsetHeight)/2; top = parseInt(top);获得页面垂直居中的位置上代码：<!DOCTYPE html><html><
阅读全文
摘要：效果如下，一开始速度很快，然后慢下来，直到停止。 要点：var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大，所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整，反向速度的时候向下取整上代码<!DOCTYPE html><html><head><meta charset="gb2312" /><title>
阅读全文
摘要：效果在左边的那个蓝色方块：进入显示的时候，会显示“分享到”几个字，鼠标移上，内容会慢慢移出，鼠标移出，内容再慢慢回复原来位置。分享到内容 分享到这个要点提示部分，在前面的几篇要点中都有提到，这里就不提了。下面，直接上代码喽：<!DOCTYPE html><html><head><meta charset="gb2312" /><title>无标题文档</title><style>body{margin:0; padding:0; font:12px/1.5 arial;}#share{wid
阅读全文
摘要：如下效果，下面的5个元素，随便一个，鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小。效果预览：12345要点一：var speed = 0; if(target>obj.alpha){ speed = 5; }else{ speed = -5; }根据目标值和当时值的对比，来决定是正向还是负向速度。要点二：for(i=0; i<runs_li.length; i++){ runs_li[i].timer = null; runs_li[i].alpha = 30; runs_li[i].onmouseover = function(){ startrun(this,100);
阅读全文
浙公网安备 33010602011771号