Silverlight实现简单鼠标手势控制页面滚动-css鼠标手势

[[5264]]

上图蓝色部分就是鼠标手势控制的部分，划过这块区域，浏览器的滚动条就会做出相应的反应。我写的这个程序只能适合在IE，Firefox我测试了一下没有反应，其他浏览器我并没有进行测试。

这个程序的设计目标：用Silverlight实现一个浮动在页面右下角的鼠标手势控制块，让用户用鼠标手势控制页面滚动，提供更好的用户浏览体验。

鼠标手势设计计划：

1.制作一个浮动DIV，承载Silverlight。

2.实现鼠标移动方向与速度识别

3.调用js控制scrollbar

4.测试

鼠标手势详细步骤：

1.制作一个浮动DIV，承载Silverlight。

Code
 1<div id="silverlightControlHost">
 2  <object data="data:application/x-silverlight-2,"

       type="application/x-silverlight-2" width="100%" height="100%">
 3              <param name="source" value="ClientBin/Scoll.xap"/>
 4              <param name="onerror" value="onSilverlightError" />
 5              <param name="background" value="blue" />
 6              <param name="minRuntimeVersion" value="3.0.40624.0" />
 7      <param name="autoUpgrade" value="true" />
 8     <param name="windowless" value"true" />
 9    <a href="http://go.microsoft.com/fwlink/?LinkID=149156&v=3.0.40624.0"

       style="text-decoration: none;">
10   <img src="http://go.microsoft.com/fwlink/?LinkId=108181"

      alt="获取 Microsoft Silverlight" style="border-style: none"/>
11              </a>
12          </object>

<iframe id="_sl_historyFrame" style='visibility:hidden;height:0;width:0;border:0px'>

</iframe></div>
用id为silverlightControlHost的DIV来承载Silverlight。用下面的js代码来使div浮动：

Code
1 <script type ="text/javascript">
2      function Pos(w, h) {
3          var silverdiv = document.getElementById("silverlightControlHost");
4          silverdiv.style.width = w;
5          silverdiv.style.height = h;
6          silverdiv.style.position = "absolute";
7          silverdiv.style.zIndex = 100;
8          silverdiv.style.top =
9            document.documentElement.scrollTop + document.documentElement.clientHeight - h;
10          silverdiv.style.left =
11            document.documentElement.scrollLeft + document.documentElement.clientWidth - w;
12
13      }
14 </script>
15 <script type ="text/javascript">
16      Pos(60, 60);
17      window.onscroll = function() {
18          Pos(60, 60);
19      }
20 </script>

2.实现鼠标移动方向与速度识别

Code
 1 public MainPage()
 2        {
 3            InitializeComponent();
 4            timer.Completed += new EventHandler(timer_Completed);
 5        }
 6
 7        void timer_Completed(object sender, EventArgs e)
 8        {
 9            //throw new NotImplementedException();
10            if (Math.Abs(v_x) <= V_Min && Math.Abs(v_y) <= V_Min)
11            {
12                v_x = 0;
13                v_y = 0;
14                const_time = 0;
15                Current_Time = 0;
16            }
17            else
18            {
19                if (Current_Time < const_time)
20                {
21                    Current_Time++;
22                }
23                else
24                {
25                    if (Math.Abs(v_x) > V_Min)
26                    {
27                        v_x = Math.Sign(v_x) * (Math.Abs(v_x) - Math.Abs(dec));
28                    }
29                    if (Math.Abs(v_y) > V_Min)
30                    {
31                        v_y = Math.Sign(v_y) * (Math.Abs(v_y) - Math.Abs(dec));
32                    }
33                }
34                ScollBy(v_x, v_y);
35                timer.Begin();
36            }
37        }
38        //惯性计算
39        double dec = 0.3;
40        const double V_Min = 0.3;
41        double Current_Time = 0;
42
43
44        Point StartPoint;//开始点
45        Point EndPoint;//结束点
46        List<Point> TempPoints = new List<Point>();//点集合
47        bool IsRecording = true;//是否录制
48        double v_x;
49        double v_y;
50        double const_time;
51        public Storyboard timer = new Storyboard() { Duration = new Duration(new TimeSpan(0, 0, 0, 0, 10)) };
52        //timer.Interval=10;
53        
54        private void MainInput_MouseMove(object sender, MouseEventArgs e)
55        {
56            if (IsRecording)
57            {
58                TempPoints.Add(e.GetPosition(null));
59            }
60        }
61
62        private void MainInput_MouseEnter(object sender, MouseEventArgs e)
63        {
64            P.Points.Clear();
65            P.Points.Add(e.GetPosition(null));
66            IsRecording = true;
67            StartPoint = e.GetPosition(null);
68            TempPoints.Clear();
69            TempPoints.Add(StartPoint);
70        }
71
72        private void MainInput_MouseLeave(object sender, MouseEventArgs e)
73        {
74            IsRecording = false;
75            EndPoint = TempPoints[TempPoints.Count - 1];
76            v_x = (StartPoint.X - EndPoint.X) / TempPoints.Count;
77            v_y = (StartPoint.Y - EndPoint.Y) / TempPoints.Count;
78            const_time = 100 / TempPoints.Count;
79            P.Points.Add(EndPoint);
80            timer.Stop();
81            timer.Begin();
82        }

3.调用js控制scrollbar

Code
1public void ScollBy(double x, double y)
2        {
3            //window.scollBy(x,y);
4            //直接调用js
5  System.Windows.Browser.HtmlPage.Window.Eval

(string.Format("window.scrollBy({0},{1});",x,y));
6        }
4.测试。

以上就可以完成这样的一个功能了。

【编辑推荐】