zoukankan      html  css  js  c++  java
  • 连续往上滚动jquery代码

    网页设计中经常用到的滚动,比如滚动评论。利用JQ很容易实现。代码如下

    CSS代码:

    1 .scrollDiv{
    2     height:153px;
    3     overflow:hidden;
    4     width:158px;
    5 }

    HTML代码:

    1 <div class="scrollDiv">
    2     <div id="scrollList">
    3         <p><strong>2144玩家:</strong>杨幂好美</p>
    4         <p><strong>2144玩家:</strong>杨幂</p>
    5         <p><strong>2144玩家:</strong>杨幂最丑</p>
    6         <p><strong>2144玩家:</strong>其实她们都不漂亮</p>
    7         <p><strong>2144玩家:</strong>杨幂整过容,<br>李晟好看。</p>
    8     </div>
    9 </div>

     

    jquery代码:

     1  
     2 jQuery(document).ready(function(){
     3  new Marquee($('#scrollList')[0],{speed:60,direction:'up'});           
     4 })
     5 function Marquee(obj,config){
     6  //alert('s');
     7  this.obj = obj;
     8  this.config = {speed:80,direction:'up',e:true}; 
     9  if(typeof config == 'object'){
    10   var J = $;
    11   J.extend(this.config, config);
    12  } 
    13  this.obj2 = null;
    14  this.timer = null;
    15  this.init();
    16 }
    17 Marquee.prototype = {
    18  init: function(){
    19   var _this = this;
    20   if(this.config.direction == 'up' || this.config.direction == 'down'){
    21    if(this.obj.offsetHeight < this.obj.parentNode.offsetHeight) return;
    22    this.obj2 = this.obj.cloneNode(true);
    23    $(this.obj).after(this.obj2);
    24   }
    25   function temp(){
    26    _this.marquee();
    27   }  
    28   var myMar = setInterval(temp,_this.config.speed);
    29   if(this.config.e){
    30    this.obj.parentNode.onmouseover = function(){clearInterval(myMar)};
    31    this.obj.parentNode.onmouseout = function(){myMar = setInterval(temp,_this.config.speed)};
    32   }
    33  },
    34  marquee: function(){
    35   var _this = this;
    36   var con = this.obj.parentNode;  
    37   if(this.obj2){
    38    var offset = (this.obj2.offsetTop - this.obj.offsetHeight)/2;
    39   }  
    40   if(this.config.direction == 'up'){
    41    if(this.obj2.offsetHeight <= con.scrollTop){
    42     con.scrollTop = 0;
    43    }else{
    44     con.scrollTop +=1;
    45    }
    46   }
    47  }
    48 }

     

    html5
  • 相关阅读:
    MySQL+Navicat for MySQL安装
    intellij idea14 +svn配置
    java重载(实现同一方法名,不同参数)
    Java连接MySQL数据库及操作
    通过Chrome的inspect对手机webview进行调试
    使用fiddler对手机上的程序进行抓包
    开始一个Android的appium实例
    Android模拟器内安装应用
    Appium的inspector使用
    python webdriver启动IE浏览器
  • 原文地址:https://www.cnblogs.com/naokr/p/2707242.html
Copyright © 2011-2022 走看看