<html>
<head>
<title>代码</title>
<meta http-equiv="content-type" content="text/htmlcharset=utf-8">
<script type="text/javascript" src="js/jquery-1.10.1.js"></script>
<script>
$(function()
{
$("p").mouseover(function()
{
var url=$(this).find("img").attr("src")
url="url("+url+") no-repeat"
$(".content").css("background",url).css("background-position","50%").css("background-size","contain")
})
})
</script>
</head>
<style type="text/css">
.bottle{
position: relative
width:800px
height:800px
margin:0 auto
margin-top:100px
}
.content{
height: 300px
width: 300px
position: absolute
background: url(imgs/1.jpg) no-repeat
background-size: contain
margin-left:250px
top: 100px
}
p img{
width:80px
height:80px
}
.p1{
position:absolute
left:573px
top:343px}
.p2{
position:absolute
left:158px
top:169px}
.p3{
position:absolute
left:568px
top:58px
}
</style>
<body>
<div class="bottle">
<div class="content"></div>
<p class="p1"><img src="imgs/0.jpg" ></p>
<p class="p2"><img src="imgs/1.jpg" ></p>
<p class="p3"><img src="imgs/2.jpg" ></p>
</div>
</body>
</html>
-->
去掉<!-- -->
<p><span class="Outline" id="Out1" style="font-weight: boldcolor: green">点击查看课文文本</span>
<br />
<br />
</p>
<div id="Out1details" style="display: noneposition: relative">
<br />女の子：あのう。。。すみません。银行はどこですか。<br />警察：银行ですか。あそこの高いビルですよ。<br />女の子：どのビルですか。<br />警察：ほら、このデパートの隣にある高いビルですよ。<br />女の子：あ、分かりました。どうも ありがとうございます。 <br /><p></p><br /><p>女孩：对不起，银行在什么地方？<br />警察：银行吗？就是那边那座高楼。<br />女孩：哪座楼？<br />警察：瞧，就是这百货公司旁边的高楼。<br />女孩：啊，我知道了，谢谢。<br /></p></div>
<br />
可以用div的style=“display：none”和style=“display：block”来实现，给你左边的文字设个有规律的id，然后用javascript些个for循环，控制右边图片的显示隐藏欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）