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

2023-04-28 03:58:02html-css029

刚才您帮我解决的问题，仿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>

模仿桌面需要在手机上下载安全手机桌面软件来进行设置，也可以更换手机主题为苹果界面的主题就可以。设置后是可以恢复的：

1、打开手机“设置”应用。

2、在设置界面选择“桌面和壁纸”选项。

3、接下来在桌面和壁纸界面选择“桌面设置”选项。

4、接下来在桌面设置界面,选择“桌面布局”选项后就可以换回来了。

无论是电脑还是手机，要做到自适应屏幕，其实都是一样的。

首先，在网页代码的头部，加入一行viewport标签

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />

viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。即让viewport的宽度等于物理设备上的真实分辨率，不允许用户缩放。

其次：网页宽度css一定要使用百分比width: xx%，不能用绝对像素。当然可以用width:auto

第三，流动布局

.left{

float: left

width: ***%

}

第四，选择加载css

这是自适应的关键部分

.abc{ height:300pxborder:1px solid #000margin:0 auto}

@media screen and (min-width: 1201px) {

.abc {width: 1200px}

}

/* 设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */

@media screen and (max-width: 1200px) {

.abc {width: 900px}

}

/* 设置了浏览器宽度不大于1200px时 abc 显示900px宽度 */

@media screen and (max-width: 901px) {

.abc {width: 200px}

}

/* 设置了浏览器宽度不大于901px时 abc 显示200px宽度 */

@media screen and (max-width: 500px) {

.abc {width: 100px}

}

/* 设置了浏览器宽度不大于500px时 abc 显示100px宽度 */

需要注意是CSS代码顺序，由大到小排版CSS（判断浏览器宽度越大越放前），这样是因为逻辑关系，@media 判断CSS排错将导致判断失效。

第四，图片自适应

img { max-width: 100%}

老版本的IE不支持max-width，所以只好写成：img { width: 100%}

筚五、采用相对字体大小

字体也不能使用绝对大小（px），而只能使用相对大小（em）。

这里最重要的，是第三条和第四条，也就是采用流动布局和css选择加载。祝你好运！

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

# 上一篇：支付宝加密怎么解除

# 下一篇：枣庄市丰禹防水建材有限公司怎么样？

推荐阅读

热门文章

最新发布

标签列表

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

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