预览模式: 普通 | 列表

倾听王菲网站关闭的通知

作者:青锋幽灵 日期:2008-11-29 15:31

不好意思，各位，倾听王菲（www.ofaye.com）因为种种原因要暂时关闭一段时间，在此本人向所有支持倾听王菲的网友表示抱歉。

开放时间另行通知，希望大家能够谅解！谢谢大家～

倾听王菲QQ群号码：8966464

类别: 默认分类 | 引用: 0 | 评论: 0 | 阅读: 120 | 打印 | 打包

通用获取父节点/子节点/子节点下所有节点ID的存储过程

作者:青锋幽灵 日期:2008-12-26 13:34

SQL代码
  1. --====================================/=======================================   
  2. --Powered By CMSDream Copyright © 2007-2008 All rights reserved.   
  3. --13:32 2008-12-26   
  4. --通用获取父节点/子节点/子节点下所有节点ID的存储过程   
  5. --====================================/=======================================   
  6. create proc [dbo].[cmsdream_SP_Navigate](   
  7.     @Type varchar(20),      -- parent/sub/all   
  8.     @TableName varchar(50),     --表名   
  9.     @PrimaryField varchar(50),  --数据表的主ID字段   
  10.     @ParentField varchar(50),   --数据表中的父ID字段   
  11.     @CurrentID int,         --表中当前主ID   
  12.     @OutputField varchar(1000) = '',   
  13.     @OrderField varchar(50) = ''  
  14. )AS  
  15. begin  
  16.     if @CurrentID <= 0 return  
  17.     set @Type = lower(@Type)   
  18.     if @OutputField = '' set @OutputField = '*'  
  19.     declare @sql nvarchar(4000)   
  20.     declare @IDList nvarchar(2000)   
  21.   
  22.     if @Type = 'all'  
  23.     begin  
  24.         set @IDList = cast(@CurrentID As nvarchar(12))   
  25.   
  26.         declare @IDTemp1 nvarchar(2000) set @IDTemp1 = @IDList   
  27.         declare @IDTemp2 nvarchar(2000) set @IDTemp2 = ''  
  28.         declare @SubCount int set @SubCount = 1   
  29.   
  30.         while @SubCount > 0   
  31.         begin  
  32.             set @IDTemp2 = ''  
  33.             if len(@IDTemp1) > 0   
  34.             begin  
  35.                 set @sql = 'select @IDTemp2 = @IDTemp2 + '','' + cast([' + @PrimaryField + '] As nvarchar(12)) from ' + @TableName + ' where [' + @ParentField + '] IN (' + @IDTemp1 + ')'  
  36.                 exec sp_executesql @sql,N'@IDTemp2 nvarchar(2000) output',@IDTemp2 output  
  37.             end  
  38.   
  39.             if len(@IDTemp2) > 1   
  40.             begin  
  41.                 set @IDTemp2 = substring(@IDTemp2,2,len(@IDTemp2)-1)   
  42.                 set @IDList = @IDList + ',' + @IDTemp2   
  43.             end  
  44.             set @IDTemp1 = @IDTemp2   
  45.   
  46.             set @SubCount = 0   
  47.             if len(@IDTemp2) > 1   
  48.             begin  
  49.                 set @sql = 'select @SubCount = count(*) from ' + @TableName + ' where [' + @ParentField + '] IN (0' + @IDTemp2 + ')'  
  50.                 exec sp_executesql @sql,N'@SubCount int output',@SubCount output  
  51.             end  
  52.         end  
  53.         if @OrderField = ''  
  54.             exec('select ' + @OutputField + ' from ' + @TableName + ' where [' + @PrimaryField + '] IN (' + @IDList + ')')   
  55.         else  
  56.             exec('select ' + @OutputField + ' from ' + @TableName + ' where [' + @PrimaryField + '] IN (' + @IDList + ') Order BY ' + @OrderField)   
  57.     end  
  58.   
  59.     if @Type = 'parent'  
  60.     begin  
  61.         set @IDList = cast(@CurrentID As nvarchar(12)) + ','  
  62.         declare @ParentID int set @ParentID = 0   
  63.            
  64.         set @sql = 'select @ParentID = [' + @ParentField + '] from ' + @TableName + ' where [' + @PrimaryField + '] = ' + cast(@CurrentID As nvarchar(12))   
  65.         exec sp_executesql @sql,N'@ParentID int output',@ParentID output  
  66.   
  67.         while @ParentID > 0   
  68.         begin  
  69.             set @IDList = @IDList + cast(@ParentID As nvarchar(12)) + ','  
  70.             set @sql = 'select @ParentID = [' + @ParentField + '] from ' + @TableName + ' where [' + @PrimaryField + '] = ' + cast(@ParentID As nvarchar(12))   
  71.             exec sp_executesql @sql,N'@ParentID int output',@ParentID output  
  72.         end  
  73.         set @IDList = substring(@IDList,1,len(@IDList)-1)   
  74.         if @OrderField = ''  
  75.             exec('select ' + @OutputField + ' from ' + @TableName + ' where [' + @PrimaryField + '] IN (' + @IDList + ')')   
  76.         else  
  77.             exec('select ' + @OutputField + ' from ' + @TableName + ' where [' + @PrimaryField + '] IN (' + @IDList + ') Order BY ' + @OrderField)   
  78.     end  
  79.   
  80.            
  81.     if @Type = 'sub'  
  82.     begin  
  83.         if @OrderField = ''  
  84.             exec('select ' + @OutputField + ' from ' + @TableName + ' where [' + @ParentField + '] = ' + @CurrentID + ' OR [' + @PrimaryField + '] = ' + @CurrentID)   
  85.         else  
  86.             exec('select ' + @OutputField + ' from ' + @TableName + ' where [' + @ParentField + '] = ' + @CurrentID + ' OR [' + @PrimaryField + '] = ' + @CurrentID + ' Order BY ' + @OrderField)   
  87.     end  
  88. end  
  89.   
  90.   
  91. /*   
  92.     --测试   
  93.     exec cmsdream_SP_Navigate 'parent','cmsdream_Nodes','NodeID','ParentID',116,'NodeID,Name','NavSort Desc'  
  94.     exec cmsdream_SP_Navigate 'sub','cmsdream_Nodes','NodeID','ParentID',76,'NodeID,Name'  
  95.     exec cmsdream_SP_Navigate 'all','cmsdream_Nodes','NodeID','ParentID',4,'NodeID,Name'  
  96. */  
类别: SQL Server | 引用: 0 | 评论: 0 | 阅读: 47 | 打印 | 打包

【效果】精辟的抖动效果

作者:青锋幽灵 日期:2008-12-02 10:53

XML/HTML代码
  1. <img id="win" style='position:relative' src="http://ghost.cmsdream.com/samples/quake/img.jpg"><br /><br />     
  2. <button onclick="quake()">振动</button>     
  3. <script type="text/javascript">     
  4. var a=['top','left'],b=0;      
  5. function quake(u){      
  6.     u=setInterval(function(){      
  7.         document.getElementById('win').style[a[b%2]]=(b++)%4<2?0:4;      
  8.         if(b>15){clearInterval(u);b=0}      
  9.     },32);      
  10. }      
  11. </script>  

预览效果

类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 95 | 打印 | 打包

完美js模拟网页对话框效果(可拖曳)

作者:青锋幽灵 日期:2008-10-23 10:51

JavaScript代码
  1. /**  
  2.     Powered By CMSDream Copyright © 2007-2008 All rights reserved.  
  3.     23:25 2008-5-3  
  4. **/  
  5. var msgbox_scripts = document.getElementsByTagName("script");   
  6. msgbox_path = msgbox_path.substring(0, msgbox_path.lastIndexOf('/')+1);   
  7.   
  8. var CMSMsgBox = function(oWidth, oHeight, oSkin, oTitle){   
  9.     this.Id = 'msgbox_'+Math.random().toString().replace('\.', '_');   
  10.     /*  
  11.      * 位置  
  12.      * =================  
  13.      * ===== 1 2 3 =====  
  14.      * ===== 4 5 6 =====  
  15.      * ===== 7 8 9 =====  
  16.      * =================  
  17.      */  
  18.     this.Position = 5;   
  19.   
  20.     this.Skin = oSkin || 'default';   
  21.     this.Width = oWidth || 500;   
  22.     this.Height = oHeight || 260;   
  23.        
  24.     this.Title = oTitle || 'CMSDream:';   
  25.     this.Value = '';   
  26.     this.Float = true;   
  27.     this.Mask = false;   
  28.     this.Drag = true;   
  29.     this.Return = false;   
  30.     this.BoxDiv = null;   
  31. };   
  32.   
  33. CMSMsgBox.prototype.show = function(){   
  34.     /* 加载样式表 */  
  35.     if(!this.$('msgbox_styles')){   
  36.         var css = document.createElement('link');   
  37.         css.setAttribute('href', msgbox_path + 'msgbox.css');   
  38.         css.setAttribute('id', 'msgbox_styles');   
  39.         css.setAttribute('rel', 'stylesheet');   
  40.         css.setAttribute('type', 'text/css');   
  41.         document.getElementsByTagName('head')[0].appendChild(css);   
  42.     }   
  43.     if(this.$(this.Id))return false;   
  44.     this.Return = true;   
  45.     this.BoxDiv = this.createDiv(document.body, 'div', 'block', this.Id, 'msgbox_main_div');       
  46.     if(this.Mask)this.createMask();    
  47.     this.showBox();   
  48. };   
  49.   
  50. CMSMsgBox.prototype.showBox = function(){   
  51.     var self = this;   
  52.     var div = new Array();   
  53.        
  54.     div['box'] = this.createDiv(this.BoxDiv, 'div', 'block', this.Id+'bgcolor_div', 'msgbox_box msgbox_box_'+this.Skin);   
  55.     if(this.Width)div['box'].style.width = this.Width+'px';   
  56.     if(this.Height && this.Skin != 'loading')div['box'].style.height = this.Height+'px';   
  57.        
  58.     div['title'] = this.createDiv(div['box'], 'div', null, null, 'msgbox_title');   
  59.   
  60.     /* =====================================  
  61.      * 拖曳效果  
  62.      *=====================================**/  
  63.     if(this.Drag){   
  64.         div['move'] = this.createDiv(this.BoxDiv, 'div', 'none', null, 'msgbox_move_div');         
  65.         div['title'].style.cursor = 'move';   
  66.         div['title'].onmousedown = function(e){   
  67.             var X = document.all ? event.clientX : e.pageX;   
  68.             var Y = document.all ? event.clientY : e.pageY;   
  69.             var T = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;   
  70.             var cLeft = div['code'].offsetLeft + div['box'].offsetLeft;   
  71.             var cTop = div['code'].offsetTop + div['box'].offsetTop - T;   
  72.             if((X > cLeft && X < (cLeft + div['code'].offsetWidth)) && (Y > cTop && Y < (cTop + div['code'].offsetHeight)))   
  73.             return;   
  74.             this.style.zIndex += 10;       
  75.             this.setAttribute('MD', '1');   
  76.             this.setAttribute('XCX', parseInt(X - div['box'].offsetLeft).toString());   
  77.             this.setAttribute('XCY', parseInt(Y - div['box'].offsetTop).toString());   
  78.             div['move'].style.width = parseInt(div['box'].offsetWidth-10) + 'px';   
  79.             div['move'].style.height = parseInt(div['box'].offsetHeight - 10) + 'px';   
  80.             div['move'].style.left = div['box'].offsetLeft + 'px';   
  81.             div['move'].style.top = div['box'].offsetTop + 'px';   
  82.             div['move'].style.display = 'block';   
  83.         };   
  84.         document.onmousemove = function(e){   
  85.             if(div['title'].getAttribute('MD')!='1')return;   
  86.             var XCX = div['title'].getAttribute('XCX');   
  87.             var XCY = div['title'].getAttribute('XCY');   
  88.             var X = document.all ? event.clientX : e.pageX;   
  89.             var Y = document.all ? event.clientY : e.pageY;   
  90.             div['move'].style.left = parseInt(X - XCX) + 'px';   
  91.             div['move'].style.top = parseInt(Y - XCY) + 'px';   
  92.         };   
  93.         document.onmouseup = function(e){   
  94.             if(div['title'].getAttribute('MD')!='1')return;   
  95.             div['title'].setAttribute('MD', '0');   
  96.             div['title'].setAttribute('XCX', '0');   
  97.             div['title'].setAttribute('XCY', '0');   
  98.             div['box'].style.left = div['move'].offsetLeft + 'px';   
  99.             div['box'].style.top = div['move'].offsetTop + 'px';   
  100.             if(self.IsObject(div['mask'])){   
  101.                 div['mask'].style.left = div['move'].offsetLeft + 'px';   
  102.                 div['mask'].style.top = div['move'].offsetTop + 'px';   
  103.             }      
  104.             div['move'].style.display = 'none';   
  105.         };   
  106.     }   
  107.     div['span'] = this.createDiv(div['title'], 'span', 'block', this.Id+'_msgTitle');   
  108.     div['span'].innerHTML = this.Title;   
  109.   
  110.     /* =====================================  
  111.      * 关闭按钮  
  112.      *=====================================**/  
  113.     div['code'] = this.createDiv(div['title'], 'code', 'block');   
  114.     div['code'].setAttribute('title', 'close');   
  115.     div['code'].style.position = 'relative';   
  116.     div['code'].innerHTML = "close";   
  117.     div['code'].onclick = function(){self.close();};   
  118.        
  119.     /* =====================================  
  120.      * 文本区域  
  121.      *=====================================**/  
  122.     div['text'] = this.createDiv(div['box'], 'div', 'block', this.Id+'_msgContent', 'msgbox_content');   
  123.     div['value'] = this.createDiv(div['text'], 'div', 'block', this.Id+'_msgValue', 'msgbox_container');   
  124.     div['clear'] = this.createDiv(div['text'], 'div', 'block', null, 'msgbox_clear');   
  125.     if(this.Height && this.Skin != 'loading'){   
  126.         div['value'].style.height = (div['box'].offsetHeight - div['title'].offsetHeight - 16) + 'px';   
  127.         div['value'].style.overflowY = 'auto';   
  128.     }   
  129.     div['value'].innerHTML = this.Value;   
  130.   
  131.     /* =====================================  
  132.      * 创建一个iframe档住select   
  133.      *=====================================**/  
  134.     if(document.all && !this.Mask){   
  135.         div['mask'] = this.createDiv(this.BoxDiv, 'iframe', 'block', null, 'msgbox_frame');   
  136.         div['mask'].style.width = div['box'].offsetWidth+'px';   
  137.         div['mask'].style.height = div['box'].offsetHeight+'px';   
  138.     }      
  139.        
  140.        
  141.     mDiv_Float();      
  142.     if(this.Float){   
  143.         if(window.addEventListener){   
  144.             window.addEventListener('resize', mDiv_Float, false);   
  145.             window.addEventListener('scroll', mDiv_Float, false);   
  146.         }else{   
  147.             window.attachEvent('onresize', mDiv_Float);   
  148.             window.attachEvent('onscroll', mDiv_Float);   
  149.         }   
  150.     }   
  151.   
  152.     /* =====================================  
  153.      * 漂浮效果  
  154.      *=====================================**/  
  155.     function mDiv_Float(){   
  156.         var t = document.body.scrollTop ? document.body.scrollTop : document.documentElement.scrollTop;   
  157.         var h = document.documentElement.clientHeight ? Math.min(document.documentElement.clientHeight, document.body.clientHeight) : document.body.clientHeight;   
  158.         var w = document.documentElement.clientWidth ? document.documentElement.scrollWidth : document.body.scrollWidth;   
  159.            
  160.         switch(self.Position){   
  161.             case 1:  {var l = 1;var r = t + 1;break;}   
  162.             case 2:  {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = t + 1;break;}   
  163.             case 3:  {var l = parseInt(w-div['box'].offsetWidth-1);var r = t + 1;break;}   
  164.             case 4:  {var l = 1;var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}   
  165.             case 5:  {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}   
  166.             case 6:  {var l = parseInt(w-div['box'].offsetWidth-1);var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}   
  167.             case 7:  {var l = 1;var r = parseInt(t+(h-div['box'].offsetHeight-1));break;}   
  168.             case 8:  {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = parseInt(t+(h-div['box'].offsetHeight-1));break;}   
  169.             case 9:  {var l = parseInt(w-div['box'].offsetWidth-1);var r = parseInt(t+(h-div['box'].offsetHeight-1));break;}   
  170.             default: {var l = parseInt((w/2)-(div['box'].offsetWidth/2));var r = parseInt(t+((h/2)-(div['box'].offsetHeight/2)));break;}   
  171.         }   
  172.            
  173.         div['box'].style.left = l+'px';   
  174.         div['box'].style.top = r+'px';   
  175.         if(document.all && !self.Mask){   
  176.             div['mask'].style.left = l+'px';   
  177.             div['mask'].style.top = r+'px';   
  178.         }   
  179.     }   
  180. };   
  181.   
  182. /* 蒙板 */  
  183. CMSMsgBox.prototype.createMask = function(){   
  184.     var self = this;   
  185.     var div = new Array(1);   
  186.     if(document.all)   
  187.     div['mask_ifr'] = this.createDiv(this.BoxDiv, 'iframe', 'block', null, 'msgbox_mask_frame');   
  188.     div['mask_div'] = this.createDiv(this.BoxDiv, 'div', 'block', null, 'msgbox_mask_div');   
  189.        
  190.     function window_onresize(){   
  191.         var h = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight);           
  192.         var w = document.all ? Math.min(document.documentElement.scrollWidth, document.body.scrollWidth) :    
  193.                 Math.max(document.documentElement.scrollWidth, document.body.scrollWidth);   
  194.            
  195.         div['mask_div'].style.width = w + 'px';   
  196.         div['mask_div'].style.height = h + 'px';   
  197.         if(document.all){   
  198.             div['mask_ifr'].style.width = div['mask_div'].offsetWidth + 'px';   
  199.             div['mask_ifr'].style.height = div['mask_div'].offsetHeight + 'px';   
  200.         }   
  201.     }   
  202.        
  203.     if(window.addEventListener){   
  204.         window.addEventListener('scroll', window_onresize, false);   
  205.         window.addEventListener('resize', window_onresize, false);   
  206.     }else{   
  207.         window.attachEvent('onscroll', window_onresize);   
  208.         window.attachEvent('onresize', window_onresize);   
  209.     }   
  210.     if(this.Skin=='loading')div['mask_div'].ondblclick = function(){self.close();};   
  211.     window_onresize();   
  212. };   
  213.   
  214. /* 创建一个元素  */  
  215. CMSMsgBox.prototype.createDiv = function(iParent, element, display, id, clsname){   
  216.     var ii = document.createElement(element);   
  217.     if(typeof(display)=='string')ii.style.display = display;   
  218.     if(typeof(clsname)=='string')ii.className = clsname;   
  219.     if(typeof(id)=='string')ii.setAttribute('id', id);   
  220.     iParent.appendChild(ii);   
  221.     return ii;   
  222. };   
  223.   
  224. /* 关闭 */  
  225. CMSMsgBox.prototype.close = function(){    
  226.     if(this.IsObject(this.BoxDiv) && this.BoxDiv.parentNode){   
  227.         this.BoxDiv.parentNode.removeChild(this.BoxDiv);   
  228.     }   
  229. };   
  230.   
  231. CMSMsgBox.prototype.$ = function(o){   
  232.     return document.getElementById(o);   
  233. };   
  234.   
  235. CMSMsgBox.prototype.IsObject = function(o){   
  236.     return typeof(o)!='undefined' && o!=null;   
  237. };   
  238.   
  239. CMSMsgBox.prototype.setBackgroundColor=function(iColor){   
  240.     if(!this.$(this.Id+'bgcolor_div'))return;   
  241.     this.$(this.Id+'bgcolor_div').style.backgroundColor = iColor;   
  242. };   
  243.   
  244. CMSMsgBox.prototype.setColor=function(iColor){   
  245.     if(!this.$(this.Id+'_msgValue'))return;   
  246.     this.$(this.Id+'_msgValue').style.color = iColor;   
  247. };   
  248.   
  249. CMSMsgBox.prototype.setValue=function(iValue){   
  250.     if(!this.$(this.Id+'_msgValue'))return;   
  251.     this.$(this.Id+'_msgValue').innerHTML = iValue;   
  252. };   
  253.   
  254. CMSMsgBox.prototype.setTitle=function(iTitle){   
  255.     if(!this.$(this.Id+'_msgTitle'))return;   
  256.     this.$(this.Id+'_msgTitle').innerHTML = iTitle;   
  257. };  

效果图片：

效果预览

下载源代码

类别: Javascript | 引用: 0 | 评论: 0 | 阅读: 176 | 打印 | 打包

图片连续滚动(缓冲，一停一顿效果)，可左右翻滚

作者:青锋幽灵 日期:2008-09-12 10:31

样式表代码（scroll.css）：

CSS代码
  1. * {margin:0;padding:0;}   
  2. body {width:370px;}   
  3. a {text-decoration:none;color:#000;}   
  4. a:hover {text-decoration:underline;color:#f00;}   
  5. ul,li {float:left;width:100%;list-style-type:none;}   
  6. h3,h3 a {font-size:12px;font-weight:normal;font-family:"宋体",Verdana;}   
  7.   
  8. .bc {height:90px;clear:both;overflow:hidden;padding:3px 15px 0 15px;}   
  9. .bc a.scroll {width:12px;height:46px;overflow:hidden;text-indent:-100px;margin-top:5px;background:#333;}   
  10. .bc a.s1 {float:left;}   
  11. .bc a.s2 {float:rightright;}   
  12.   
  13. #scroll1 {padding:5px 8px 7px 8px;}   
  14. .bc div.scroll {float:left;position:relative;width:318px;left:6px;overflow:hidden;}   
  15.        
  16. div.scroll ul {width:8000%;}   
  17. div.scroll ul li {width:106px;padding:0 0 2px 0;text-align:center;}   
  18. div.scroll ul li img {clear:both;width:90px;height:60px;border:1px solid #ccc;margin:0 auto;}   
  19. div.scroll ul li h3 {height:20px;line-height:20px;overflow:hidden;}   
  20. div.scroll ul li h3,div.scroll ul li h3 a {color:#c00;font-family:"宋体";}  

效果JS代码（scroll.js）：

JavaScript代码
  1. function scroll_initialize(Id){   
  2.     var self    =this;   
  3.     var obj     = document.getElementById(Id);   
  4.     if(obj.getElementsByTagName('li').length==0)return;   
  5.     var links   = obj.getElementsByTagName('a');   
  6.     var a       = links[0];   
  7.     var b       = links[links.length-1];       
  8.     var ul      = obj.getElementsByTagName('ul')[0];   
  9.     var div     = obj.getElementsByTagName('div')[0];   
  10.         
  11.     var li_width    = obj.getElementsByTagName('li')[0].offsetWidth;   
  12.     var li_count    = obj.getElementsByTagName('li').length;   
  13.     var ul_width    = li_width * li_count;   
  14.        
  15.     this.speed      = 2000;   
  16.     this.mar        = null;   
  17.   
  18.     this.doSlide = function(n,t,d,c){   
  19.         var timers=new Array(n);   
  20.         var x=div.scrollLeft;   
  21.         for(var i=0;i<n;i++)(function(){   
  22.             if(timers[i]) clearTimeout(timers[i]);   
  23.             var j=i;   
  24.             timers[i]=setTimeout(function(){   
  25.                 if(d==0){   
  26.                     if(ul_width-div.scrollLeft<=0){   
  27.                         div.scrollLeft-=ul_width;   
  28.                     }else{             
  29.                         div.scrollLeft=x+Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));   
  30.                     }   
  31.                 }else{   
  32.                     if(div.scrollLeft<=0){   
  33.                     }else{             
  34.                         div.scrollLeft=x-Math.round((c*li_width)*Math.sin(Math.PI*(j+1)/(2*n)));   
  35.                     }   
  36.                 }   
  37.             },(i+1)*t);   
  38.         })();   
  39.   
  40.         if(ul_width-div.scrollLeft<=0 || (div.scrollLeft % li_width != 0 && div.scrollLeft != 0)){   
  41.             div.scrollLeft=0;   
  42.         }   
  43.     }      
  44.     this.istop=function(){   
  45.         clearInterval(self.mar);   
  46.     };   
  47.     this.istart=function(){   
  48.         self.mar = setInterval(function(){self.doSlide(20,40,0,1);},self.speed);   
  49.     };   
  50.        
  51.     this.initialize = function(){          
  52.         ul.innerHTML+=ul.innerHTML;   
  53.         ul.style.width = parseInt(ul_width * 2) + 'px';   
  54.         a.onclick=function(e){self.doSlide(20,40,0,3);return false;};   
  55.         a.onfocus=function(){this.blur();};   
  56.         a.onmouseout=function(){self.istart();};   
  57.         a.onmouseover=function(){self.istop();};   
  58.         b.onclick=function(e){self.doSlide(20,40,1,3);return false;};   
  59.         b.onfocus=function(){this.blur();};   
  60.         b.onmouseout=function(){self.istart();};   
  61.         b.onmouseover=function(){self.istop();};   
  62.         div.onmouseout=function(){self.istart();};   
  63.         div.onmouseover=function(){self.istop();};   
  64.         this.istart();   
  65.     };   
  66.        
  67.     this.initialize();   
  68. }  

页面HTML代码(scroll.html)：

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <title>doc1</title>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  6. <link href="scroll.css" rel="stylesheet" type="text/css" />  
  7. <script type="text/javascript" src="scroll.js"></script>  
  8. </head>  
  9.   
  10. <body>  
  11. <div class="bc" id="scroll1">  
  12.     <a href="#left" class="scroll s1" title="向左滚动">向左滚动</a>  
  13.     <div class="scroll">  
  14.         <ul>  
  15.             <li>  
  16.                 <a href="#"><img src="http://image2.766.com/res/h000/h69/img200809111627130.jpg" /></a>  
  17.                 <h3><a href="#">魔幻《天地OL》</a></h3>  
  18.             </li>  
  19.             <li>  
  20.                 <a href="#"><img src="http://image2.766.com/res/h000/h68/img200809091601330.jpg" /></a>  
  21.                 <h3><a href="#">《名将三国》</a></h3>  
  22.             </li>  
  23.             <li>  
  24.                 <a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051655460.jpg" /></a>  
  25.                 <h3><a href="#">变型金刚OL</a></h3>  
  26.             </li>  
  27.             <li>  
  28.                 <a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051653330.jpg" /></a>  
  29.                 <h3><a href="#">盛大《八门OL》</a></h3>  
  30.             </li>  
  31.             <li>  
  32.                 <a href="#"><img src="http://image2.766.com/res/h000/h67/img200809051650450.jpg" /></a>  
  33.                 <h3><a href="#">回合制《穿越OL》</a></h3>  
  34.             </li>  
  35.             <li>  
  36.                 <a href="#"><img src="http://image2.766.com/res/h000/h69/img200809111633050.jpg" /></a>  
  37.                 <h3><a href="#">卡通网页游戏乐土</a></h3>  
  38.             </li>  
  39.         </ul>  
  40.     </div>  
  41.     <a href="#right" class="scroll s2" title="向右滚动">向右滚动</a>  
  42. </div>  
  43. </body>  
  44. </html>  

 

 效果预览：

效果预览

代码下载：点击下载

类别: Javascript | 引用: 0 | 评论: 12 | 阅读: 695 | 打印 | 打包