JavaScript实现基于Cookie的存储类实例

2017年02月06日 13 阅读

本文实例讲述了JavaScript实现基于Cookie的存储类。分享给大家供大家参考。具体分析如下：通过这个JS类，你可以象使用session一样使用cookie，非常简单了！/* * CookieStorage.js * 本类实现像localStorage和sessionStorage一样的存储API * 不同的是，它是基于HTTP Cookies实现的. */function CookieStorage（maxage, path） {// 两个参数分别...

浅谈JavaScript正则表达式分组匹配

2017年02月06日 13 阅读

语法元字符：（pattern） 作用：用于反复匹配的分组属性$1~$9 如果它（们）存在，用于得到对应分组中匹配到的子串1或$1 用于匹配第一个分组中的内容2或$2 用于匹配第一个分组中的内容...9或$9 用于匹配第一个分组中的内容用法示例var reg = /（A+）（（B|C|D）+）（E+）/gi;//该正则表达式有4个分组//对应关系//RegExp.$1 <-> （A+）//RegExp.$2 <-> （（B|...

js简单的点击返回顶部效果实现方法

2017年02月06日 12 阅读

本文实例讲述了js简单的点击返回顶部效果实现方法。分享给大家供大家参考。具体分析如下：当页面特别长的时候，用户想回到页面顶部，必须得滚动好几次滚动键才能回到顶部，如果在页面右下角有个“返回顶部”的按钮，用户点击一下，就可以回到顶部，对于用户来说，是一个比较好的体验。实现原理：当页面加载的时候，把元素定位到页面的右下角，当页面滚动时，元素一直位于右下角，当用户点击的时候，页面回到顶部。要点一：document.documentElement.clientWi...

javascript中关于&& 和 || 表达式的小技巧分享

2017年02月06日 13 阅读

如果你还是新手, 而且读完所有这些技巧的详解和每种技巧是如果工作的以后运用它们, 你会写出更加简练高效的JavaScript程序.确实, JavaScript高手已经运用这些技巧写出了很多强大, 高效的JavaScript程序. 但是你可以这样.强大的 && 和 || 表达式你可能在JavaScript库和JavaScript框架中已经见过它们了, 那么我们先由几个基本的例子开始:例子1. || （或）设置默认值, 通常用复制代码 代码如下:functio...

js实现类似新浪微博首页内容渐显效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现类似新浪微博首页内容渐显效果的方法。分享给大家供大家参考。具体分析如下：要点一：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...

js实现类似jquery里animate动画效果的方法

2017年02月06日 13 阅读

本文实例讲述了js实现类似jquery里animate动画效果的方法。分享给大家供大家参考。具体分析如下：该实例可实现鼠标移上，先宽度变化，再高度变化，最后透明度变化，鼠标移出，再依次变回去的效果。要点一：startrun（obj,attr,target,fn）box.onmouseover = function（）{startrun（box,"width",200,function（）{startrun（box,"height",200,function...

js实现同一页面多个不同运动效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现同一页面多个不同运动效果的方法。分享给大家供大家参考。具体分析如下：要点一：function getstyle（obj,name）{if（obj.currentStyle）{return obj.currentStyle[name];}else{return getComputedStyle（obj,false）[name];}}从样式表中根据id和属性名取值。要点二：if（attr == "opacity"）{cur = Math....

js实现分享到随页面滚动而滑动效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现分享到随页面滚动而滑动效果的方法。分享给大家供大家参考。具体如下：页面向上向下滚动，分享到的模块随着滑动。要点：复制代码 代码如下:var scrtop =document.documentElement.scrollTop||document.body.scrollTop;var height = document.documentElement.clientHeight||document.body.clientHeight;va...

js实现缓冲运动效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现缓冲运动效果的方法。分享给大家供大家参考。具体分析如下：该实例可实现一开始速度很快，然后慢下来，直到停止的效果。要点：var speed = （target-box.offsetLeft）/8;目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大，所以速度的值也是一直的变小speed = speed>0?Math.ceil（speed）:Math.floor（speed）;正向速度的时候向上取整，...

js实现同一个页面多个渐变效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现同一个页面多个渐变效果的方法。分享给大家供大家参考。具体分析如下：这里可实现5个元素中随便一个，鼠标移上去透明度渐渐增加，鼠标移出，透明度渐渐减小的效果。要点一：var speed = 0;if（target>obj.alpha）{speed = 5;}else{speed = -5;}根据目标值和当时值的对比，来决定是正向还是负向速度。要点二：for（i=0; i<runs_li.length; i++）{runs_li...

js实现同一页面多个运动效果的方法

2017年02月06日 13 阅读

本文实例讲述了js实现同一页面多个运动效果的方法。分享给大家供大家参考。具体分析如下：实现原理，就是在调用的时候，给这五个元素，循环加上事件。需要注意的是，每个元素的定时器需要分开。要点一：var speed = （target - obj.offsetWidth）/8;缓冲运动效果，一开始速度很快，然后越来越慢，直到停止speed = speed>0?Math.ceil（speed）:Math.floor（speed）;如果速度大于0，则向...

js实现透明度渐变效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现透明度渐变效果的方法。分享给大家供大家参考。具体分析如下：这里可实现一开始元素的透明度是30，鼠标移上的时候，透明度慢慢增加，到透明度100停止。鼠标移出，透明度慢慢减少，减少到30的效果。要点一：因为无法直接获取和改变透明度的值，可以把透明度值赋给一个变量，让变量变化，最后把变量的值再赋给元素的透明值。var alpha=30;要点二：判断目标值和目前透明值，来判定是正向速度还是负向速度。if（target > alpha）{...

js简单实现点击左右运动的方法

2017年02月06日 12 阅读

本文实例讲述了js简单实现点击左右运动的方法。分享给大家供大家参考。具体分析如下：这里可实现点击向右，方块向右移动，点击向左，方块向左移动的效果可以用setInterval来实现过多长时间，div移动多长的距离来实现运动效果。要点一：如果元素的左边距离小于目标距离，则是正向移动，否则是负向移动if（run.offsetLeft <target）{speed = 2;}else{speed = -2;}要点二：如果元素的左边距离等于目标距离，停止定时器...

javascript实现简单的鼠标拖动效果实例

2017年02月06日 12 阅读

本文实例讲述了javascript实现简单的鼠标拖动效果。分享给大家供大家参考。具体分析如下：用鼠标拖动一个元素，放到网页的任意一个位置上，这是很常见的，例如很多博客模板版块位置可以自己拖动到相应位置。下面先写一个简单的可以实现鼠标拖动的效果。当鼠标按下的时候，记录鼠标当前位置和元素左边距离的差值。当鼠标移动的时候，给元素的位置赋值，就是鼠标的位置，减去刚才的差值。当鼠标放开的时候，给鼠标移动和鼠标放开赋值null，让它们不要再有任何动作。要点一：disx...

js实现简单的左右两边固定广告效果实例

2017年02月06日 12 阅读

本文实例讲述了js实现简单的左右两边固定广告效果的方法。分享给大家供大家参考。具体分析如下：大多数网站都有左右两边的固定广告位，下面呢就是实现这个效果的最简单的代码，可能在ie下滚动的时候会有一点抖动，这个问题以后再解决了，先实现再说。要点一：var adtop = adleft.offsetTop;获得元素距离上边的位置，在滚动的时候需要用到。要点二：复制代码 代码如下:adleft.style.top=adtop+（document.documentE...

js实现交换运动效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现交换运动效果的方法。分享给大家供大家参考。具体分析如下：实现后的效果，点击互相交换位置和距离左边和上角的信息。要点一：var now = s_pic_li[0];for（var i=0; i<s_pic_li.length; i++）{s_pic_li[i].onclick = function（）{if（this == now） return false;var w = now.offsetWidth;var h = now....

js实现简单鼠标跟随效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现简单鼠标跟随效果的方法。分享给大家供大家参考。具体分析如下：鼠标跟随，顾名思义，就是在鼠标移动的时候，有个动画跟随着鼠标一起移动。要点一：var oEvent = evt || window.event;这个是为了兼容ie和ff而写的，在ie下window.event表示event对象，而ff下，是给事件函数传一个参数，这个参数就表示事件对象。要点二：document.onmousemove = function（evt）鼠标跟随是在...

js使用DOM操作实现简单留言板的方法

2017年02月06日 12 阅读

本文实例讲述了js使用DOM操作实现简单留言板的方法。分享给大家供大家参考。具体分析如下：如图所示简易留言板，也就是自娱自乐版，说白了就是练习DOM操作。要点一：document.createElement（"标签名"） 新建元素要点二：父元素.appendChild（"元素"） 把新建的元素插入到页面的标签中（在标签的最后一个显示），这样才会在浏览器中显示出来要点三：父元素.insertBefore（"元素","要插入哪个元素的前面"） 把新建的元素插入...

js实现简单的可切换选项卡效果

2017年02月06日 12 阅读

本文实例讲述了js实现简单的可切换选项卡效果的方法。分享给大家供大家参考。具体如下：如图，最简单的纯粹的选项卡第一步，当然是先写html代码和css样式<！DOCTYPE html><html><head><meta charset="gb2312" /><title>无标题文档</title><style>body,ul,li{margin:0; padding:0; f...

js实现星星打分效果的方法

2017年02月06日 12 阅读

本文实例讲述了js实现星星打分效果的方法。分享给大家供大家参考。具体分析如下：很多网站都有如下图这样的星星打分效果，今天就看下用js怎么实现打分效果。效果详解1. 鼠标移上的时候星星点亮，下面的文字显示。鼠标移出的时候星星为灰，下面文字不显示。2. 鼠标移到某个星星上，它之前的所有星星都会亮。3. 鼠标移到某个星星上并点击，会显示打分结果。代码如下<！doctype html><html><head> <meta ...