在asp.net中使用JQuery的SlideViewer插件实现图片的滚动效果

Jquery的slideViewer插件。

1. background:
JQuery,Ext和propotype这几个js库都是很不错的东西。但是我个人还是比较喜欢JQuery,它相对于其它两个库来说更容易使用,但是Ext能够实现的一些很牛的Layout方面的东西现在JQuery还是说稍微逊色点。这里给大家介绍个使用JQuery的SlideViewer插件实现的图片的浏览功能。界面如下图所示:




2. Introduction:
这里就开始介绍下如何实现的:
第一步: 在vs2005(8)下创建一个普通的asp.net的website,如下所示：




第二步：在项目中添加用到的js文件,这里除了用到jquery.js,SlideViewer.js还有几个实现其它效果的js,如下图:




使用SlideViewer和easing功能的javascript代码:

<mce:script type="text/javascript"><!--
 

    $(window).bind("load", function() { 

       $("div#mygaltwo").slideView({

              easeFunc: "easeInOutBounce",

              easeTime: 2200

       });  

  }); 
// --></mce:script>

用到的Css样式代码：

<mce:style type="text/css"><!--
      .svw {width: 50px; height: 20px; background:lightblue;} 
    .svw ul {position: relative; left: -999em;}  /*core classes*/ 
    .svw img{
        width:expression( document.body.scrollWidth);
       
        border:1px dashed #000;
     }
    #mygaltwo{
       text-align:center;
       width:expression(document.body.scrollWidth);
       align:center;
     }
    
     .stripViewer {  position: relative; overflow: hidden;  border: 0px solid lightblue;   margin: 0 0 1px 0; } 
    .stripViewer ul { /* this is your UL of images */ margin: 0; padding: 0; position: relative; left: 0; top: 0; width: 1%; list-style-type: none; } 
    .stripViewer ul li {  float:left; } 
    .stripTransmitter { overflow: auto; width: 1%; } 
    .stripTransmitter ul { margin: 0; padding: 0; position: relative; list-style-type: none; }
    .stripTransmitter ul li{ width: 20px; float:left; margin: 0 1px 1px 0; }
    .stripTransmitter a{ font: bold 10px Verdana, Arial; text-align: center; line-height: 22px; background: lightblue; color: #fff; text-decoration: none; display: block; } 
    .stripTransmitter a:hover, a.current{ background: #fff; color: lightblue; }  /*tooltips formatting*/ 
    #tooltip { background: #fff; color: #000; opacity: 0.85; border: 5px solid #dedede; } 
    #tooltip h3 {  font: normal 10px Verdana;  margin: 0;  padding: 6px 2px;  border: 0; } 
   
--></mce:style><style type="text/css" mce_bogus="1">      .svw {width: 50px; height: 20px; background:lightblue;} 
    .svw ul {position: relative; left: -999em;}  /*core classes*/ 
    .svw img{
        width:expression( document.body.scrollWidth);
       
        border:1px dashed #000;
     }
    #mygaltwo{
       text-align:center;
       width:expression(document.body.scrollWidth);
       align:center;
     }
    
     .stripViewer {  position: relative; overflow: hidden;  border: 0px solid lightblue;   margin: 0 0 1px 0; } 
    .stripViewer ul { /* this is your UL of images */ margin: 0; padding: 0; position: relative; left: 0; top: 0; width: 1%; list-style-type: none; } 
    .stripViewer ul li {  float:left; } 
    .stripTransmitter { overflow: auto; width: 1%; } 
    .stripTransmitter ul { margin: 0; padding: 0; position: relative; list-style-type: none; }
    .stripTransmitter ul li{ width: 20px; float:left; margin: 0 1px 1px 0; }
    .stripTransmitter a{ font: bold 10px Verdana, Arial; text-align: center; line-height: 22px; background: lightblue; color: #fff; text-decoration: none; display: block; } 
    .stripTransmitter a:hover, a.current{ background: #fff; color: lightblue; }  /*tooltips formatting*/ 
    #tooltip { background: #fff; color: #000; opacity: 0.85; border: 5px solid #dedede; } 
    #tooltip h3 {  font: normal 10px Verdana;  margin: 0;  padding: 6px 2px;  border: 0; } 
   </style>

3. SourceCode:
http://download.csdn.net/source/1548637