zoukankan      html  css  js  c++  java
  • JavaScript 滚动特效代码

    注意:
    以下代码特效放到页面中时,如果html顶部加入了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    则必须在顶部加入
    <script language="javascript" type="text/javascript"></script>
    否则下面定义特效在Firefox 3.0中,不执行。
    <table width="716" height="145" cellpadding="0" cellspacing="0" class="border">
            
    <tr>
                
    <td height="22" background="images/lmbj.gif" bgcolor="#F5F8FA">
                    
    <span class="STYLE3">&nbsp;&nbsp; 精品图片</span>
                
    </td>
            
    </tr>
            
    <tr>
                
    <td height="110">

                    
    <script language="JavaScript" type="text/javascript"> 
                        
    var flag=false
                        
    function DrawImage110(ImgD)
                        { 
                            
    var image=new Image(); 
                            image.src
    =ImgD.src; 
                            
    if(image.width>0 && image.height>0)
                            { 
                                flag
    =true
                                
    if(image.width/image.height>= 104/102)
                                { 
                                    
    if(image.width>104)
                                    { 
                                        ImgD.width
    =104
                                        ImgD.height
    =(image.height*104)/image.width; 
                                    }
                                    
    else
                                    { 
                                         ImgD.width
    =image.width; 
                                         ImgD.height
    =image.height; 
                                    } 
                                    ImgD.alt
    =image.width+"×"+image.height +"px"
                                } 
                                
    else
                                { 
                                    
    if(image.height>102)
                                    { 
                                        ImgD.height
    =102
                                        ImgD.width
    =(image.width*102)/image.height; 
                                    }
                                    
    else
                                    { 
                                        ImgD.width
    =image.width; 
                                        ImgD.height
    =image.height; 
                                    } 
                                    ImgD.alt
    =image.width+"×"+image.height+"px"
                                } 
                            } 
                        }
                    
    </script>

                    
    <table width="717" height="110" border="0" align="center" cellpadding="0" cellspacing="0">
                        
    <tr>
                            
    <td height="110" align="left" valign="middle">
                                
    <div id="demo" style="overflow: hidden;  700px;">
                                    
    <table border="0" cellspacing="0" cellpadding="0">
                                        
    <tr>
                                            
    <td>
                                                
    <table border="0" cellspacing="0" cellpadding="0">
                                                    
    <tr>
                                                        
    <td id="demo1" align="left">
                                                            
    <table border="0" cellspacing="0" cellpadding="0">
                                                                
    <tr align="left">
                                                                    
    <td>
                                                                        
    <table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                                                            
    <tr>
                                                                                
    <td align="center">
                                                                                    
    <table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
                                                                                        
    <tr>
                                                                                            
    <td align="center">
                                                                                                
    <href="/school/school120.html" target="_blank">
                                                                                                    
    <img src="/upimg/jiaxiaopic/20085511505686973.jpg" width="104" onload="javascript:DrawImage110(this); "
                                                                                                        border
    ="0" /></a>
                                                                                            
    </td>
                                                                                        
    </tr>
                                                                                    
    </table>
                                                                                
    </td>
                                                                            
    </tr>
                                                                        
    </table>
                                                                    
    </td>
                                                                    
    <td width="100">
                                                                        
    &nbsp;
                                                                    
    </td>
                                                                    
    <td>
                                                                        
    <table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                                                            
    <tr>
                                                                                
    <td align="center">
                                                                                    
    <table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
                                                                                        
    <tr>
                                                                                            
    <td align="center">
                                                                                                
    <href="/school/school120.html" target="_blank">
                                                                                                    
    <img src="/upimg/jiaxiaopic/20085511504944854.jpg" width="104" onload="javascript:DrawImage110(this); "
                                                                                                        border
    ="0" /></a>
                                                                                            
    </td>
                                                                                        
    </tr>
                                                                                    
    </table>
                                                                                
    </td>
                                                                            
    </tr>
                                                                        
    </table>
                                                                    
    </td>
                                                                    
    <td width="100">
                                                                        
    &nbsp;
                                                                    
    </td>
                                                                    
    <td>
                                                                        
    <table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                                                            
    <tr>
                                                                                
    <td align="center">
                                                                                    
    <table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
                                                                                        
    <tr>
                                                                                            
    <td align="center">
                                                                                                
    <href="/school/school115.html" target="_blank">
                                                                                                    
    <img src="/upimg/jiaxiaopic/200711291702474136.jpg" width="104" onload="javascript:DrawImage110(this); "
                                                                                                        border
    ="0" /></a>
                                                                                            
    </td>
                                                                                        
    </tr>
                                                                                    
    </table>
                                                                                
    </td>
                                                                            
    </tr>
                                                                        
    </table>
                                                                    
    </td>
                                                                    
    <td width="100">
                                                                        
    &nbsp;
                                                                    
    </td>
                                                                    
    <td>
                                                                        
    <table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                                                            
    <tr>
                                                                                
    <td align="center">
                                                                                    
    <table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
                                                                                        
    <tr>
                                                                                            
    <td align="center">
                                                                                                
    <href="/school/school115.html" target="_blank">
                                                                                                    
    <img src="/upimg/jiaxiaopic/2007112916351958316.jpg" width="104" onload="javascript:DrawImage110(this); "
                                                                                                        border
    ="0" /></a>
                                                                                            
    </td>
                                                                                        
    </tr>
                                                                                    
    </table>
                                                                                
    </td>
                                                                            
    </tr>
                                                                        
    </table>
                                                                    
    </td>
                                                                    
    <td width="100">
                                                                        
    &nbsp;
                                                                    
    </td>
                                                                    
    <td>
                                                                        
    <table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                                                            
    <tr>
                                                                                
    <td align="center">
                                                                                    
    <table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
                                                                                        
    <tr>
                                                                                            
    <td align="center">
                                                                                                
    <href="/school/school115.html" target="_blank">
                                                                                                    
    <img src="/upimg/jiaxiaopic/2007112916345714642.jpg" width="104" onload="javascript:DrawImage110(this); "
                                                                                                        border
    ="0" /></a>
                                                                                            
    </td>
                                                                                        
    </tr>
                                                                                    
    </table>
                                                                                
    </td>
                                                                            
    </tr>
                                                                        
    </table>
                                                                    
    </td>
                                                                    
    <td width="100">
                                                                        
    &nbsp;
                                                                    
    </td>
                                                                    
    <td>
                                                                        
    <table border="0" width="121" height="102" cellpadding="0" cellspacing="0" bgcolor="#CCCCCC">
                                                                            
    <tr>
                                                                                
    <td align="center">
                                                                                    
    <table width="98%" height="100" border="0" cellspacing="2" cellpadding="0" bgcolor="#ffffff">
                                                                                        
    <tr>
                                                                                            
    <td align="center">
                                                                                                
    <href="/school/school115.html" target="_blank">
                                                                                                    
    <img src="/upimg/jiaxiaopic/2007112916594548344.jpg" width="104" onload="javascript:DrawImage110(this); "
                                                                                                        border
    ="0" /></a>
                                                                                            
    </td>
                                                                                        
    </tr>
                                                                                    
    </table>
                                                                                
    </td>
                                                                            
    </tr>
                                                                        
    </table>
                                                                    
    </td>
                                                                    
    <td width="100">
                                                                        
    &nbsp;
                                                                    
    </td>
                                                                
    </tr>
                                                            
    </table>
                                                        
    </td>
                                                        
    <td id="demo2">
                                                        
    </td>
                                                    
    </tr>
                                                
    </table>
                                            
    </td>
                                        
    </tr>
                                    
    </table>
                                
    </div>

                                
    <script type="text/javascript" language="JavaScript">
                                     
    var speed=10;    //速度数值越大速度越慢
                                     demo2.innerHTML=demo1.innerHTML; //将demo1的HTML装入demo2
                                     function Marquee()
                                     {
                                        
    if(demo2.offsetWidth-demo.scrollLeft<=0)
                                        {
                                            demo.scrollLeft
    -=demo1.offsetWidth;
                                        }
                                        
    else
                                        {
                                            demo.scrollLeft
    ++;
                                        }
                                     }
                                     
    var MyMar=setInterval(Marquee,speed); //加载定时器
                                     demo.onmouseover=function() {clearInterval(MyMar)} //清除定时器
                                     demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} //重新加载定时器
                                </script>

                            
    </td>
                        
    </tr>
                    
    </table>
                
    </td>
            
    </tr>
        
    </table>
  • 相关阅读:
    cocos2d-x 动画特效集合
    cocos2d-x 2.0 序列帧动画 深入分析
    cocos2d-x 的CCObject与autorelease 之深入分析
    cocos2d-x 2.0 拖尾效果分析
    Cocos2d-x 2.0 自适应多种分辨率
    cocos2d-x学习笔记
    golang中并发sync和channel
    深入学习golang(2)—channel
    golang手动管理内存
    golang 内存池
  • 原文地址:https://www.cnblogs.com/heimirror/p/1240593.html
Copyright © 2011-2022 走看看