刚才您帮我解决的问题，仿iphone界面的效果。如果不是改变title，改变单独div里的文字，可行么？

2023-03-20 02:35:02html-css026

刚才您帮我解决的问题，仿iphone界面的效果。如果不是改变title，改变单独div里的文字，可行么？,第1张

修改了这个

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>

完全模仿苹果手机界面的软件，推荐可以下载一个iLauncher；

iLauncher是一款仿苹果IOS桌面的应用，不仅仅是图标的改变，从特效上都是深度复制IOS。应该算是仿IOS比较到位的桌面，比如直接桌面上长按就可以删除应用。

软件支持自定义快捷方式，显示存储容量和电量状态，在控制面板程序中创建快捷方式，根据喜好安排图标的排列,向左或者居中以及通过链接直接访问相关文件等功能

小米平板五应用了仿苹果的图标壁纸恢复方法如下：

1、打开小米平板5输入密码进入主页面。

2、打开设置，选择壁纸引擎点击更新。

3、更新完成后点击确认即可恢复。

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

# 上一篇：js保留小数位

# 下一篇：键盘事件

推荐阅读

热门文章

最新发布

标签列表

刚才您帮我解决的问题，仿iphone界面的效果。如果不是改变title，改变单独div里的文字，可行么？

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