JavaScript实现滚动栏效果的方法_php技巧

本文实例讲述了JavaScript实现滚动栏效果的方法。分享给大家供大家参考。具体如下:

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
  * {
   margin: 0;
   padding: 0;
  }
  #div1 ul{
   position: absolute;
   left: 0px;
   top: 0px;
  }
  #div1 ul li img {
   width: 187px;
   height: 125px;
  }
  #div1 ul li{
   float: left;
   width: 187px;
   height: 125px;
   list-style: none;
  }
  #div1{
   width: 748px;
   height: 125px;
   position: relative;
   background-color: chartreuse;
   overflow: hidden;
   float: left;
  }
  #body{
   width: 948px;
   height: 125px;
   margin: 100px auto; 

  }
  #body #leftDiv{
   float: left;
   width: 100px;
   height: 100px;
  }
  #body #rightDiv{
   float: left;
   width: 100px;
   height: 100px;
  } 

  #body #leftDiv button{
   background-image: url("image/left.PNG");
   width: 100px;
   height: 100px;
  }
  #body #leftDiv button img{
   width: 100px;
   height: 100px;
  }
  #body #rightDiv button img{
   width: 100px;
   height: 100px;
  }
 </style>
 <script>
  window.onload=function(){
   var oDiv=document.getElementById('div1');
   var oUl=oDiv.getElementsByTagName('ul')[0];
   var oLi=oUl.getElementsByTagName('li');
   var oLeft=document.getElementById('leftDiv');
   var oright=document.getElementById('rightDiv');
   oUl.innerHTML+=oUl.innerHTML;
   oUl.style.width=oLi[0].offsetWidth*oLi.length+'px';
   var speed=-2;
   function move(){
    if (oUl.offsetLeft<-oUl.offsetWidth/2){
     oUl.style.left='0';
    }else if(oUl.offsetLeft>0){
     oUl.style.left=-oUl.offsetWidth/2+'px';
    }
    oUl.style.left=oUl.offsetLeft+speed+'px';
   };
   var timer=setInterval(move,30);
   oLeft.onclick=function(){
    speed=-2;
   };
   oright.onclick= function () {
    speed=2;
   };
   oUl.onmouseover=function(){
    clearInterval(timer);
   };
   oUl.onmouseout=function(){
    timer=setInterval(move,30);
   };
  }
 </script>
</head>
<body>
<div id="body">
 <div id="leftDiv"><button><img src="image/left.PNG"/></button></div>
 <div id="div1">
  <ul>
   <li><img src="image/1.JPG"/></li>
   <li><img src="image/2.JPG"/></li>
   <li><img src="image/3.JPG"/></li>
   <li><img src="image/4.JPG"/></li>
  </ul>
 </div>
 <div id="rightDiv"><button><img src="image/right.PNG"/></button></div>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索javascript
滚动栏效果
javascript滚动条事件、javascript 滚动事件、javascript滚动到底部、javascript图片滚动、javascript 滚动条,以便于您获取更多的相关知识。

时间: 2024-09-13 17:24:14

JavaScript实现滚动栏效果的方法_php技巧的相关文章

JavaScript实现滚动栏效果的方法

  JavaScript实现滚动栏效果的方法         这篇文章主要介绍了JavaScript实现滚动栏效果的方法,涉及javascript操作html元素实现滚动的相关技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了JavaScript实现滚动栏效果的方法.分享给大家供大家参考.具体如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

javascript实现链接单选效果的方法_javascript技巧

本文实例讲述了javascript实现链接单选效果的方法.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>链接单选</title> <

JavaScript实现彩虹文字效果的方法_javascript技巧

本文实例讲述了JavaScript实现彩虹文字效果的方法.分享给大家供大家参考.具体如下: <HTML> <HEAD> <TITLE>Rainbow Text</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin hide from old browsers function createHexArray(n) { this.length = n; for (var i =

使用JavaScript实现连续滚动字幕效果的方法_javascript技巧

我们一般都用Marquee标签控制元素的滚动.但是单向的Marquee滚动是不连续的,每滚完一幕,就会出现一次空白.而下面介绍中的滚动则是连续的,毫不间断. 下面为你介绍这是如何实现的. 为了滚动能够"连续",我们需要将字幕的内容复制多遍,直到内容的高度不小于滚动区高度的两倍.然后我们将溢出的滚动条隐藏掉,用代码控制滚动条向下移动(这时内容将向上移动).当滚动条滚动到最下方时,理论上不能再往下滚动了,于是我们立刻调整滚动条,将它向上滚动到一个和当前画面一样的位置.结果我们看到的就是连续

PHP使用Mysqli类库实现完美分页效果的方法_php技巧

本文实例讲述了PHP使用Mysqli类库实现完美分页效果的方法.分享给大家供大家参考,具体如下: 本篇文章是基于的是我的上篇文章<PHP数据库操作之基于Mysqli的数据库操作类库>而量身打造,怎么使用 M 类库中的 FetchAll 方法做出完美分页. 分页在我们每个项目中都是必不可少的,而且出现的频率非常之多.这样就要求我们程序员在项目中怎样去以最快的速度.最简洁的代码去实现分页方案. 分页的实现大部分是依据 URL 传入的参数(一般是page)来实现,比如:http://localhos

php实现给图片加灰色半透明效果的方法_php技巧

本文实例讲述了php实现给图片加灰色半透明效果的方法.分享给大家供大家参考.具体实现方法如下: 原理: 1.首先计算出原图片的尺寸 2.创建相同尺寸的半透明图片 3.使用 imagecopy()方法,把新创建的半透明图片与原图合并 具体实现代码如下: 复制代码 代码如下: <?php /*php 给图片加灰色透明效果*/ $imfile = './0.jpg';//原图 $origim = imagecreatefromjpeg($imfile);//从 JPEG 文件或 URL 新建一图像  

javascript实现焦点滚动图效果 具体方法_javascript技巧

前台代码: 复制代码 代码如下: <div class="sub_box">                         <div id="p-select" class="sub_nav">                             <div class="sub_no" id="bd1lfsj">                           

最精简的JavaScript实现鼠标拖动效果的方法_javascript技巧

相对于其它的鼠标拖动效果,这款拖动特效还是比较精简的,而且它还支持鼠标吸附,不按鼠标左键它也可以会跟随鼠标移动:定义时候也相对方便,只用指定被拖动的DIV ID就可以了,扩展性很好. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=

Javascript实现飞动广告效果的方法

  本文实例讲述了Javascript实现飞动广告效果的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 6