当前位置：网站综合首页 >> 网页JS特效 >> 图形图象类 >> 又一种符合网页标准的图片擦洗特效

又一种符合网页标准的图片擦洗特效

来源：中国设计秀作者：点击：135 加入收藏发表评论

顶一下

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title><style type="text/css">

</style>
</head>
<body>
<div id="ad_pic">
<div id="f_div">

<div id="f_imgDiv"></div>
<div id="f_infoDiv">
  
  <div id="f_buttonDiv"></div>
</div>
</div>

<div id="f_text" class="f12b"></div>
<script language="javascript" type="text/javascript">
<!--
//more javascript from http://www.webjx.com

function p $(string){
document.write(string);
}
function $(id){
return document.getElementById(id);
}
function change_menu(id,content_id,num,total_ztc_menu,menu_on,menu_off){
for (var i=1;i<=total_ztc_menu;i++){
   $(id+i).className=menu_off;
   $(content_id+i).style.display='none';
}
$(id+num).className=menu_on;
$(content_id+num).style.display='block';
}
//可修改区域
var imgWidth=150;
var imgHeight=100;
var _timeOut_=5000;
var show_text = false; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0;              //第一张图
var target="_blank";   //打开方式
var button_on ='on'; //当前焦点对应按钮的样式名
var button_off ='';//非当前焦点对应按钮的样式名

//不可修改区域
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
var menuList = new Array();//菜单menu
var ver=2; //兼容浏览器版本默认2 为非ie
var firstTime=true;
var n =-1;

//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://www.webjx.com/img/200406301.jpg';
imgText[n]='<a href="#" target="_blank">内容一</a>';
imgLink[n]='http://www.webjx.com';
imgAlt[n]='内容一';

//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://www.webjx.com/img/200406302.jpg';
imgText[n]='<a href="#" target="_blank">内容二</a>';
imgLink[n]='http://www.webjx.com';
imgAlt[n]='内容二';

//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://www.webjx.com/img/200406303.jpg';
imgText[n]='<a href="#" target="_blank">内容三</a>';
imgLink[n]='http://www.webjx.com';
imgAlt[n]='内容三';

//菜单menu
menuList[++n]='XX';
imgUrl[n]='http://www.webjx.com/img/200406304.jpg';
imgText[n]='<a href="#" target="_blank">内容四</a>';
imgLink[n]='http://www.webjx.com';
imgAlt[n]='内容四';

var img = document.createElement("img");
img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild(img);

//数字按钮
for (var i=count-1;i>=0;i--){
var div_bg = document.createElement("div");
div_bg.id = 'div_bg'+i;
div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);
var a = document.createElement("a");
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';
$('div_bg'+i).appendChild(a);
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);
}
if (show_text) $('f_text').innerHTML = imgText[now];
//表现层 end
$('f_img').onmouseover=function(){window.clearInterval(theTimer);}
$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);}
try{ //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();
ver=1;
draw_line();
}
catch (e){ver=2;}
var theTimer = setTimeout("change()", _timeOut_/1000);
//-->
</script>
</div>
</body>
</html>

2007-05-05 11:35:00 出处：

本文引用地址：http://www.cnwebshow.com/site/html/article_940.html

热点文章/相关文章

素材下载　矢量潮流素材背景素材模板