求：仿苹果官网整站代码

2023-02-19 13:22:02html-css09

求：仿苹果官网整站代码,第1张

你好

看到你的问题我很高兴因为你也在研究学习网页制作

整站代码我没能够弄出

但我提取了苹果的导航

复制一下代码保存成htm格式就行了绝对一样

(我还有一个高仿百度知道的asp 我做了两年可以送给你 QQ：372309760)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>MAC菜单</title>

<!--

html,body { height:100%background:#fff}

body { font:12px "宋体",Arial,sans-serifcolor:#333}

body,form,menu,dir,fieldset,blockquote,p,pre,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6 { padding:0margin:0}

ul,ol,dl { list-style:none}

#nav { width:982pxheight:38pxmargin:15px 0 0 10pxoverflow:hiddenbackground:url(http://www.codefans.net/jscss/demoimg/200911/globalnavbg.png) no-repeat}

#nav li,#nav li a { float:leftdisplay:blockwidth:117pxheight:38pxbackground:#fff}

#nav li a { width:100%text-indent:-9999pxbackground:url(http://www.codefans.net/jscss/demoimg/200911/globalnavbg.png) no-repeat 0 0}

#nav .n01 { width:118px}

#nav .n01 a:visited { background-position:0 -114px}

#nav .n01 a:hover { background-position:0 -38px}

#nav .n01 a:active { background-position:0 -76px}

#nav .n02 a:link { background-position:-118px 0}

#nav .n02 a:visited { background-position:-118px -114px}

#nav .n02 a:hover { background-position:-118px -38px}

#nav .n02 a:active { background-position:-118px -76px}

#nav .n03 a:link { background-position:-235px 0}

#nav .n03 a:visited { background-position:-235px -114px}

#nav .n03 a:hover { background-position:-235px -38px}

#nav .n03 a:active { background-position:-235px -76px}

#nav .n04 a:link { background-position:-352px 0}

#nav .n04 a:visited { background-position:-352px -114px}

#nav .n04 a:hover { background-position:-352px -38px}

#nav .n04 a:active { background-position:-352px -76px}

#nav .n05 a:link { background-position:-469px 0}

#nav .n05 a:visited { background-position:-469px -114px}

#nav .n05 a:hover { background-position:-469px -38px}

#nav .n05 a:active { background-position:-469px -76px}

#nav .n06 a:link { background-position:-586px 0}

#nav .n06 a:visited { background-position:-586px -114px}

#nav .n06 a:hover { background-position:-586px -38px}

#nav .n06 a:active { background-position:-586px -76px}

#nav .n07 a:link { background-position:-703px 0}

#nav .n07 a:visited { background-position:-703px -114px}

#nav .n07 a:hover { background-position:-703px -38px}

#nav .n07 a:active { background-position:-703px -76px}

-->

</style>

</head>

<body>

<ul>

<li class="n01"><a href="#index" title="index">index</a></li>

<li class="n02"><a href="#Store" title="Store">Store</a></li>

<li class="n04"><a href="#iPod+iTunes" title="iPod + iTunes">iPod + iTunes</a></li>

<li class="n05"><a href="#iPhone" title="iPhone">iPhone</a></li>

<li class="n06"><a href="#Downloads" title="Downloads">Downloads</a></li>

<li class="n07"><a href="#Support" title="Support">Support</a></li>

</ul>

</div>

</body>

</html>

修改了这个

tArea.innerHTML=node.innerHTML //文本为li元素内的内容

现在显示的是li内的内容，你可以自行改变。

li标签之间不要有其他元素，空白字符也不行，否则就无法获取上下节点

<ul><li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic1.png)">图片一：这些文字是放在li元素内的</li><li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic2.png)">图片二</li><li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic3.png)">图片三</li><li style="background:url(http://www.miaov.com/miaov_demo/iphone/images/pic4.png)">图片四 balabalabalaba……</li></ul>

-------------------------全----部-----内-----容-----------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>iPhone手机图片查看器</title>

* { padding: 0margin: 0}

li { list-style: none}

body { background: #333}

#iphone { width: 900pxheight: 600pxbackground: url(http://www.miaov.com/miaov_demo/iphone/images/bg.png)position: relativetop: 0left: 0margin: 30px auto}

#wrap { width: 238pxheight: 360pxposition: absolutetop: 121pxleft: 326pxoverflow:hidden}

#iphone ul { width: 960pxheight: 361pxcursor: pointerposition: absolutetop: 0pxleft: 0px}

#iphone li { float: leftwidth:240pxheight:360pxoverflow:hiddentext-indent:-999em}

#text {width:220pxheight:300pxposition:absolutetop:150pxright:50pxcolor:#fff}

</style>

var oTimer=null

var iSpeed=0

var iNow=0

var tArea,cx=lr=0,oTar //没有仔细分析拖动类，对作用域不清楚，所以索性定义全局变量

window.onload=function ()

{

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0]

tArea= document.getElementById('text')

var iStartX

new MiaovPerfectDrag

(

oUl,

function ()

{

return {x:oUl.offsetLeft, y:oUl.offsetTop}

function (x, y)

{

oUl.style.left=x+'px'

//oUl.style.top=y+'px'

function ()

{

stopMove()

iStartX=oUl.offsetLeft

function () //当拖拽结束

{

if(Math.abs(oUl.offsetLeft-iStartX)>=50)

{

if(oUl.offsetLeft>iStartX)

{

iNow--

if(iNow<0)

{

iNow=0

}

else

{

iNow++

if(iNow>=oUl.getElementsByTagName('li').length)

{

iNow=oUl.getElementsByTagName('li').length-1

}

startMove(-iNow*oUl.getElementsByTagName('li')[0].offsetWidth)

}

)

}

function startMove(iTarget)

{

if(oTimer)

{

clearInterval(oTimer)

}

oTimer=setInterval("doMove("+iTarget+")", 30)

}

function doMove(iTarget)

{

var oUl=document.getElementById('wrap').getElementsByTagName('ul')[0]

var l=oUl.offsetLeft

iSpeed+=(iTarget-oUl.offsetLeft)/5

iSpeed*=0.7

l+=iSpeed

if(Math.abs(iTarget-oUl.offsetLeft)<1 &&Math.abs(iSpeed)<1)

{

clearInterval(oTimer)

oTimer=null

l=iTarget

}

oUl.style.left=l+'px'

}

function stopMove()

{

if(oTimer)

{

clearInterval(oTimer)

}

function MiaovperfectDragSimple(vElement, fnOnDragStart, fnOnDraging, fnOnDragEnd)

{

var oElementDrag=null

if(typeof vElement == 'string')

{

oElementDrag=document.getElementById(vElement)

}

else if(typeof vElement == 'object')

{

oElementDrag=vElement

}

this.creator=MiaovPerfectDrag

this.creator

(

oElementDrag,

function ()

{

return {x: oElementDrag.offsetLeft, y: oElementDrag.offsetTop}

function (x, y)

{

oElementDrag.style.left=x+'px'

oElementDrag.style.top=y+'px'

if(fnOnDraging)

{

fnOnDraging(x, y)

}

fnOnDragStart, fnOnDragEnd

)

delete this.creator

}

MiaovperfectDragSimple.prototype=MiaovPerfectDrag.prototype

function MiaovPerfectDrag(oElementDrag, fnGetPos, fnDoMove, fnOnDragStart, fnOnDragEnd)

{

var obj=this

this.oElement=oElementDrag

this.oElement.style.overflow='hidden'

this.fnGetPos=fnGetPos

this.fnDoMove=fnDoMove

this.fnOnDragStart=fnOnDragStart

this.fnOnDragEnd=fnOnDragEnd

this.__oStartOffset__={x:0, y:0}

this.oElement.onmousedown=function (ev)

{

obj.startDrag(window.event || ev)

return false

}

this.fnOnMouseUp=function (ev)

{

obj.stopDrag(window.event || ev)

}

this.fnOnMouseMove=function (ev)

{

obj.doDrag(window.event || ev)

return false

}

MiaovPerfectDrag.prototype.enable=function ()

{

var obj=this

this.oElement.onmousedown=function (ev)

{

obj.startDrag(window.event || ev)

}

MiaovPerfectDrag.prototype.disable=function ()

{

this.oElement.onmousedown=null

}

MiaovPerfectDrag.prototype.startDrag=function (oEvent)

{

var oPos=this.fnGetPos()

var x=oEvent.clientX

var y=oEvent.clientY

cx=x//记录下按下鼠标时的x坐标和li元素

oTar=oEvent.target || oEvent.srcElement

if(this.fnOnDragStart)

{

this.fnOnDragStart()

}

this.__oStartOffset__.x=x-oPos.x

this.__oStartOffset__.y=y-oPos.y

if(this.oElement.setCapture)

{

this.oElement.setCapture()

this.oElement.onmouseup=this.fnOnMouseUp

this.oElement.onmousemove=this.fnOnMouseMove

}

else

{

document.addEventListener("mouseup", this.fnOnMouseUp, true)

document.addEventListener("mousemove", this.fnOnMouseMove, true)

window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP)

}

MiaovPerfectDrag.prototype.stopDrag=function (oEvent)

{

if(this.oElement.releaseCapture)

{

this.oElement.releaseCapture()

this.oElement.onmouseup=null

this.oElement.onmousemove=null

}

else

{

document.removeEventListener("mouseup", this.fnOnMouseUp, true)

document.removeEventListener("mousemove", this.fnOnMouseMove, true)

window.releaseEvents(Event.MOUSE_MOVE | Event.MOUSE_UP)

}

if(this.fnOnDragEnd)

{

if(oEvent.clientX==this.__oStartOffset__.x &&oEvent.clientY==this.__oStartOffset__.y)

{

this.fnOnDragEnd(false)

}

else

{

this.fnOnDragEnd(true)

}

lr=oEvent.clientX-cx//松开左键时的x坐标与按下时的x坐标相减，如果小于零则鼠标向左移，如果大于零则鼠标向右移

if(lr>50) {writeText(oTar.previousSibling)} //如果鼠标右移则获取前一个节点

else if (lr<-50) {writeText(oTar.nextSibling)} //如果鼠标左移则获取后一个节点

function writeText(node) { //写入文本

if(node) {

tArea.innerHTML=node.innerHTML //文本为li元素内的内容

} else {

return

}

MiaovPerfectDrag.prototype.doDrag=function (oEvent)

{

var x=oEvent.clientX

var y=oEvent.clientY

this.fnDoMove(x-this.__oStartOffset__.x, y-this.__oStartOffset__.y)

}

</script>

</head>

<body>

</div>

拖动图片后这里的文字就会被改变

</div>

</body>

</html>

词库加载错误未能找到文件“E高铁采集器内存溢出ConfigurationDictStopwordstxt”

# 上一篇：如何把H5转变成PPT

# 下一篇：玩游戏用什么笔记本电脑好？

推荐阅读

热门文章

最新发布

标签列表

求：仿苹果官网整站代码

给您推荐相同类型的内容：