在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