续:一个WEB前端网站首页信息排行的特效
作者:hayden 日期:2008-03-17
大概的效果请先看看图啦:

不过因为时间及其它关系该效果还没有测试,还不知道在IE7以外的游览器是否OK,有兴趣的朋友,可以帮忙看看呵!~
闲话就不多了呵,先上一段其实我每次都会有选择性用到的代码:
主要的代码大家来看看,整个思路就是文章列表的切换,类似TAB一样,只是内容的出现与消失有过滤状态,而标题也有滑动效果。
所需要用到的图片:

最后大家来LOOK演示了:
HTML代码
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
不过因为时间及其它关系该效果还没有测试,还不知道在IE7以外的游览器是否OK,有兴趣的朋友,可以帮忙看看呵!~
闲话就不多了呵,先上一段其实我每次都会有选择性用到的代码:
复制内容到剪贴板
程序代码
程序代码var $D = new Function('str','return document.getElementById(str);');
var $event = new Function('e','return (!e)?window.event:e;'); //这句算是我写的比较得意的一句话了
var getNodes = new Function('stri','return (navigator.appName.indexOf("Explorer")<0)?stri*2-1:stri-1;');
var getNodenum = new Function('stri','return (navigator.appName.indexOf("Explorer")<0)?((stri-1)/2):stri;');
var AutotabNum = new Function('iNum,ilength,stype','return (stype=="left")?((iNum==1)?ilength:iNum-1):((iNum==ilength)?1:iNum+1);'); //这三句是关于不同游览器对节点的判断兼容
var isautoplay,splay,slasttime = gettimes(),snowtime,ismove = false;
function gettimes(){var now = new Date();return now.getTime();}
function bind(o,ev,fn){if (document.all)o.attachEvent('on'+ev,fn);else o.addEventListener(ev,fn,false);}
var $event = new Function('e','return (!e)?window.event:e;'); //这句算是我写的比较得意的一句话了
var getNodes = new Function('stri','return (navigator.appName.indexOf("Explorer")<0)?stri*2-1:stri-1;');
var getNodenum = new Function('stri','return (navigator.appName.indexOf("Explorer")<0)?((stri-1)/2):stri;');
var AutotabNum = new Function('iNum,ilength,stype','return (stype=="left")?((iNum==1)?ilength:iNum-1):((iNum==ilength)?1:iNum+1);'); //这三句是关于不同游览器对节点的判断兼容
var isautoplay,splay,slasttime = gettimes(),snowtime,ismove = false;
function gettimes(){var now = new Date();return now.getTime();}
function bind(o,ev,fn){if (document.all)o.attachEvent('on'+ev,fn);else o.addEventListener(ev,fn,false);}
主要的代码大家来看看,整个思路就是文章列表的切换,类似TAB一样,只是内容的出现与消失有过滤状态,而标题也有滑动效果。
复制内容到剪贴板
程序代码
程序代码function nAutoplay(objid){
if (isautoplay){
splay = setInterval(function(){
if (isautoplay){
snowtime = gettimes();
var iDays=parseInt(Math.abs(slasttime-snowtime)); //相差的毫秒
if (iDays>6000)nAutoTabs(objid,'right');
}
},1500);
}
$D(objid).childNodes[getNodes(2)].onmouseover=function(){
if (isautoplay){
ismove = true;
isautoplay = false;
this.onmouseout = function(){
if (ismove) isautoplay = true;
ismove = false;
}
}
}
}
function setnAutoplay(objid,stype,stype1){
if (stype==1){
isautoplay = true;
nAutoplay('rigtab02')
$D(objid+"_check1").style.display = "block";
$D(objid+"_check2").style.display = "none";
}else if (stype==0) {
isautoplay = false;
$D(objid+"_check1").style.display = "none";
$D(objid+"_check2").style.display = "block";
}
}
function nAutoTabs(thisObj,stype){
slasttime = gettimes();
var tabtit = $D(thisObj).childNodes[getNodes(1)];
var tablist = $D(thisObj).childNodes[getNodes(2)];
var teblength = getNodenum(tabtit.childNodes.length);
for(var i=1; i <= teblength; i++){
if (tabtit.childNodes[getNodes(i)].className == "active" )nowi = i;
}
var nowii = AutotabNum(nowi,teblength,stype);
fade(thisObj,'1','0',nowi,nowii,stype);
}
// 淡入淡出函数
function fade(id,c1,c2,iNum1,iNum2,stype){
var releft;
var dur = 4; // 淡入淡出步数
var txt = $D(id).childNodes[getNodes(2)].childNodes[getNodes(iNum1)];
var tit = $D(id).childNodes[getNodes(1)].childNodes[getNodes(iNum1)];
var filters = 99;
if (c1=="0") {
with(txt.style){
filter = "alpha(opacity=1)"; KHTMLOpacity = "0.01";
MozOpacity = "0.01";opacity = "0.01";
display = "block";
}
filters=1;
}
var st=0,sTimer = setInterval(function(){
if(st<=dur&&filters>0&&filters<100){
filters = (c1=="1")?filters - 20:filters += 20;
with(txt.style){
filter = "alpha(opacity="+filters+")"; KHTMLOpacity = filters/100;
MozOpacity = filters/100;opacity = filters/100;
}
} else {
clearInterval(sTimer);
if (c1=="1"){
txt.style.display = "none";
var mleft = 0;
releft = (stype=="left")?80:-80;
var stTimer = setInterval(function(){
mleft = (stype == "left")?mleft + 20:mleft - 20;
if (Math.abs(mleft)<120){
tit.style.margin="0 0 0 "+mleft+"px";
}else{
clearInterval(stTimer);
tit.style.margin="0 0 0 -80px";
tit.className = "";
}
},30);
}
if (iNum2>0){
fade(id,'0','1',iNum2,'0',stype);
}else {
with(txt.style){
filter = "alpha(opacity=100)"; KHTMLOpacity = "1";
MozOpacity = "1";opacity = "1";
}
var mleft = (stype == "left")?-80:80;
tit.style.margin="0 0 0 "+mleft+"px";
tit.className = "active";
var stTimer = setInterval(function(){
if (Math.abs(mleft)>10){
mleft = (stype=="left")? mleft + 20:mleft - 20;
tit.style.margin="0 0 0 "+mleft+"px";
}else{
clearInterval(stTimer);
tit.style.margin="0 0 0 0";
}
},30);
}
}
st++;
},50);
}
if (isautoplay){
splay = setInterval(function(){
if (isautoplay){
snowtime = gettimes();
var iDays=parseInt(Math.abs(slasttime-snowtime)); //相差的毫秒
if (iDays>6000)nAutoTabs(objid,'right');
}
},1500);
}
$D(objid).childNodes[getNodes(2)].onmouseover=function(){
if (isautoplay){
ismove = true;
isautoplay = false;
this.onmouseout = function(){
if (ismove) isautoplay = true;
ismove = false;
}
}
}
}
function setnAutoplay(objid,stype,stype1){
if (stype==1){
isautoplay = true;
nAutoplay('rigtab02')
$D(objid+"_check1").style.display = "block";
$D(objid+"_check2").style.display = "none";
}else if (stype==0) {
isautoplay = false;
$D(objid+"_check1").style.display = "none";
$D(objid+"_check2").style.display = "block";
}
}
function nAutoTabs(thisObj,stype){
slasttime = gettimes();
var tabtit = $D(thisObj).childNodes[getNodes(1)];
var tablist = $D(thisObj).childNodes[getNodes(2)];
var teblength = getNodenum(tabtit.childNodes.length);
for(var i=1; i <= teblength; i++){
if (tabtit.childNodes[getNodes(i)].className == "active" )nowi = i;
}
var nowii = AutotabNum(nowi,teblength,stype);
fade(thisObj,'1','0',nowi,nowii,stype);
}
// 淡入淡出函数
function fade(id,c1,c2,iNum1,iNum2,stype){
var releft;
var dur = 4; // 淡入淡出步数
var txt = $D(id).childNodes[getNodes(2)].childNodes[getNodes(iNum1)];
var tit = $D(id).childNodes[getNodes(1)].childNodes[getNodes(iNum1)];
var filters = 99;
if (c1=="0") {
with(txt.style){
filter = "alpha(opacity=1)"; KHTMLOpacity = "0.01";
MozOpacity = "0.01";opacity = "0.01";
display = "block";
}
filters=1;
}
var st=0,sTimer = setInterval(function(){
if(st<=dur&&filters>0&&filters<100){
filters = (c1=="1")?filters - 20:filters += 20;
with(txt.style){
filter = "alpha(opacity="+filters+")"; KHTMLOpacity = filters/100;
MozOpacity = filters/100;opacity = filters/100;
}
} else {
clearInterval(sTimer);
if (c1=="1"){
txt.style.display = "none";
var mleft = 0;
releft = (stype=="left")?80:-80;
var stTimer = setInterval(function(){
mleft = (stype == "left")?mleft + 20:mleft - 20;
if (Math.abs(mleft)<120){
tit.style.margin="0 0 0 "+mleft+"px";
}else{
clearInterval(stTimer);
tit.style.margin="0 0 0 -80px";
tit.className = "";
}
},30);
}
if (iNum2>0){
fade(id,'0','1',iNum2,'0',stype);
}else {
with(txt.style){
filter = "alpha(opacity=100)"; KHTMLOpacity = "1";
MozOpacity = "1";opacity = "1";
}
var mleft = (stype == "left")?-80:80;
tit.style.margin="0 0 0 "+mleft+"px";
tit.className = "active";
var stTimer = setInterval(function(){
if (Math.abs(mleft)>10){
mleft = (stype=="left")? mleft + 20:mleft - 20;
tit.style.margin="0 0 0 "+mleft+"px";
}else{
clearInterval(stTimer);
tit.style.margin="0 0 0 0";
}
},30);
}
}
st++;
},50);
}
所需要用到的图片:

最后大家来LOOK演示了:
HTML代码[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]
博主向您推荐的其它文章
- 相关日志
- Javascript下的urlencode编码解码方法decodeURIComponent()[17]
- PJBLOG侧边栏选项卡样式代码[517]
- 网站音乐播放器之JS防刷新类(防刷新音乐播放)[868]
- document.getElementsByTagName的烦恼[1061]
- js混淆压缩工具推荐:JSObfuscator By Unest[704]
- 终止浏览器对页面HTML代码的解析操作(兼容代码记录)[231]
- js弹窗(showModalDialog)关闭返回传递参数及激活事件[1470]
- 盗用与整理:discuz论坛下拉菜单(showmenu)效果[557]
- 收藏一个滑动打开隐藏层效果类(Slider)[483]
- 一个不错的时间日期控件My97DatePicker[799]
评论: 3 | 引用: 0 | 查看次数: -
- 日志信息
发表评论


文章来自:
Tags: 

