zoukankan      html  css  js  c++  java
  • 文字上下自动循环滚动-10

    <div class="main">
         <div class="h_1">
                        <ul class="hhh">
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月5日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月4日</a></span>今天天气晴朗,微风,适合出游</li>
                               <li><span><a href="#" target="_blank">2017年2月6日</a></span>今天天气晴朗,微风,适合出游</li>
                        </ul>
        </div>
    </div>

    .main{ clear:both; 500px; height:240px; overflow:hidden; margin:50px auto; background:#FFF; padding:10px;}
    .h_1{ height:240px; overflow:hidden; background:#ddffdd;}
    .main ul li{ text-indent:10px; height:30px; line-height:30px;color:#333;}
    .main ul li span{ float:right; margin-right:10px;}
    .main ul li a{ text-decoration:none; color:#666;}
    .main ul li a:hover{ color:#000;}

    $(document).ready(function(){
     var tm;
              $('.main').hover(function(){
                  clearInterval(tm)
              },function(){
                  tm=setInterval(function(){
                         $h=$('.hhh li:first').height();
                         $('.hhh').stop().animate({'marginTop':-$h},500,function(){
                         $('.hhh li:first').appendTo($('.hhh'));
                         $('.hhh').css({'marginTop':0});
                         $('.hhh li:first').hide();
                         $('.hhh li:first').show();
                })
                },1000)
              }).trigger('mouseout');
              
              //焦点图
              /*function ft(li_w,wrap_1,num_h,width_1,hover_1){
                      var liw=li_w.width();
                      var repeat;
                      var index=0;
                      var length_1=li_w.length;
                      wrap_1.hover(function(){
                               clearInterval(repeat)
                      },function(){
                              repeat=setInterval(function(){
                                  index++;
                                  if(index==length_1)
                                  { index=0};
                              ht(index)
                              },3000)
                       }).trigger("mouseout");

                   num_h.mouseover(function(){
                       index=num_h.index(this);
                   ht(index)
             });
     
                  function ht(index){
                         width_1.stop().animate({"marginLeft":-liw*index});                  
                         num_h.eq(index).addClass(hover_1).siblings().removeClass(hover_1);
                   };
           };
          ft($(".wwul li"),$(".bannerbox"),$(".olbg li"),$(".wwul"),("hbg1"));
               */
            
        
    });

  • 相关阅读:
    Node.js模块风格在浏览器中的尝试
    Node.js的模块写法入门
    JavaScript中“+”的陷阱(续)
    Firefox/Chrome/Safari的中可直接使用$/$$函数进行调试
    使用r.js压缩整个项目的JavaScript文件
    拥抱模块化的JavaScript
    图片播放(3)
    JavaScript中“+”的陷阱
    仅IE6/7浏览器SPAN元素包含块级元素会使SPAN的背景色显示
    JavaScript模态对话框类(拖拽时动画)
  • 原文地址:https://www.cnblogs.com/su1637/p/8203447.html
Copyright © 2011-2022 走看看