javascript特效代码

点一下--首页地址添加到收藏夹

我们都希望自己辛苦制作的主页能够成为网友们的收藏夹中的东东,于是我们不停的用各种方法吸引网友的注意力,大声的告诉他们:“如果你觉得的好,就把我的主页填加到你的收藏夹中吧!”;“按ctrl+d把本站填加进您的收藏夹”……

其实我们不用那么费力气就可以达到一个更好的效果,呵呵,现在有一段代码,你可以使你通过点击一个连接就把主页地址添入收藏夹,怎么样?请看仔细:

首先在

说明:时钟显示的位置需要你修正top,left参数来确定。top表示层距离显示器顶部的象素值,left表示距离左侧的象素。

d21:神奇的页面滚动控制(一)

当页面内容很长时,我们一般使用窗口的滚动条来实现上下移动,但这往往要使用到多次的鼠标点击动作。在我的机器上,当浏览长页面时,我会在页面的空白处同时按下我的2键鼠标的左右键,这时,就会出现一个上下滚动指示图标,它是怎么生成的呢??

但是,是否能在html页面上制作这样一个指示器呢?答案当然是:完全可以!请跟我来。

实现思路

1、首先,准备好2个图形文件,一个代表向上,另一个代表向下。

2、然后,进行页面布局,我们可以将这个指示器图标放在你想要的任意位置,这里我们假设它位于当前窗口的右下部。

3、针对不同的浏览器,设置好相应的对象变量。这里,我们只考虑当前2种主流浏览器:ie和netscape。

4、对2个指示器图标,分别设置onmouseover与onmouseout事件处理,生成当前操作状态。然后据此执行定时滚动函数,实现页面的滚动效果。

代码详解

//设置变量

//设置变量isns,判别浏览器类型。对于netscape浏览器,document.layers返回true值

var isns=(document.layers);

//设置引用对象时的变量名称

//对于ie浏览器,可见控制的引用值为document.all.object.style.visibility=visible

//对于ns浏览器,可见控制的引用值为document.object.visibility=show

var _all=(isns)? '' : 'all.' ;

var _style=(isns)? '' : '.style' ;

var _visible=(isns)? 'show' : 'visible';

//设置其他变量:w_x与w_y:坐标值,okscroll:滚动与否,godown:是否向下

var w_x, w_y, item, okscroll=false, godown;

function init(){

//初始化运行函数

//将引用的对象赋值给item变量,这样,在随后的对象赋值操作中,可以简化代码的编写,并保持兼容性

//注意:这是一个非常好的编程习惯

item=eval('document.'+_all+'item'+_style);

//取得当前窗口的尺寸大小等参数,并移动指示器到屏幕的右下角

getwindowsize();

//使指示器可见

item.visibility=_visible;

//启动滚动判断定时函数,监测操作动作

scrollpage();

}

function getwindowsize() {

//取得当前窗口大小参数,并根据这些数值移动指示器到屏幕右下角

//注意:当用鼠标改变窗口的大小时,要根据当前最新的窗口长宽参数设置指示器的位置。

否则,就可能看不到停留在

//原来位置的指示器了。

//对于ie,document.body.clientwidth表示当前窗口的宽度,document.body.

clientheight表示高度,单位是

//象素px。如果是ns浏览器,对应为window.innerwidth和window.innerheight。

w_x=(isns)? window.innerwidth-5 : document.body.clientwidth;

w_y=(isns)? window.innerheight : document.body.clientheight;

//接着,设置代表指示器区域的层的宽度与高度。

(isns)? item.clip.width=42: item.width=42;

(isns)? item.clip.height=20 : item.height=20;

//根据上面设置的参数,移动指示器到相应位置

moveitem();

}

function moveitem() {

//移动指示器

//对于ns浏览器

if (isns) {

item.moveto((pagexoffset+w_x-70),(w_y+pageyoffset-50))

}else{

//如果是ie,直接给层的2个属性赋值:pixelleft代表x坐标,pixeltop代表y坐标

//注意:当屏幕发生滚动时,document.body.scrollleft与document.body.scrolltop分别代表

//滚动的横向距离与纵向距离。而w_x与w_y分别表示了指示器在当前窗口的相对坐标位置,

//所以,要对2者进行相加操作,从而得到指示器的绝对坐标位置。

item.pixelleft=document.body.scrollleft+w_x-70;

item.pixeltop=w_y+document.body.scrolltop-50;

}

}

function resizens() {

//对于ns浏览器,当窗口大小变化时,执行定时操作

//settimeout函数设置了定时执行的操作,这里表示:每400毫秒执行document.location.reload()操作

settimeout('document.location.reload()',400);

}

请看----神奇的页面滚动控制(二)

d22:神奇的页面滚动控制(二)

function scrollpage() {

//页面滚动控制函数

status = '';

//okscroll与godown都是滚动状态标志,其值由指示器层的onmouseover与onmouseout2个事件控制。

//window.scrollby(x,y)控制页面滚动,x、y分别表示横向与纵向滚动的距离,单位是象素px。

//当设置y值更大时,每次滚动的距离也将更大。

if (okscroll) {

if (godown) {

(isns)? window.scrollby(0,4) : window.scrollby(0,4) ;

} else {

(isns)? window.scrollby(0,-4) : window.scrollby(0,-4) ;

}

}

//页面滚动后,指示器已不再停留在我们期待的位置。所以,要再次执行移动函数移动它到屏幕的右下角。

//这样,看起来好像它总是在那里 ;-)

moveitem();

//设置滚动函数定时执行。这里的时间,表示了监测用户操作状态的周期,越小表示越精确,但程序也将

//更“忙”。设置得过于长,就会产生慢动作的延迟效果,好像计算机很迟钝,当我们将鼠标点到向下指示器

//时,屏幕并没有马上做出反应,而是等了一段时间,才向下滚动 ;-(

//根据你的需要,并进行测试,设置这个数值。

settimeout('scrollpage()', 158);

}

//页面加载后,启动相关脚本函数

//设置页面加载后,首先启动init函数

window.οnlοad=init;

//设置当窗口大小发生变换时启动的函数

(isns) ? window.οnresize=resizens : window.οnresize=getwindowsize ;

//end -- >

◆◆◆◆◆ begin from here ◆◆◆◆◆

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

用javascript制作页面滚动效果

◆◆◆◆◆ end here ◆◆◆◆◆

演示效果

ok!看了上面的代码详细解读,你是否领会了其中的技巧?软件真是无所不能,是吗?

想要看看到底是怎样的神奇效果吗?不要犹豫,请点击>>>这里!

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/