今天来学习取代Marquee的图片横向和纵向无缝转动实例
首先你要知道，当你开始学习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文件，可能造成并发错误，调用失败。 还是在Dreamweaver所见即所得添加链接是，可以选中文字或图片然后按下shift键不放鼠标拖出箭头直接指向文件即可。这是比较简单的也是常用的方之一。 技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。 以上大概就是文字图片的一些链接方法，通过学习Dreamweaver、练习让我对dreameaver8有了进一步的认识，他其实是一款很好的建立Web站点和应用程序的软件。它将可视布局工具、应用程序开发功能和代码编辑支持组合在一起，其功能强大，使得各个层次的开发人员和设计人员都能够快速创建界面吸引人的基于标准的网站和应用程序。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 足见市场的反响和MACROMEDIA公司对它们的自信。说到Dreamweaver8我们应该了解一下网页编辑器的发展过程，随着互联网(Internet) 的家喻户晓。 时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上 运动)时间轴面板--拖动关键帧--单击整条--将鼠标移至中间一点--右击选择增加关键帧--移动中间关键帧的图层--勾选自动播放,循环
页:
[1]