zoukankan      html  css  js  c++  java
  • js实现类似新闻条目人物简介不间断的滚动

    <!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>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>无标题文档</title>

    <style type="text/css">
    body,h1,h2,h3,h4,h5,h6,p,blockquote,
    dl,dt,dd,ul,ol,li,a,span,i,b,
    form,fieldset,legend,button,input,textarea,
    th,td{margin:0;padding:0;}
    body{font-family:Arial, Helvetica, sans-serif;font-size:12px;}

    body,
    button,input,select,textarea/* for ie */{ color:#333;}
    address,em{font-style:normal;}
    h1,h2,h3,h4,h5,h6{font-family:"Microsoft YaHei";}

    ul,ol{list-style:none;}

    a{text-decoration:none; color:#333; cursor:pointer;}
    img{ border:0px;}
    a:hover{color:#a71f24;}
    .clear{clear:both;}

    .team{border:1px solid #e5e5e5;background:#f8f8f8;padding-bottom:10px;margin-bottom:10px;}
    .teamTitle{height:30px;line-height:30px;background:#015198;font-weight:normal;padding:0 14px;margin-bottom:12px;}
    .teamTitle a{float:right;font-size:14px;color:#fff;}
    .teamTitle span{font-size:16px;color:#fff;}
    .expert{height:113px;/*956px;*/margin:0 auto;}
    .expert dl{230px;height:113px;float:left;margin-right:9px;overflow:hidden;}
    .expert .e_end{margin-right:0;}
    .expert dl dt{84px;float:left;height:113px;margin-right:15px;}
    .expert dl dd{130px;float:left;height:113px;}
    .expert dl dd h2{line-height:21px;font-weight:normal;font-size:14px;color:#006699;height:20px;}
    .expert dl dd p{line-height:19px;color:#666666;height:19px;}
    .expert dl dd .adept{margin-bottom:10px;}
    .expert dl dd .more{background:url(../img/more.jpg) no-repeat left center;height:22px;text-align:center;line-height:22px;73px;}
    .expert dl dd .more a{color:#c60000;}
    .expert dl dd p span{color:#333333;}

    .expertindex{height:113px;/*956px;*/margin:0 auto;}
    .expertindex dl{230px;height:113px;float:left;margin-right:9px;overflow:hidden;}
    .expertindex .e_end{margin-right:0;}
    .expertindex dl dt{84px;float:left;height:113px;margin-right:15px;}
    .expertindex dl dd{130px;float:left;height:113px;}
    .expertindex dl dd h2{line-height:21px;font-weight:normal;font-size:14px;color:#006699;height:20px;}
    .expertindex dl dd p{line-height:19px;color:#666666;height:19px;}
    .expertindex dl dd .adept{margin-bottom:10px;}
    .expertindex dl dd .more{background:url(../img/more.jpg) no-repeat left center;height:22px;text-align:center;line-height:22px;73px;}
    .expertindex dl dd .more a{color:#c60000;}
    .expertindex dl dd p span{color:#333333;}

    </style>
    </head>

    <body>
             
    <div class="team" style="position:relative">
        <h2 class="teamTitle"><a href="/index.php?r=archives/guide&id=34&t=1401953186">更多>></a><span>专家团队</span></h2>
        <div style="956px; margin:0 auto; overflow:hidden">
        <div class="expertindex" >
                                                            
            <DIV id=roller_pro style="OVERFLOW: hidden; WIDTH: 970px; HEIGHT: 115px"><TABLE><TR><TD id=roller_pro_content><table width=965px border=0 cellspacing=0 cellpadding=0 align=center><tr>
                                                <td style="padding-left:5px;line-height:20px;color:#0">
                            <dl>
                                <dt><a href="/index.php?r=archives/guide/body&id=27&t=1401953186" target="_blank"><img src="http://www.baidu.com/img/bdlogo.gif" width="84"height="113"/></a></dt>
                                <dd>
                                    <h2>杨医生</h2>
                                    <p>主任医师</p>
                                    <p><span>科 室:</span> 心血管内科</p>
                                    <p class="adept"><span>职 务:</span> 科主任兼科研处处长</p>
                                    <p class="more"><a href="/index.php?r=archives/guide/body&id=27&t=1401953186" target="_blank">详细介绍</a></p>
                                </dd>
                            </dl>
                        </td>
                                                <td style="padding-left:5px;line-height:20px;color:#0">
                            <dl>
                                <dt><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank"><img src="http://data.baidu.com/image/0605-%E7%8A%80%E5%88%A9%E4%BB%81%E5%B8%88.jpg" width="84"height="113"/></a></dt>
                                <dd>
                                    <h2>孙医生</h2>
                                    <p>主任医师</p>
                                    <p><span>科 室:</span> 呼吸与危重症医学科</p>
                                    <p class="adept"><span>职 务:</span> 科主任</p>
                                    <p class="more"><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank">详细介绍</a></p>
                                </dd>
                            </dl>
                        </td>
                                                <td style="padding-left:5px;line-height:20px;color:#0">
                            <dl>
                                <dt><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank"><img src="http://www.baidu.com/img/bdlogo.gif" width="84"height="113"/></a></dt>
                                <dd>
                                    <h2>孙医生</h2>
                                    <p>主任医师</p>
                                    <p><span>科 室:</span> 呼吸与危重症医学科</p>
                                    <p class="adept"><span>职 务:</span> 科主任</p>
                                    <p class="more"><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank">详细介绍</a></p>
                                </dd>
                            </dl>
                        </td>
                        <td style="padding-left:5px;line-height:20px;color:#0">
                            <dl>
                                <dt><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank"><img src="http://www.baidu.com/img/bdlogo.gif" width="84"height="113"/></a></dt>
                                <dd>
                                    <h2>孙铁英</h2>
                                    <p>主任医师</p>
                                    <p><span>科 室:</span> 呼吸与危重症医学科</p>
                                    <p class="adept"><span>职 务:</span> 科主任</p>
                                    <p class="more"><a href="/index.php?r=archives/guide/body&id=187&t=1401953186" target="_blank">详细介绍</a></p>
                                </dd>
                            </dl>
                        </td>
                                                    
    </tr></table></TD><TD id=roller_temp_pro vAlign=top width=></TD></TR></TABLE></DIV>
    <script type="text/javascript">
    var h_roller_speed_dzcp=25
    roller_temp_pro.innerHTML=roller_pro_content.innerHTML
    function H_Roller_Marquee_dzcp(){
    if(roller_temp_pro.offsetWidth-roller_pro.scrollLeft<=0)
    roller_pro.scrollLeft-=roller_pro_content.offsetWidth
    else{
    roller_pro.scrollLeft++
    }
    }
    var h_roller_variable_dzcp=setInterval(H_Roller_Marquee_dzcp,h_roller_speed_dzcp)
    roller_pro.onmouseover=function() {clearInterval(h_roller_variable_dzcp)}
    roller_pro.onmouseout=function() {h_roller_variable_dzcp=setInterval(H_Roller_Marquee_dzcp,h_roller_speed_dzcp)}
    </script>                
    </div>
    </div>
    </div>

    </body>
    </html>

  • 相关阅读:
    ASP.WEB Form 几点知识
    feign 发送请求时,传多个参数时的写法
    springboot 关于log4j日志配置
    springboot+swagger
    整合Spring Data JPA与Spring MVC: 分页和排序pageable
    jpa 自定义sql 删除方法注意点
    jpa 中的save()方法
    mybatis javabean字段与数据库字段的映射
    分布式配置中心(Spring Cloud Config) (问题解答)
    微服务中的rpc 请求写法
  • 原文地址:https://www.cnblogs.com/dearxinli/p/3770857.html
Copyright © 2011-2022 走看看