>

【乐百家前段】JS达成兼容性较好的随屏滚动作效

- 编辑:乐百家599手机首页 -

【乐百家前段】JS达成兼容性较好的随屏滚动作效

js完结随显示器滚动的带缓冲效果的右下角广告代码,js滚动

乐百家前段,本文实例叙述了js实现随荧屏滚动的带缓冲效果的右下角广告代码。分享给我们供大家参考。具体如下:

叁个随显示屏自动滚动的右下角广告代码,这里请留意多少个参数:

id 你要滚动的开始和结果的id
r 放在右侧依旧左手 暗许是右臂
t 你要放在页面包车型地铁百般地点默许是贴着底边 0是贴着顶边
f 1表示一定 不写只怕0表示滚动(ie6固定无效)
是还是不是很实用吧,那个版本草切要过笔者三遍核查,包容性还不易。

运作效果截图如下:

乐百家前段 1

在线演示地址如下:

现实代码如下:

<!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=gbk" />
<title>随屏幕滚动的带缓冲效果的右下角广告</title>
<style>
 html,body{
  height:2000px;
 }
</style>
</head>
<body>
 <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >拖动滚动条试试哦~</div>
</body>
</html>
<script>
 function scroll(p){
  var d = document,w = window,o = d.getElementById(p.id),ie6 = /msie 6/i.test(navigator.userAgent);
  if(o){
   o.style.cssText  =";position:" (p.f&&!ie6?'fixed':'absolute') ";" (p.r?'left':"right") ":0;" (p.t!=undefined?'top:' p.t 'px':'bottom:0');
   if(!p.f||ie6){
    -function(){
    var t = 500,st = d.documentElement.scrollTop||d.body.scrollTop,c;
   c = st - o.offsetTop   (p.t!=undefined?p.t:(w.innerHeight||d.documentElement.clientHeight)-o.offsetHeight);//如果你是html 4.01请改成d.body,这里不处理以减少代码
    c!=0&&(o.style.top = o.offsetTop   Math.ceil(Math.abs(c)/10)*(c<0?-1:1)   'px',t=10);
    setTimeout(arguments.callee,t)
   }() 
   }
  }
 }
 scroll({
  id:'aa'
 })
</script>

指望本文所述对大家的javascript程序设计具备援助。

本文实例陈说了js达成随荧屏滚动的带缓冲效果的右下角广告代码。分享给我们供...

正文实例叙述了js达成随显示屏滚动的带缓冲效果的右下角广告代码。分享给我们供我们参谋。具体如下:

JS完毕包容性较好的随屏滚动作效果应,js包容性较好滚动

本文实例叙述了JS达成包容性较好的随屏滚动作效果应。分享给大家供大家参谋,具体如下:

代码中的参数解释如下:

id 你要滚动的内容的id
l 横坐标的地方 不写为紧贴左边
t 你要放在页面包车型客车要命地点暗中同意是贴着底边 0是贴着顶边
f 1表示一定 不写只怕0表示滚动。

本代码滚动时不会冒出震荡,随着显示屏大小而改动

运作效果截图如下:

乐百家前段 2

在线演示地址如下:

现实代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>随屏滚动</title>
<style>
 html,body{
  padding:0;
  margin:0;
 }
</style>
</head>
<body>
 <div id="aa" style="width:200px;height:200px;background:#c0c0c0;" >我在随屏滚</div>
 <div id="bb" style="width:200px;height:200px;background:#c0c0c0;" >我静止不动</div>
 <div style="width:100%;height:500px;background:#000"></div>
 <div style="width:100%;height:500px;background:green"></div>
 <div style="width:100%;height:500px;background:red"></div>
</body>
</html>
<script>
function scroll(p){
 var d = document,dd = d.documentElement,db = d.body,w = window,o = d.getElementById(p.id),ie = /msie/i.test(navigator.userAgent),style;
  if(o){
  o.style.cssText  =";position:" (p.f&&!ie?'fixed':'absolute') ";" (p.l==undefined?'right:0;':'left:' p.l 'px;') (p.t!=undefined?'top:' p.t 'px':'bottom:0');
   if(p.f&&ie){
   o.style.cssText  =';left:expression(body.scrollLeft   ' (p.l==undefined?db.clientWidth-o.offsetWidth:p.l) '   "px");top:expression(body.scrollTop  ' (p.t==undefined?db.clientHeight-o.offsetHeight:p.t) '  "px" );'
    db.style.cssText  =";background-image:url(about:blank);background-attachment:fixed;"
   }else{
    if(!p.f){
     w.onresize = w.onscroll = function(){
      var timer,timer1;
      return function(){
       if(timer)
        clearTimeout(timer);
       timer = setTimeout(function(){
        timer1 = setInterval(function(){
         var st = db.scrollTop,c;
         c = st - o.offsetTop   (p.t!=undefined?p.t:(w.innerHeight||db.clientHeight)-o.offsetHeight);
         if(c!=0){
          o.style.top = o.offsetTop   Math.ceil(Math.abs(c)/10)*(c<0?-1:1)   'px';
         }else{
          clearInterval(timer1);  
         }
        },10)
       },100)//控制滚动的频率越大频率越慢
      }
     }()
    }
   }
  } 
 }
 scroll({
  id:'aa'
 })
  scroll({
  id:'bb',
  l:0,
  t:200,
  f:1
  })
</script>

可望本文所述对大家JavaScript程序设计具备支持。

本文实例陈诉了JS完成包容性较好的随屏滚动作效果应。分享给大家供大家参照他事他说加以考察,具体如下...

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js控制多图左右滚动切换效果</title>
<link href="css/jiaobenzhijia.css" type="text/css" rel="stylesheet" />
<script type="text/javascript">
window.onload = function () {
 var oBtnLeft = document.getElementById("goleft");
 var oBtnRight = document.getElementById("goright");
 var oDiv = document.getElementById("indexmaindiv");
 var oDiv1 = document.getElementById("maindiv1");
 var oUl = oDiv.getElementsByTagName("ul")[0];
 var aLi = oUl.getElementsByTagName("li");
 var now = -5 * (aLi[0].offsetWidth   13);
 oUl.style.width = aLi.length * (aLi[0].offsetWidth   13)   'px';
 oBtnRight.onclick = function () {
 var n = Math.floor((aLi.length * (aLi[0].offsetWidth   13)   oUl.offsetLeft) / aLi[0].offsetWidth);

 if (n <= 5) {
 move(oUl, 'left', 0);
 }
 else {
 move(oUl, 'left', oUl.offsetLeft   now);
 }
 }
 oBtnLeft.onclick = function () {
 var now1 = -Math.floor((aLi.length / 5)) * 5 * (aLi[0].offsetWidth   13);

 if (oUl.offsetLeft >= 0) {
 move(oUl, 'left', now1);
 }
 else {
 move(oUl, 'left', oUl.offsetLeft - now);
 }
 }
 var timer = setInterval(oBtnRight.onclick, 5000);
 oDiv.onmouseover = function () {
 clearInterval(timer);
 }
 oDiv.onmouseout = function () {
 timer = setInterval(oBtnRight.onclick, 5000);
 }

};

function getStyle(obj, name) {
 if (obj.currentStyle) {
 return obj.currentStyle[name];
 }
 else {
 return getComputedStyle(obj, false)[name];
 }
}

function move(obj, attr, iTarget) {
 clearInterval(obj.timer)
 obj.timer = setInterval(function () {
 var cur = 0;
 if (attr == 'opacity') {
 cur = Math.round(parseFloat(getStyle(obj, attr)) * 100);
 }
 else {
 cur = parseInt(getStyle(obj, attr));
 }
 var speed = (iTarget - cur) / 6;
 speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
 if (iTarget == cur) {
 clearInterval(obj.timer);
 }
 else if (attr == 'opacity') {
 obj.style.filter = 'alpha(opacity:'   (cur   speed)   ')';
 obj.style.opacity = (cur   speed) / 100;
 }
 else {
 obj.style[attr] = cur   speed   'px';
 }
 }, 30);
} 
</script>
</head>
<body style="background:#CCC;">

<div class="indexmaindiv" id="indexmaindiv">
 <div class="indexmaindiv1 clearfix" >
 <div class="stylesgoleft" id="goleft"></div>
 <div class="maindiv1 " id="maindiv1">
 <ul id="count1">
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/1.jpg" /></div>
 <div class="teanames">乐静老师1</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/2.jpg" /></div>
 <div class="teanames">乐静老师2</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/3.jpg" /></div>
 <div class="teanames">乐静老师3</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/4.jpg" /></div>
 <div class="teanames">乐静老师4</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/5.jpg" /></div>
 <div class="teanames">乐静老师5</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/6.jpg" /></div>
 <div class="teanames">乐静老师6</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/7.jpg" /></div>
 <div class="teanames">乐静老师7</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/8.jpg" /></div>
 <div class="teanames">乐静老师8</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/1.jpg" /></div>
 <div class="teanames">乐静老师9</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/2.jpg" /></div>
 <div class="teanames">乐静老师10</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/3.jpg" /></div>
 <div class="teanames">乐静老师11</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/4.jpg" /></div>
 <div class="teanames">乐静老师12</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/5.jpg" /></div>
 <div class="teanames">乐静老师13</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/6.jpg" /></div>
 <div class="teanames">乐静老师14</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 <li>
 <div class="playerdetail">
 <div class="detailimg"><img src="images/7.jpg" /></div>
 <div class="teanames">乐静老师15</div>
 <div class="teadetail">获得新加坡南阳理工学院计算机学士学位擅长营销学培训</div>
 <a class="checkdetail" href="//www.jb51.net"></a>
 </div>
 </li>
 </ul>
 </div>
 <div class="stylesgoright" id="goright"></div>
 </div>
</div>
</body>
</html> 

现实代码如下:

正文实例叙述了js调控多图左右滚动切换效果。分享给大家供大家参照他事他说加以考察。具体如下:
那是一款纯js完成点击左右按键图片自动左右平整滚动,私下认可5个一组左右轮转,能够手动修改js参数更动滑动数据。
运作效果图:-------------------翻开效果-------------------

乐百家前段 3

您可能感兴趣的文章:

  • js达成随显示器滚动的带缓冲效果的右下角广告代码
  • JS达成的N多轻便无缝滚动代码(富含图像和文字效果)
  • JS实现的网易搜狐大厅文字内容滚动作效果应代码
  • JS实现网页上随滚动条滚动的层效果代码
  • JS落成双击荧屏滚动作效果应代码
  • JS完毕的页面自定义滚动条效果
  • js div完成文字滚动和图纸切换效果代码
  • js代码实现无缝滚动(文字和图片)
  • js完结Select列表内容自动滚动作效果应代码
  • 原生js完结模拟滚动条
  • JS落成包容性较好的随屏滚动作效果应

本文由乐百家前段发布,转载请注明来源:【乐百家前段】JS达成兼容性较好的随屏滚动作效