JavaScript学习日记4-处理图像1

最新推荐文章于 2024-05-27 01:12:55 发布

打八阿哥

最新推荐文章于 2024-05-27 01:12:55 发布

阅读量195

点赞数

分类专栏：前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_45457760/article/details/108176213

版权

前端专栏收录该内容

25 篇文章 0 订阅

订阅专栏

翻转器：当用户将鼠标移动到图像上时会改变网页上的图像，从而对用户的操作及时做出反应。

创建翻转器

翻转器原理：有原始图像和替换图像，当用户将鼠标移动到第一个图像上时，浏览器快速将第一个图像替换为第二个图像，这样就产生了运动或动画效果。

<!DOCTYPE html>
<html>
    <head>
        <style>
            img{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <a href="next.html" onmouseover="document.images['arrow'].src='images/142.jpg'" onmouseout="document.images['arrow'].src='images/145.jpg'">
        //当鼠标移上去时，将图像142替换为145，鼠标移开，将图像145替换为142
            <img src="images/145.jpg" id="arrow" alt="arrow">//定义原始图像的来源
            //图像标签中包含alt属性不仅符合W3C标准，且有助于残障人士访问你的页面，比如用屏幕阅读器浏览页面的盲人用户
        </a>
    </body>
</html>

第二个图像实在用户将鼠标移动到第一个图像上时从服务器上下载的，所以在第二个图像替换第一个图像之前可能会有延迟。

创建更有效的翻转器

如下，我们使用js预先将所有图像加载到浏览器的缓存中，当需要它们时，它们已经在用户的硬盘上了，并且把图像放进脚本使用的变量中。

<!DOCTYPE html>
<html>
    <head>
        <script src="js.js"></script>
        <style>
            img{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>
        <a href="next.html"><img src="images/dog_off.JPG" alt="dog1" id="dog"></a>
    </body>
</html>

window.onload = rolloverInit;

function rolloverInit(){
    for(var i=0;i<document.images.length;i++){//遍历所有图像
        if(document.images[i].parentNode.tagName == 'A'){//检查包围图像的标签是否是锚标签。parentNode表示包围它的容器标签，tagName提供容器标签的名称
            //tagName总是返回大写的值
            setupRollover(document.images[i]);
        }
    }
}

function setupRollover(theImage){
    theImage.outImage = new Image();//获得传递来的图像对象，并在其中添加新的outImage属性。此处将一个图像对象添加到图像中。
    //可以在对象上添加任何类型的属性，而且属性本身也是对象。新的图像对象的圆括号是可选的。
    theImage.outImage.src = theImage.src;
    theImage.onmouseout = function(){//定义匿名函数，如果不需要在其他地方调用，可以不需要名字
        this.src = this.outImage.src;//将当前状态的图片设置为mouseout的图片
    }
    theImage.overImage = new Image();
    theImage.overImage.src = "images/" +theImage.id +"_on.jpg";
    theImage.onmouseover = function(){
        this.src = this.overImage.src;//将当前状态的图片设置为mouseover的图片
    }
}//这样写比较灵活，只需要在html中添加图像或删除图像，不需要修改代码

构建三状态翻转器

能够显示图像的3个版本的翻转器，即onmouseover和onmouseout和点击状态三种。

window.onload = rolloverInit;

function rolloverInit(){
    for(var i=0;i<document.images.length;i++){
        if(document.images[i].parentNode.tagName == 'A'){
            setupRollover(document.images[i]);
        }
    }

}
function setupRollover(theImage){
    theImage.outImage = new Image();
    theImage.outImage.src = theImage.src;
    theImage.onmouseout = function(){
        this.src = this.outImage.src;
    }
    theImage.clickImage = new Image();//只需添加一个点击状态就可以
    theImage.clickImage.src = "images/" + theImage.id + "_click.jpg";
    theImage.onclick = function(){
        this.src = this.clickImage.src;
        return false;
    }
    theImage.overImage = new Image();
    theImage.overImage.src = "images/" + theImage.id + "_on.jpg";
    theImage.onmouseover = function(){
        this.src = this.overImage.src;
    }
}

由链接触发翻转器

<!DOCTYPE html>
<html>
    <head>
        <script src="js.js"></script>
        <style>
            img{
                width: 200px;
                height: 200px;
            }
        </style>
    </head>
    <body>

        <a href="next.html" id="dog"><h1>Next Page</h1></a>
        <img src="images/dog_off.JPG" alt="dog" id="dogImg">
    </body>
</html>

window.onload = rolloverInit;

function rolloverInit(){
    for(var i=0;i<document.links.length;i++){//寻找并遍历链接
        var linkObj = document.links[i];
        if(linkObj.id){//如果link有id，就检查页面上是否有对应的图像元素
            var imgObj = document.getElementById(linkObj.id + "Img");
            if(imgObj){
                setupRollover(linkObj,imgObj);
            }
        }
    }
}
function setupRollover(theLink,TheImage){//theLink==dog,theImage==dogImg
    theLink.imgToChange = TheImage;//js需要知道当鼠标停留链接上时需要改变哪个图像，imgToChange用来存储这一信息
    theLink.onmouseout = function(){
        this.imgToChange.src = this.outImage.src;
    }
    theLink.onmouseover = function(){
        this.imgToChange.src = this.overImage.src;
    }
    theLink.outImage = new Image();
    theLink.outImage.src = TheImage.src;
    theLink.overImage = new Image();
    theLink.overImage.src = "images/" + theLink.id +"_on.jpg";
}

让多个链接触发一个翻转器

<!DOCTYPE html>
<html>
    <head>
        <script src="xin.js"></script>
        <style>
            img{
                width: 200px;
                height: 200px;
            }
            div{
                width: 100px;
                float: left;
                margin-left: 200px;
            }
        </style>
    </head>
    <body>
<!-- 从小新家的关系为例，鼠标移动到那个头像上面，小新下面会出现相应头像 -->
<div id="xin">
    <img src="images/xin.JPG" alt="xin">
    <img src="images/xin.JPG" id="a" alt="text">
</div>
<div id="family">
    <a href="4.html" class="a" id="xin_monther"><img src="images/xin_monther.JPG" alt="4" id="xin_montherImg"></a>
    <a href="5.html" class="a" id="xin_father"><img src="images/xin_father.JPG" alt="5" id="xin_fatherImg"></a>
    <a href="6.html" class="a" id="xin_dog"><img src="images/xin_dog.JPG" alt="6" id="xin_dogImg"></a>
    <a href="6.html" class="a" id="xin_sister"><img src="images/xin_sister.JPG" alt="6" id="xin_sisterImg"></a>
</div>

    </body>
</html>

    </body>
</html>

window.onload = rolloverInit;

function rolloverInit(){
    for(var i=0;i<document.links.length;i++){//寻找有效链接
        var linkObj = document.links[i];
        if(linkObj.className){//从是否有className来区分是改变图像的出发地还是目的地
            var imgObj = document.getElementById(linkObj.className);
            //因为要分别从多个链接来改变图像，所以这些链接和改变图像的目的地需要有联系，此处的联系为目的地的id和链接的className
            if(imgObj){
                setupRollover(linkObj,imgObj);
            }
        }
    }
}
function setupRollover(theLink,textImge){
    theLink.imgtoChange = textImge;
    theLink.onmouseout = function(){
        this.imgtoChange.src = this.outImage.src;
    }
    theLink.onmouseover = function(){
        this.imgtoChange.src = this.overImage.src;
    }
    theLink.outImage = new Image();
    theLink.outImage.src = textImge.src;

    theLink.overImage = new Image();
    theLink.overImage.src = "images/" + theLink.id + ".jpg";
}

处理多个翻转器

window.onload = rolloverInit;

function rolloverInit(){
    for(var i=0;i<document.links.length;i++){//寻找有效链接
        var linkObj = document.links[i];
        if(linkObj.className){//从是否有className来区分是改变图像的出发地还是目的地
            var imgObj = document.getElementById(linkObj.className);
            //因为要分别从多个链接来改变图像，所以这些链接和改变图像的目的地需要有联系，此处的联系为目的地的id和链接的className
            if(imgObj){
                setupRollover(linkObj,imgObj);
            }
        }
    }
}
function setupRollover(theLink,textImge){

    theLink.imgtoChange = new Array;
    theLink.outImage = new Array;
    theLink.overImage = new Array;

    theLink.imgtoChange[0] = textImge;//描述关系的图片
    theLink.onmouseout = rollOut;
    theLink.onmouseover = rollOver;

    theLink.outImage[0] = new Image();
    theLink.outImage[0].src = textImge.src;

    theLink.overImage[0] = new Image();
    theLink.overImage[0].src = "images/" + theLink.id + ".jpg";

    var rolloverObj = document.getElementById(theLink.id + "Img");
    if(rolloverObj){
        theLink.imgtoChange[1] = rolloverObj;//选择的图片

        theLink.outImage[1] = new Image();
        theLink.outImage[1].src = rolloverObj.src;

        theLink.overImage[1] = new Image();
        theLink.overImage[1].src = "images/"+theLink.id+"_on.png";
    }
}
function rollOut(){
    for(var i=0;i<this.imgtoChange.length;i++){
        this.imgtoChange[i].src = this.outImage[i].src;
    }
}
function rollOver(){
    for(var i=0;i<this.imgtoChange.length;i++){
        this.imgtoChange[i].src = this.overImage[i].src;
    }
}

打八阿哥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习日记4-处理图像1

翻转器：当用户将鼠标移动到图像上时会改变网页上的图像，从而对用户的操作及时做出反应。创建翻转器翻转器原理：有原始图像和替换图像，当用户将鼠标移动到第一个图像上时，浏览器快速将第一个图像替换为第二个图像，这样就产生了运动或动画效果。<!DOCTYPE html><html> <head> <style> img{ width: 200px;
复制链接

扫一扫

专栏目录