学习下仿土豆网的核心轮换图片

只看该作者 · 发表于 2015-1-16 10:37:03

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

CSS是CascadingStyleSheets的缩写，不得不承认CSS单独使用会麻烦一点，但其与脚本语言（如我们四阶段所学的Javascript）及XML技术的融合，即可达到绝佳的页面效果。

转载的仿土豆网的核心轮换图片：
1.对核心图片下方举行通明处置
2.经由过程鼠标挪动到分歧的四小图片时,经由过程改动图片所处父节点id=focus_change_list的left值获得效果
3.默许下每5秒实行一次函数autoFocusChange(),来完成图片主动变更效果
4.当鼠标移到图片上时中断转动
5.此效果兼容扫瞄器ie6、ie7、FF2.0、F3.0、opera9.5
学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>仿土豆网的核心轮换图片</title><styletype="text/css">/*Resetstyle*/*{margin:0;padding:0;word-break:break-all;}body{background:#FFF;color:#333;font:12px/1.6emHelvetica,Arial,sans-serif;}h1,h2,h3,h4,h5,h6{font-size:1em;}a{color:#039;text-decoration:none;}a:hover{text-decoration:underline;}ul,li{list-style:none;}fieldset,img{border:none;}em,strong,cite,th{font-style:normal;font-weight:normal;}/*Focus_changestyle*/#focus_change{position:relative;width:450px;height:295px;overflow:hidden;margin:20px01px60px;}#focus_change_list{position:absolute;width:1800px;height:295px;}#focus_change_listli{float:left;}#focus_change_listliimg{width:450px;height:295px;}.focus_change_opacity{position:absolute;width:450px;height:70px;top:225px;left:0;background:#000;filter:alpha(opacity=50);-moz-opacity:0.5;opacity:0.5;}#focus_change_btn{position:absolute;width:450px;height:65px;top:225px;left:0;}#focus_change_btnul{padding-left:5px;}#focus_change_btnli{display:inline;float:left;margin:015px;padding-top:12px;}#focus_change_btnliimg{width:76px;height:50px;border:2pxsolid#888;}#focus_change_btn.current{background:url(/uploadfile/200901/1/6C164133877.gif)no-repeat37px8px;}#focus_change_btn.currentimg{border-color:#EEE;}</style><scripttype="text/javascript">function$(id){returndocument.getElementById(id);}functionmoveElement(elementID,final_x,final_y,interval){if(!document.getElementById)returnfalse;if(!document.getElementById(elementID))returnfalse;varelem=document.getElementById(elementID);if(elem.movement){clearTimeout(elem.movement);}if(!elem.style.left){elem.style.left="0px";}if(!elem.style.top){elem.style.top="0px";}varxpos=parseInt(elem.style.left);varypos=parseInt(elem.style.top);if(xpos==final_x&&ypos==final_y){returntrue;}if(xpos<final_x){vardist=Math.ceil((final_x-xpos)/10);xpos=xpos+dist;}if(xpos>final_x){vardist=Math.ceil((xpos-final_x)/10);xpos=xpos-dist;}if(ypos<final_y){vardist=Math.ceil((final_y-ypos)/10);ypos=ypos+dist;}if(ypos>final_y){vardist=Math.ceil((ypos-final_y)/10);ypos=ypos-dist;}elem.style.left=xpos+"px";elem.style.top=ypos+"px";varrepeat="moveElement("+elementID+","+final_x+","+final_y+","+interval+")";elem.movement=setTimeout(repeat,interval);}functionclassNormal(){varfocusBtnList=$(focus_change_btn).getElementsByTagName(li);for(vari=0;i<focusBtnList.length;i++){focusBtnList.className=;}}functionfocusChange(){varfocusBtnList=$(focus_change_btn).getElementsByTagName(li);focusBtnList[0].onmou搜索引擎优化ver=function(){moveElement(focus_change_list,0,0,5);classNormal()focusBtnList[0].className=current}focusBtnList[1].onmou搜索引擎优化ver=function(){moveElement(focus_change_list,-450,0,5);classNormal()focusBtnList[1].className=current}focusBtnList[2].onmou搜索引擎优化ver=function(){moveElement(focus_change_list,-900,0,5);classNormal()focusBtnList[2].className=current}focusBtnList[3].onmou搜索引擎优化ver=function(){moveElement(focus_change_list,-1350,0,5);classNormal()focusBtnList[3].className=current}}setInterval(autoFocusChange(),5000);varatuokey=false;functionautoFocusChange(){$(focus_change).onmou搜索引擎优化ver=function(){atuokey=true}$(focus_change).onmou搜索引擎优化ut=function(){atuokey=false}if(atuokey)return;varfocusBtnList=$(focus_change_btn).getElementsByTagName(li);for(vari=0;i<focusBtnList.length;i++){if(focusBtnList.className==current){varcurrentNum=i;}}if(currentNum==0){moveElement(focus_change_list,-450,0,5);classNormal()focusBtnList[1].className=current}if(currentNum==1){moveElement(focus_change_list,-900,0,5);classNormal()focusBtnList[2].className=current}if(currentNum==2){moveElement(focus_change_list,-1350,0,5);classNormal()focusBtnList[3].className=current}if(currentNum==3){moveElement(focus_change_list,0,0,5);classNormal()focusBtnList[0].className=current}}window.onload=function(){focusChange();}</script></head><body><divid="focus_change"><divid="focus_change_list"style="top:0;left:0;"><ul><li></div><divid="focus_change_btn"><ul><liclass="current"><ahref="#"></div></body></html>
尺度之路www.ckuyun.com提醒：能够先修正部分代码后再运转
在原来的table基础上进行改版,几乎必须改变所有的内容注入渠道，实在是太过于麻烦。

只看该作者 · 发表于 2015-1-17 15:26:41

还可以在Dreamweaver常用工具中选择超级链接，完成相应的填写即可。

只看该作者 · 发表于 2015-1-20 20:22:16

Adobe Dreamweaver(前称Macromedia Dreamweaver)是Adobe公司的著名网站开发工具。

只看该作者 · 发表于 2015-1-29 21:00:30

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-6 05:30:03

dreamweaver8中文版下载(dw)对专业网页图像设计的FIREWORKS，三者被MACROMEDIA公司称为DREAMTEAM(梦之队)。

只看该作者 · 发表于 2015-2-15 14:06:17

学Dreamweaver技术的过程其实是一个增加信心的过程。

只看该作者 · 发表于 2015-3-4 11:37:00

时间轴)窗口--时间轴--选中图层并拖图层到时间轴,将其放在指定帧上

只看该作者 · 发表于 2015-3-11 19:19:18

难以逾越的障碍会大大打击你的学习积极性。这就需要你的恒心，坚持不懈的决心。在自己无法解决某些问题时，就需要虚心请教别人.

只看该作者 · 发表于 2015-3-19 09:52:29

技术的学习如同长跑。只要越过极限，就会越跑越轻松。技术的学习其实并不像想象中那么可怕，任何技术都并不高深莫测。

只看该作者 · 发表于 2015-3-27 19:37:00

在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。

		自动登录	找回密码
密码			立即注册

[DIV+CSS] 学习下仿土豆网的核心轮换图片

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

相关帖子