zoukankan      html  css  js  c++  java
  • JavaScript图片水平淡入淡出切换效果代码

    代码简介:

    JavaScript控制图片水平淡入淡出切换,同时实现图片的半透明效果,修改一下就可以变成一个图片幻灯了。

    代码内容:

    View Code
    <html>
    <head>
    <title>JavaScript图片水平淡入淡出切换效果代码 - www.webdm.cn</title>
    </head>
    <body>
    <table align=center cellpadding=0 cellspacing=0 border=0>
      
    <tr>
        
    <td  align="center" valign="middle">
    <SCRIPT LANGUAGE="javascript">

    var trans_width='150px'
    var trans_height='90px'
    var pause=3000
    var degree=10
    var slideshowcontent=new Array()
    slideshowcontent[
    0]=["http://www.webdm.cn/images/wall1_s.jpg"]
    slideshowcontent[
    1]=["http://www.webdm.cn/images/wall2_s.jpg"]
    slideshowcontent[
    2]=["http://www.webdm.cn/images/wall3_s.jpg"]
    slideshowcontent[
    3]=["http://www.webdm.cn/images/wall4_s.jpg"]
    slideshowcontent[
    4]=["http://www.webdm.cn/images/wall5_s.jpg"]
    var bgcolor='white'
    var imageholder=new Array()
    for (i=0;i<slideshowcontent.length;i++){
    imageholder[i]
    =new Image()
    imageholder[i].src
    =slideshowcontent[i][0]
    }
    var ie4=document.all
    var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
    if (ie4||dom)
    document.write(
    '<div style="position:relative;'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-

    color:
    '+bgcolor+';'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" 

    style="position:absolute;background-color:
    '+bgcolor+';'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-

    opacity:0.2;"></div></div>
    ')
    else if (document.layers){
    document.write(
    '<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' 

    height=
    '+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" 

    style="cursor:pointer;"/></layer></ilayer>
    ')
    }
    var curpos=trans_width*(-1)
    var curcanvas="canvas0"
    var curindex=0
    var nextindex=1
    function getslidehtml(theslide){
    var slidehtml=""
    slidehtml
    +='<img src="'+theslide[0]+'" border="0" onload="return imgzoom(this,600);" onclick="javascript:window.open(this.src);" style="cursor:pointer;"/>'
    return slidehtml
    }
    function moveslide(){
    if (curpos<0){
    curpos
    =Math.min(curpos+degree,0)
    tempobj.style.left
    =curpos+"px"
    }
    else{
    clearInterval(dropslide)
    if (crossobj.filters)
    crossobj.filters.alpha.opacity
    =100
    else if (crossobj.style.MozOpacity)
    crossobj.style.MozOpacity
    =1
    nextcanvas
    =(curcanvas=="canvas0")? "canvas0" : "canvas1"
    tempobj
    =ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
    tempobj.innerHTML
    =getslidehtml(slideshowcontent[curindex])
    nextindex
    =(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
    setTimeout(
    "rotateslide()",pause)
    }

    }
    function rotateslide(){
    if (ie4||dom){
    resetit(curcanvas)
    crossobj
    =tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
    crossobj.style.zIndex
    ++
    if (crossobj.filters)
    document.all.canvas0.filters.alpha.opacity
    =document.all.canvas1.filters.alpha.opacity=20
    else if (crossobj.style.MozOpacity)
    document.getElementById(
    "canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
    var temp='setInterval("moveslide()",50)'
    dropslide
    =eval(temp)
    curcanvas
    =(curcanvas=="canvas0")? "canvas1" : "canvas0"
    }
    else if (document.layers){
    crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
    crossobj.document.close()
    }
    curindex
    =(curindex<slideshowcontent.length-1)? curindex+1 : 0
    }
    function jumptoslide(which){
    curindex
    =which
    rotateslide()
    }
    function resetit(what){
    curpos
    =parseInt(trans_width)*(-1)
    var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
    crossobj.style.left
    =curpos+"px"
    }
    function startit(){
    crossobj
    =ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
    if (ie4||dom){
    crossobj.innerHTML
    =getslidehtml(slideshowcontent[curindex])
    rotateslide()
    }
    else{
    document.tickernsmain.visibility
    ='show'
    curindex
    ++
    setInterval(
    "rotateslide()",pause)
    }
    }
    if (window.addEventListener)
    window.addEventListener(
    "load", startit, false)
    else if (window.attachEvent)
    window.attachEvent(
    "onload", startit)
    else if (ie4||dom||document.layers)
    window.onload
    =startit
    </SCRIPT>
        
    </td>
      
    </tr>
    </table>
    </body>
    </html>
    <br />
    <p><href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
    代码来自:http://www.webdm.cn/webcode/fcb02f9e-fa7d-48cf-818d-963e2f1a71b6.html
  • 相关阅读:
    day 66 ORM django 简介
    day 65 HTTP协议 Web框架的原理 服务器程序和应用程序
    jQuery的事件绑定和解绑 事件委托 轮播实现 jQuery的ajax jQuery补充
    background 超链接导航栏案例 定位
    继承性和层叠性 权重 盒模型 padding(内边距) border(边框) margin 标准文档流 块级元素和行内元素
    属性选择器 伪类选择器 伪元素选择器 浮动
    css的导入方式 基础选择器 高级选择器
    03-body标签中相关标签
    Java使用内存映射实现大文件的上传
    正则表达式
  • 原文地址:https://www.cnblogs.com/webdm/p/2168503.html
Copyright © 2011-2022 走看看