首页 > 代码库 > 第十周 学习博客
第十周 学习博客
学习了JavaScript中脚本化图片转换的方式，有三种可以转变的方式：
1.在<img> 标签中添加onmouseover,onmouseout属性；
<img src="http://www.mamicode.com/images/1.jpg" onm ouseover="this.src=http://www.mamicode.com/‘images/2.jpg‘"
onm ouseout="this.src=http://www.mamicode.com/‘images/3.jpg‘">
在鼠标移动前网页显示为：
鼠标移动后页面显示为：
2.预提取使用的翻转图片，无延时。
<script>(new Image()).src="http://www.mamicode.com/images/2.jpg";</script>
在代码中加入上面的代码，则在页面显示第一张照片的时候，第二张照片就已经加载完毕。
3.优雅的图片翻转实现方式
<img src="http://www.mamicode.com/images/1.jpg" data-rollover="images/2.jpg">
<img src="http://www.mamicode.com/images/2.jpg" data-rollover="images/3.jpg">
<img src="http://www.mamicode.com/images/3.jpg" data-rollover="images/1.jpg">
<script src="http://www.mamicode.com/youyatupian.js"></script>
/*优雅的图片翻转方式*/
window.onload=function(){
var i = 0;
/* 遍历所有的图片，查找data-rollover属性*/
for (i;i<document.images.length;i++) {
var img = document.images[i];
var rollover =img.getAttribute(‘data-rollover‘);
if(!rollover){
continue; /*跳过没有data-rollover属性的图片*/
}
/*确保将翻转的图片缓存起来*/
(new Image()).src = http://www.mamicode.com/rollover;>
在html页中加入js页，这样页面会看起来很整洁。
第十周 学习博客
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。