学做网站培训课程介绍

当前位置:

图片无缝滚动代码(鼠标悬停)

做网站时,为了达到滚动展示图片的效果,我们需要在网站上添加滚动代码,滚动分为四种形,向上滚动、向下滚动、向左滚动、向右滚动。(相关知识:HTML滚动字幕标签(marquee标签 )

通用图片上下、左右无缝滚动代码(鼠标悬停)

以下为图片上下、左右无缝滚动代码供大家自己建网站使用。(代码里的图片路径自行修改)

图片无缝滚动代码(上下滚动)


< !DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>jquery鼠标悬停图片上下滚动切换</title>
<style>

.toll_img{   float:left;width:200px;height:514px;}
.toll_info{  float:left;width:200px;height:514px;}

</style>

<script src="./jquery.min.js"></script>
<script>
$(function(){
    $(\'div\').mouseover(function(e){
    //alert(\'aaaaaaaaaa\');
         $(this).find(".toll_img").stop().animate({height:"0px"});

    })
    $(\'div\').mouseout(function(e){
        $(this).find(\'.toll_img\').stop().animate({height:"514px"});

    })
});
</script>

</head>
<body>

<div style="height:800px;">
</div>
 <div style="width:200px;height:514px;overflow:hidden;">
                <div class="toll_img"><a href="baidu.com"><img src="images/1.jpg" width="272" height="514"/></a></div>
                <div class="toll_info"><a href="baidu.com"><img src="images/2.jpg" height="514" width="272" /></a></div>
 </div>

</body>
</html>

图片无缝滚动代码(左右滚动)


< !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=utf-8" />
<title>鼠标感应图片无缝左右JS滚动代码 </title>
<link rel="stylesheet" type="text/css" href="http://www.16css.com/skin/mb001/images/demo.css"/>
</head>

<body>
<br /><br />
<div id="demotit"><span>效果演示</span></div>
<div align="center">

<!----------代码开始------------>
 
<script>
  var dir=1;//每步移动像素,大=快
  var speed=10;//循环周期(毫秒)大=慢
  var MyMar=null;
  function Marquee(){//正常移动
   var demo = document.getElementById("demo");
   var demo2 = document.getElementById("demo2");
   if (dir>0  && (demo2.offsetWidth-demo.scrollLeft)< =0)
   {
    demo.scrollLeft=0;
   }
   if (dir<0 &&(demo.scrollLeft<=0))
   {
    demo.scrollLeft=demo2.offsetWidth;
   }
   demo.scrollLeft =dir;
  }
  function onmouseoverMy() {
   window.clearInterval(MyMar);
  }//暂停移动
  function onmouseoutMy() {
   MyMar=setInterval(Marquee,speed);
  }//继续移动
  function r_left()
  {
   if (dir==-1)
    dir=1;
  }//换向左移
  function r_right()
  {
   if (dir==1)
    dir=-1;
  }//换向右移
 
  function IsIE()
  {
   var browser=navigator.appName
   if ((browser=="Netscape"))
   {
    return false;
   }
   else if(browser=="Microsoft Internet Explorer")
   {
    return true;
   }
   else
   {
    return null;
   }
  }
 
  var _IsIE = IsIE();
  var _MousePX = 0;
  var _MousePY = 0;
  var _DivLeft = 0;
  var _DivRight = 0;
  var _AllDivWidth = 0;
  var _AllDivHeight = 0;
  function MoveDiv(e){
   var obj = document.getElementById("demo");
     _MousePX = _IsIE ? (document.body.scrollLeft   event.clientX) : e.pageX;
    _MousePY = _IsIE ? (document.body.scrollTop   event.clientY) : e.pageY;
   //Opera Browser Can Support \'\'window.event\'\' and \'\'e.pageX\'\'
   var obj1 = null;
   if(obj.getBoundingClientRect)
   {
    //IE
    obj1 = document.getElementById("demo").getBoundingClientRect();
    _DivLeft = obj1.left;
    _DivRight = obj1.right;
    _AllDivWidth = _DivRight - _DivLeft;
   }
   else if(document.getBoxObjectFor)
   {
    //FireFox
    obj1 = document.getBoxObjectFor(obj);
    var borderwidth = (obj.style.borderLeftWidth != null && obj.style.borderLeftWidth != "") ? parseInt(obj.style.borderLeftWidth) : 0;
    _DivLeft = parseInt(obj1.x) - parseInt(borderwidth);
    _AllDivWidth = Cut_Px(obj.style.width);
    _DivRight = _DivLeft   _AllDivWidth;
   }
   else
   {
    //Other Browser(Opera)
    _DivLeft = obj.offsetLeft;
    _AllDivWidth = Cut_Px(obj.style.width);
    var parent = obj.offsetParent;
    if(parent != obj)
    {
     while (parent) {  
      _DivLeft  = parent.offsetLeft;
      parent = parent.offsetParent;
     }
    }
    _DivRight = _DivLeft   _AllDivWidth;
   }
 
   var pos1,pos2;
   pos1 = parseInt(_AllDivWidth * 0.4)   _DivLeft;
   pos2 = parseInt(_AllDivWidth * 0.6)   _DivLeft;
 
   if(_MousePX > _DivLeft && _MousePX < _DivRight)
   {
    if(_MousePX > _DivLeft && _MousePX < pos1)//Move left
    {
     r_left();
    }
    else if(_MousePX < _DivRight && _MousePX > pos2)//Move right
    {
     r_right();
    }
   
    if(_MousePX > pos1 && _MousePX < pos2)//Stop
    {
     onmouseoverMy();
     MyMar=null;
    }else if(_MousePX < pos1 || _MousePX > pos2)
    {
     if(MyMar==null)
     {
      MyMar=setInterval(Marquee,speed);
     }
    }
   }
  }
 
  function Cut_Px(cswidth)
  {
   cswidth = cswidth.toLowerCase();
   if(cswidth.indexOf("px") != -1)
   {
    cswidth.replace("px","");
    cswidth = parseInt(cswidth);
   }
   return cswidth;
  }
 
  function MoveOutDiv()
  {
   if(MyMar == null)
   {
    MyMar=setInterval(Marquee,speed);
   }
  }

 </script>
<div id="demo" style="OVERFLOW: hidden; WIDTH: 500px; margin:0px auto; COLOR: #ffffff; HEIGHT: 100px" onmousemove="MoveDiv(event);" onmouseout="MoveOutDiv();">
           

    <div id="demo1" style="width:100%;">
                  <table cellSpacing=0 cellPadding=0>
                    <tbody>
                    <tr vAlign=top>
                      <td vAlign=top noWrap>
                        <div align=right>
                         <img src="images/membership_seminar.jpg"/> <img src="images/pwpsoftcover.jpg"/> <img src="images/rhemacards.jpg"/> <img src="images/traks_classes.jpg"/> <img src="images/citycompschool.jpg"/> <img src="images/citykidssite.jpg"/> <img src="images/gc-general.jpg"/> <img src="images/groups.jpg"/>
                 
      </div></td></tr></tbody></table>
                  <td width="0">
        <div id="demo2" style="width:100%;"></div>
       </td>
       
      </div>
</div>  
 
<!----------代码结束------------>
 
</div>

</body>
</html>

评论已关闭。

相关教程