鼠标滚轮控制panel滚动条

此实例通过对滚轮事件的监听,通过滚轮调控滚动条的前后移动,能够将其修改后选拔与使用滚轮缩放图片、退换反射率等特效。

javascript滚轮调控模拟滚动条,javascript滚轮

此实例通过对滚轮事件的监听,通过滚轮调控滚动条的前后移动,能够将其修改后使用与使用滚轮缩放图片、改动光滑度等特效。

<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    margin: 0; 
    padding: 0; 
   } 
   #boxwrap{ 
    position: relative; 
    width: 15px; 
    height: 500px; 
    margin: 50px auto; 
    box-sizing: border-box; 
    border: 1px solid gainsboro; 
    border-radius: 6px; 
   } 
   #box{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 13px; 
    height: 30px; 
    background: gray; 
    border-radius: 6px; 
   } 
  </style> 
  <script type="text/javascript"> 
   window.onload = function (){ 
    var boxwrp = document.getElementById('boxwrap'); 
    var box = document.getElementById('box'); 
    //兼容firefox 
    if(boxwrp.addEventListener){ 
     document.addEventListener("DOMMouseScroll", fn, false); 
    } 
    document.onmousewheel = fn;//兼容IE、chrome 

    function fn(ev){ 
     var ev = ev||event; 
     var bool = false; 
     //IE、chrome 向上:120,向下:-120 
     if(ev.wheelDelta){ 
      bool= ev.wheelDelta > 0? true : false; 
     } 
     //firefox 向上:-3,向下:3 
     else{ 
      bool= ev.detail < 0? true : false; 
     } 

     if(bool){ 
      if(box.offsetTop>=10){ 
       box.style.top = box.offsetTop - 10 + "px"; 
      } 
      else{ 
       box.style.top = 0; 
      } 

     } 
     else{ 
      if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){ 
       box.style.top = box.offsetTop + 10 + "px"; 
      } 
      else{ 
       box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px"; 
      } 
     } 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <div id="boxwrap"> 
   <div id="box"></div> 
  </div> 
 </body> 
</html> 

上述就是本文的全体内容,希望对大家的学习抱有帮忙,也可望我们多多匡助帮客之家。

此实例通过对滚轮事件的监听,通过滚轮调整滚动条的内外移动,能够将其修改后使用与利用滚…

在winform开拓中,通过设置Panel的AutoScroll属性来支配滚动条是或不是出示,但彰显滚动条的时候,鼠标的滚轮是不大概调整Panel里面包车型大巴滚动条的,只好调控Form的滚动条,当我们须求调节Panel的滚动条的时候,应该怎么办呢?

在winform开荒中,通过设置Panel的AutoScroll属性来支配滚动条是不是出示,但显得滚动条的时候,鼠标的滚轮是相当小概调整Panel里面包车型大巴滚动条的,只可以调节Form的滚动条,当大家供给调整Panel的滚动条的时候,应该咋办啊?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript模拟滚动条 兼容ie7</title>
    <link rel="stylesheet" type="text/css" href="css/reset.css">
    <style type="text/css">
        body{
            font: 16px/40px '微软雅黑';
        }
        h2{
            text-align: center;
            font-weight: 600;
            font-size: 1.4em;
        }
        h3{
            text-indent: 24px;
            font-size: 1.4em;
        }
        #scroll{
            width: 400px;
            margin: 100px auto;
            padding: 10px 30px 10px 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            height: 500px;
            overflow: hidden;
            position: relative;
        }
        #scroll-bar{
            position: absolute;
            width: 10px;
            left: 0px;
            top: 0px;
            border-left: 1px solid #ccc;
            border-radius: 4px;
        }
        #bar{
            width: 10px;
            border-top: 1px solid #ccc;
            border-bottom: 1px solid #ccc;
            border-radius: 4px;
            background-color: #ccc;
        }
    </style>
</head>
<body>
    <div id="scroll">
        <div id="content">
            <h2>春江花月夜</h2>
            <p>春江潮水连海平,海上明月共潮生。</p>
            <p>滟滟随波千万里,何处春江无月明。</p>
            <p>江流宛转绕芳甸,月照花林皆似霰。</p>
            <p>空里流霜不觉飞,汀上白沙看不见。</p>
            <p>江天一色无纤尘,皎皎空中孤月轮。</p>
            <p>江畔何人初见月?江月何年初照人?</p>
            <p>人生代代无穷已,江月年年望相似。</p>
            <p>不知江月待何人,但见长江送流水。</p>
            <p>白云一片去悠悠,青枫浦上不胜愁。</p>
            <p>谁家今夜扁舟子?何处相思明月楼?</p>
            <p>可怜楼上月徘徊,应照离人妆镜台。</p>
            <p>玉户帘中卷不去,捣衣砧上拂还来。</p>
            <p>此时相望不相闻,愿逐月华流照君。</p>
            <p>鸿雁长飞光不度,鱼龙潜跃水成文。</p>
            <p>昨夜闲潭梦落花,可怜春半不还家。</p>
            <p>江水流春去欲尽,江潭落月复西斜。</p>
            <p>斜月沉沉藏海雾,碣石潇湘无限路。</p>
            <p>不知乘月几人归,落月摇情满江树。</p>
            <h3>译文:</h3>
            <div class="ele_text_res">
                <p>春天的江潮水势浩荡,与大海连成一片,一轮明月从海上升起,好像与潮水一起涌出来。</p>
                <p>月光照耀着春江,随着波浪闪耀千万里,所有地方的春江都有明亮的月光。</p>
                <p>江水曲曲折折地绕着花草丛生的原野流淌,月光照射着开遍鲜花的树林好像细密的雪珠在闪烁。</p>
                <p>月色如霜,所以霜飞无从觉察。洲上的白沙和月色融合在一起,看不分明。</p>
                <p>江水、天空成一色,没有一点微小灰尘,明亮的天空中只有一轮孤月高悬空中。</p>
                <p>江边上什么人最初看见月亮,江上的月亮哪一年最初照耀着人?</p>
                <p>人生一代代地无穷无尽,只有江上的月亮一年年地总是相像。</p>
                <p>不知江上的月亮等待着什么人,只见长江不断地一直运输着流水。</p>
                <p>游子像一片白云缓缓地离去,只剩下思妇站在离别的青枫浦不胜忧愁。</p>
                <p>哪家的游子今晚坐着小船在漂流?什么地方有人在明月照耀的楼上相思?</p>
                <p>可怜楼上不停移动的月光,应该照耀着离人的梳妆台。</p>
                <p>月光照进思妇的门帘,卷不走,照在她的捣衣砧上,拂不掉。</p>
                <p>这时互相望着月亮可是互相听不到声音,我希望随着月光流去照耀着您。</p>
                <p>鸿雁不停地飞翔,而不能飞出无边的月光;月照江面,鱼龙在水中跳跃,激起阵阵波纹。</p>
                <p>(此二句写月光之清澈无边,也暗含鱼雁不能传信之意。)</p>
                <p>昨天晚上随意谈着梦中落下的花,可惜的是春天过了一半还不能回家。</p>
                <p>江水带着春光将要流尽,水潭上的月亮又要西落。</p>
                <p>斜月慢慢下沉,藏在海雾里,碣石与潇湘的离人距离无限遥远。</p>
                <p>不知有几人能趁着月光回家,唯有那西落的月亮摇荡着离情,洒满了江边的树林。</p>
            </div>
        </div>
        <div id="scroll-bar">
            <div id="bar"></div>
        </div>
    </div>
    <script type="text/javascript">
        // 原理就是 框体有大小,内容无大小,框体超出部分隐藏 内容自动撑开, 根据比例获得滑块和滑框来进行滑动,滑块到顶部的距离,再换算成 内容-margin-top
        window.onload = function (){
            var scroll = document.getElementById("scroll");
            var content = document.getElementById("content");
            var scrollBar = document.getElementById("scroll-bar");
            var bar = document.getElementById("bar");
            var scrollH = scroll.offsetHeight;
            var contentH = content.offsetHeight;
            // 滚动条框 和框体的高度是一样的
            scrollBar.style.height = scrollH + "px";
            // 开始我想用right的,但是ie7 不兼容
            scrollBar.style.left = scroll.offsetWidth - 12 + "px";
            // 滚动条的高度等于 框体高*(框体的高度比上内容的高度) (小学数学);
            bar.style.height = scrollH*(scrollH/contentH)+'px';
            var isMove = false;//是否开启滑动
            var oldY = 0;//滑动之前的老位置 初始化为0
            bar.onmousedown = function (event){
                var event = event || window.event;
                oldY = event.clientY;
                isMove = true;
                return false;
            }
            document.onmouseup  = function (){
                isMove = false;
                return false;
            }
            document.onmousemove = function (event){
                var event = event || window.event;
                if (isMove) {
                    // 滚动条变化的值 dirY
                    var dirY = event.clientY - oldY;
                    goOn(dirY);
                    oldY = event.clientY;
                }
            }
            // 滚动事件
            scroll.onmousewheel = function (event){
                 var event  = event || window.event;
                 // event.wheelDelta 每次滚动都是+-120  这里设置一个系数 120 太大了更适合浏览器的滚动
                 goOn(-event.wheelDelta*0.2);
                 return false;
            }
            function goOn(dirY){
                // 滚动条滚动
                bar.style.marginTop = bar.offsetTop + dirY + 'px';
                // 越界处理
                if (bar.offsetTop < 0) {
                    bar.style.marginTop = "0px";
                }
                if ((bar.offsetTop+bar.offsetHeight)>scrollBar.offsetHeight) {
                    bar.style.marginTop = scrollBar.offsetHeight-bar.offsetHeight+'px';
                }
                // 内容框的margin-top
                content.style.marginTop = - bar.offsetTop/((scrollH-10)/contentH)+"px";
            }
        }
    </script>
</body>
</html>
<!DOCTYPE html> 
<html> 
 <head> 
  <meta charset="UTF-8"> 
  <title></title> 
  <style type="text/css"> 
   *{ 
    margin: 0; 
    padding: 0; 
   } 
   #boxwrap{ 
    position: relative; 
    width: 15px; 
    height: 500px; 
    margin: 50px auto; 
    box-sizing: border-box; 
    border: 1px solid gainsboro; 
    border-radius: 6px; 
   } 
   #box{ 
    position: absolute; 
    left: 0px; 
    top: 0px; 
    width: 13px; 
    height: 30px; 
    background: gray; 
    border-radius: 6px; 
   } 
  </style> 
  <script type="text/javascript"> 
   window.onload = function (){ 
    var boxwrp = document.getElementById('boxwrap'); 
    var box = document.getElementById('box'); 
    //兼容firefox 
    if(boxwrp.addEventListener){ 
     document.addEventListener("DOMMouseScroll", fn, false); 
    } 
    document.onmousewheel = fn;//兼容IE、chrome 

    function fn(ev){ 
     var ev = ev||event; 
     var bool = false; 
     //IE、chrome 向上:120,向下:-120 
     if(ev.wheelDelta){ 
      bool= ev.wheelDelta > 0? true : false; 
     } 
     //firefox 向上:-3,向下:3 
     else{ 
      bool= ev.detail < 0? true : false; 
     } 

     if(bool){ 
      if(box.offsetTop>=10){ 
       box.style.top = box.offsetTop - 10 + "px"; 
      } 
      else{ 
       box.style.top = 0; 
      } 

     } 
     else{ 
      if(box.offsetTop<=boxwrp.offsetHeight-box.offsetHeight-10){ 
       box.style.top = box.offsetTop + 10 + "px"; 
      } 
      else{ 
       box.style.top = boxwrp.offsetHeight - box.offsetHeight + "px"; 
      } 
     } 
    } 
   } 
  </script> 
 </head> 
 <body> 
  <div id="boxwrap"> 
   <div id="box"></div> 
  </div> 
 </body> 
</html> 

1、拖一个Panel到Form里面,修改Name为panel_content,并设置AutoScroll为True

1、拖一个Panel到Form里面,修改Name为panel_content,并设置AutoScroll为True

上述就是本文的全部内容,希望对大家的学习抱有帮忙,也盼望大家多多支持脚本之家。

2、在Form的Load事件中加多上面包车型地铁代码

2、在Form的Load事件中增加上边包车型客车代码

你恐怕感兴趣的小说:

  • 原生js完毕模拟滚动条
  • js模拟滚动条(横向竖向)
  • javascript模拟滚动条完成代码
  • javascript动画体系之模拟滚动条

     this.MouseWheel += FormSample_MouseWheel;

     this.MouseWheel += FormSample_MouseWheel;

3、在Form类中增添Form萨姆ple_MouseWheel方法

3、在Form类中增加FormSample_MouseWheel方法

   

   

图片 1图片 2View Code

图片 3View Code

 1 /// <summary>
 2         /// 滚动方法
 3         /// </summary>
 4         /// <param name=”sender”></param>
 5         /// <param name=”e”></param>
 6         void FormSample_MouseWheel(object sender, MouseEventArgs e)
 7         {
 8             //获取光标地方
 9             Point mousePoint = new Point(e.X, e.Y);
10             //换算成绝对本窗体的职位
11             mousePoint.Offset(this.Location.X, this.Location.Y);
12             //判别是不是在panel内
13             if (panel_content.RectangleToScreen(panel_content.DisplayRectangle).Contains(mousePoint))
14             {
15                 //滚动
16                 panel_content.AutoScrollPosition = new Point(0, panel_content.VerticalScroll.Value – e.Delta);
17             }
18         }

 1 /// <summary>
 2         /// 滚动方法
 3         /// </summary>
 4         /// <param name=”sender”></param>
 5         /// <param name=”e”></param>
 6         void FormSample_MouseWheel(object sender, MouseEventArgs e)
 7         {
 8             //获取光标位置
 9             Point mousePoint = new Point(e.X, e.Y);
10             //换算成相对本窗体的职分
11             mousePoint.Offset(this.Location.X, this.Location.Y);
12             //推断是或不是在panel内
13             if (panel_content.RectangleToScreen(panel_content.DisplayRectangle).Contains(mousePoint))
14             {
15                 //滚动
16                 panel_content.AutoScrollPosition = new Point(0, panel_content.VerticalScroll.Value – e.Delta);
17             }
18         }

 

 

经过上述步骤就可以用鼠标滚轮调控Panel里面包车型客车滚动条了。

通过以上步骤就能够用鼠标滚轮调整Panel里面包车型大巴滚动条了。

 

 

作者:风雨彩虹

作者:风雨彩虹

    

    

出处:

出处:

    

    

正文版权归作者和微博共有,招待转载,但未经小编同意必需保留此段申明,且在文章页面显明地方给出最先的作品连接,不然保留追究法律权利的权利。

 

相关文章