|
|
马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有帐号？立即注册
x
首先你要知道，当你开始学习DIV+CSS的时候，你要把以前所有用DW画布局表格的思维方法忘的一干二净(如果你以前是用TABLE布局的话)，然而这项技术更适合刚接触网页制作的人。
无缝转动的实例，本站已公布了以下几个，明天再转载蓝色论坛高人的一个实例，供人人进修。
一个转动图片的实例，很简便
再发两个JS无缝转动的实例
无缝转动代码，完整兼容IE,FF,Opera
简介：图片转动展现在企业站中很常常用到.固然Marquee能够完成.可是..屁股老是带着一片空缺.!客户不愿意了.以为太丢脸.那就做无间转动吧.固然我以为不难~.可并非大家都懂JS.无法!.为了不每次堕落的时分都喊拯救...从头做了个.挪用只管复杂化了.~最少我感到复杂了...空话未几说...
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>Marquee替换--无间转动</title><styletype="text/css"><!--*{padding:0;margin:0}body{margin:3em;font:12pxTahoma;background:#EAEAEA;color:#333333;line-height:20px}input,textarea{font:12pxTahoma;color:#666666;padding:2px;border:solid1px#DBDBDB}textarea{padding:5px;line-height:20px}p{margin:1em0}ul{}li{height:1%;overflow:hidden;list-style-type:none}a{color:#666666;text-decoration:none}a:hover{color:#333333}.r{float:right}.l{float:left}.b{font-weight:bold}.gray{color:#666666;margin-top:8px}.light{color:#FF6600;margin:05px}.case{display:block;padding:02em2em2em;border:solid1px#EAEAEA;background:#FFFFFF;margin-bottom:2em;height:1%;overflow:hidden}.title{display:block;padding:.5em2em.5em1em;margin:0-2em2em-2em;font-weight:bold;color:#000000;background:#FAFAFA;border-bottom:solid1px#EAEAEA}.call{display:block;}.key{display:block;width:8em;float:left}.type{display:block;width:6em;float:left}.info{padding-left:2em}.demo{margin-bottom:2em}--></style><styletype="text/css"><!--#MyMarqueeX{width:98%;height:150px;overflow:hidden;margin:0auto0auto}#MyMarqueeXimg{width:185px;height:125px;border:2pxsolid#e6e6e6;padding:1px;margin:5px}#MyMarqueeY{width:205px;height:420px;overflow:hidden;}#MyMarqueeYimg{width:185px;height:125px;border:2pxsolid#e6e6e6;padding:1px;margin:5px}--></style><scriptlanguage="javascript"type="text/javascript">//<!--//附带函数var//用ID猎取元素$=function(element){returntypeof(element)==object?element:document.getElementById(element);},//天生随机数RandStr=function(n,u){vartmStr="abcdefghijklmnopqrstuvwxyz0123456789";varLen=tmStr.length;varStr="";for(i=1;i<n+1;i++){Str+=tmStr.charAt(Math.random()*Len);}return(u?Str.toUpperCase():Str);};//--></script><scriptlanguage="javascript"type="text/javascript">//<!--/*******************************************-Marquee替换--无间转动-ByMudoo2008.8-http://hi.baidu.com/mt20********************************************newMarquee({obj:myMarquee,//转动工具（必需）name:MyMQ_1,//实例名（可选，不指定章随机）mode:x,//转动形式（可选，x=程度,y=垂直，默许x）speed:10,//转动速率（可选，越小速率越快，默许10）autoStart:true,//主动入手下手（可选，默许True）movePause:true//鼠标经由是不是停息（可选，默许True）});********************************************/varMyMarquees=newArray();//猎取检测实例名functiongetMyMQName(mName){varname=mName==undefined?RandStr(5):mName;varmyNames=,+MyMarquees.join(,)+,;while(myNames.indexOf(,+name+,)!=-1){name=RandStr(5);}returnname;}functionMarquee(inits){var_o=this;var_i=inits;if(_i.obj==undefined)return;_o.mode=_i.mode==undefined?x:_i.mode;//转动形式(x:横向,y:纵向)_o.mName=getMyMQName(_i.name);//实例名_o.mObj=$(_i.obj);//转动工具_o.speed=_i.speed==undefined?10:_i.speed;//转动速率_o.autoStart=_i.autoStart==undefined?true:_i.autoStart;//主动入手下手_o.movePause=_i.movePause==undefined?true:_i.movePause;//鼠标经由是不是停息_o.mDo=null;//计时器_o.pause=false;//停息形态//无间转动初始化_o.init=function(){if((_o.mObj.scrollWidth<=_o.mObj.offsetWidth&&_o.mode==x)&&(_o.mObj.scrollHeight<=_o.mObj.offsetHeight&&_o.mode==y))return;MyMarquees.push(_o.mName);//克隆转动内容_o.mObj.innerHTML=_o.mode==x?(<tablewidth="100%"border="0"align="left"cellpadding="0"cellspace="0">+<tr>+<tdid="MYMQ_+_o.mName+_1">+_o.mObj.innerHTML+</td>+<tdid="MYMQ_+_o.mName+_2">+_o.mObj.innerHTML+</td>+</tr>+</table>):(<divid="MYMQ_+_o.mName+_1">+_o.mObj.innerHTML+</div>+<divid="MYMQ_+_o.mName+_2">+_o.mObj.innerHTML+</div>);//猎取工具、高宽_o.mObj1=$(MYMQ_+_o.mName+_1);_o.mObj2=$(MYMQ_+_o.mName+_2);_o.mo1Width=_o.mObj1.scrollWidth;_o.mo1Height=_o.mObj1.scrollHeight;//初始转动if(_o.autoStart)_o.start();};//入手下手转动_o.start=function(){_o.mDo=setInterval((_o.mode==x?_o.moveX:_o.moveY),_o.speed);if(_o.movePause){_o.mObj.onmou搜索引擎优化ver=function(){_o.pause=true;}_o.mObj.onmou搜索引擎优化ut=function(){_o.pause=false;}}}//中断转动_o.stop=function(){clearInterval(_o.mDo)_o.mObj.onmou搜索引擎优化ver=function(){}_o.mObj.onmou搜索引擎优化ut=function(){}}//程度转动_o.moveX=function(){if(_o.pause)return;varleft=_o.mObj.scrollLeft;if(left==_o.mo1Width){_o.mObj.scrollLeft=0;}elseif(left>_o.mo1Width){_o.mObj.scrollLeft=left-_o.mo1Width;}else{_o.mObj.scrollLeft++;}};//垂直转动_o.moveY=function(){if(_o.pause)return;vartop=_o.mObj.scrollTop;if(top==_o.mo1Height){_o.mObj.scrollTop=0;}elseif(top>_o.mo1Height){_o.mObj.scrollTop=top-_o.mo1Height;}else{_o.mObj.scrollTop++;}};_o.init();}//--></script></head><body><divclass="case"><divclass="title"><ahref="#"class="r">Top</a>Marquee挪用办法</div><divclass="b">newMarquee({obj,name,mode,speed,autoStart,movePause});</div><ulclass="infogray"><li><spanclass="key">obj：</span><spanclass="type">Object</span>转动工具(*必需)</li><li><spanclass="key">name：</span><spanclass="type">String</span>实例名(*可选，默许随机)</li><li><spanclass="key">mode：</span><spanclass="type">String</span>转动形式(x=程度,y=垂直)(*可选,默许为x)</li><li><spanclass="key">speed：</span><spanclass="type">Number</span>转动速率，越小速率越快(*可选，默许10)</li><li><spanclass="key">autoStart：</span><spanclass="type">Boolean</span>主动入手下手(*可选，默许True)</li><li><spanclass="key">movePause：</span><spanclass="type">Boolean</span>鼠标经由是不是停息(*可选，默许True)</li></ul></div><divclass="case"><divclass="title"><ahref="#"class="r">Top</a><aname="1"></a>Marquee演示-横向形式</div><divid="MyMarqueeX"><tablewidth="100%"border="0"cellpadding="0"cellspacing="0"><tr><td><divclass="title"><ahref="#"class="r">Top</a><aname="1"></a>Marquee演示-纵向形式</div><divid="MyMarqueeY">//<!--/*********************************************-Marquee演示*********************************************/newMarquee({obj:MyMarqueeX,movePause:false});newMarquee({obj:MyMarqueeY,mode:y});//--></script></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
增加了开发风险，一个css文件的出错，可能导致整站崩溃，惨不忍睹，大量的访问链接同时调用静态的css文件，可能造成并发错误，调用失败。 |
|
|Archiver|手机版|仓酷云
鄂ICP备14007578号-2
发表于 2015-1-16 10:37:03
收藏
转播
分享
淘帖
顶
踩
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
照妖镜
窥视卡
雷达卡
发表于 2015-3-20 08:45:21