今天的教程，图片效果，超级简单，只需要到您的手和滑鼠
效果可能会有点小瑕疵，不介意就试试看吧 =)
效果可能会有点小瑕疵，不介意就试试看吧 =)
教程开始:
① 信息中心 --> 布局 --> 添加小工具 --> HTML/JavaScript
② 在内容里面添加以下代码
#side{
margin-right:-1px;
width:275px;
height:185px;
overflow:hidden;
}
#text{
text-align:left;
width:250px;
height:185px;
padding:5px;
overflow:auto;
color:#000000;
background-color:#fff;
}
#picture{
margin-left:-275px;
width:275px;
height:185px;
overflow:hidden;
-webkit-transition: opacity 0.9s linear;
-webkit-transition: all 0.9s ease-in-out;
-moz-transition: all 0.9s ease-in-out;
-o-transition: all 0.9s ease-in-out;
}
#side:hover #picture{
margin-left:-550px;
}
</style>
<table id="side" border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><div id="text">
所写内容
</div>
</td><td><div id="picture"><img src="显示图片URL" /></div></td></tr></tbody></table>
③ 绿色字体 - 字体颜色
蓝色字体 - 内容背景颜色
粉红字体 - 你所要放的内容
红色字体 - 你所要显示的图片URL
橙色字体 - 图片的长X高（每个人的小工具长度不一样，所以要花点心思去乔）
浅蓝字体 - 要配合图片的长度，所以要和图片的长度一样长
紫色字体 - 内容显示的长X宽。
④ 保存，若不满意，还可以再回到布局修改哟!!
祝：成功!!
链接：
0 Oreo ♥:
Post a Comment