JavaScript实现滚动栏效果的方法
本文实例讲述了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实现滚动新闻的方法.分享给大家供大家参考.具体如下: rolling_new.html页面如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> New Document </ti
-
纯javascript实现四方向文本无缝滚动效果
实现一个文本无缝滚动的效果: <!DOCTYPE html> <!--[if lt IE 7 ]> <html lang="zh-CN" class="ie6"> <![endif]--> <!--[if IE 7 ]> <html lang="zh-CN" class="ie7"> <![endif]--> <!--[if IE 8 ]
-
JavaScript实现的Tween算法及缓冲特效实例代码
本文实例讲述了JavaScript实现的Tween算法及缓冲特效.分享给大家供大家参考,具体如下: 这里演示Tween 算法及缓冲特效的JavaScript代码,利用它可以做缓动.弹簧等很多动画效果,怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果呢,看懂了本代码你就明白了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tween-run-style-codes/ 具体代码如下: <!DOC
-
javascript实现状态栏文字首尾相接循环滚动的方法
本文实例讲述了javascript实现状态栏文字首尾相接循环滚动的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>中国风</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="JavaScript">
-
javascript 缓冲效果 实现代码
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> #divid{width:30px; height:30px;left:200px;top:0px;background:#666;position:absolute;opacity:0.1;filter:alpha(opacity=10);} span{display:block;padding:5px; cursor:pointer;font-size:12px;} //
-
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
JavaScript实现仿新浪微博大厅和未登录腾讯微博首页滚动效果,貌似这些天有不少朋友需要这功能,前几天已经发了几个了,不过那一个效果是用jquery实现的<jQuery向上循环滚动(仿新浪微博未登录首页滚动微博显示)>,今天发现这款是js制作的好,不敢独享,希望需要的朋友喜欢哦. 效果图展示如下: 查看演示 源码下载 html代码 <div class="wp"> <ul id="slider" class=&quo
-
JavaScript中的匀速运动和变速(缓冲)运动详细介绍
一个div的运动其实就是它与浏览器边框的距离在变动.如果他变化的速率一定,那就是匀速运动:如果变化的速率不一定,那么就是变速运动.当,变化率与聚离浏览器边框的距离成比例的话,那么就可以说是div在做缓冲运动. 其实,很简单,就是用一个定时器(timer),每隔一段时间来改变div聚浏览器边框的距离. 比如匀速运动: 进入定时器:(每隔30ms做) if(是否到达终点) { 停止定时器} else do{ 改变距离} 改变距离的方法决定是匀速还是变速(缓冲)运动. 匀速的比如: 复制代码 代码如下
-
JavaScript实现带缓冲效果的随屏滚动漂浮广告代码
本文实例讲述了JavaScript实现带缓冲效果的随屏滚动漂浮广告代码.分享给大家供大家参考,具体如下: 这里演示了始终随屏滚动的JavaScript代码,在国内的应用泛滥成灾了,特别是一些喜欢漂浮广告的站长,常把本代码用作了漂浮广告,其实这种效果的初衷是编写一个随屏滚动的菜单,让游客随时随地可以控制网站的导向. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-hc-style-scroll-adv-codes/ 具体代码如下: <html
-
javascript实现列表滚动的方法
本文实例讲述了javascript实现列表滚动的方法.分享给大家供大家参考.具体如下: index.html如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type&quo
-
javascript 缓冲效果实现代码 推荐
菜鸟版代码如下: 理解这段代码就基本上掌握了 复制代码 代码如下: function f_s() { var obj = document.getElementById("top"); obj.style.display = "block"; obj.style.height = "1px"; var sw = function () { var s_width = parseInt(obj.style.height); if (s_width
-
JavaScript控制网页平滑滚动到指定元素位置的方法
本文实例讲述了JavaScript控制网页平滑滚动到指定元素位置的方法.分享给大家供大家参考.具体如下: function elementPosition(obj) { var curleft = 0, curtop = 0; if (obj.offsetParent) { curleft = obj.offsetLeft; curtop = obj.offsetTop; while (obj = obj.offsetParent) { curleft += obj.offsetLeft; cu
-
javascript 层展开/关闭，带缓冲效果
层展开/关闭 - 运动缓冲效果 /* 函数名称: Scroll Scroll(obj, h, s) 参数说明: obj,[object] id值或对象. 必需 h,[height] 展开后的高度. 可选(默认为200px) s,[speed] 展开速度,值越小展开速度越慢. 可选(默认为1.2){建议取值为1.1到2.0之间[例如:1.17]}. 函数返回值: true 展开(对象的高度等于展开后的高度) false 关闭(对象的高度等于原始高度) */ function Scroll(obj,