优雅的实现图片翻转(js实现)

/**
 * rollover.js: unobtrusive image rollovers.(优雅的实现代码翻转)
 * 
 * To create image rollovers, include this module in your HTML file and(要创建图片翻转效果,将这个模块引用到你的html文件中)
 * use the data-rollover attribute on any <img> element to specify the URL of(然后在任意的<img>元素上使用data-rollover的属性来指定翻转的图片的URL即可)
 * the rollover image. For example:(如下图所示)
 * 
 *   <img src="normal_image.png" data-rollover="rollover_image.png">
 * 
 * Note that this module requires onLoad.js(注意的是,这个效果依赖于onLoad.js)
 */
onLoad(function() { // Everything in one anonymous function: no symbols defined
//所有的处理逻辑都在一个匿名函数中:不定义任何的符号;
//遍历所有的图片,查找data-rollover属性;
    // Loop through all images, looking for the data-rollover attribute
    for(var i = 0; i < document.images.length; i++) {
        var img = document.images[i]; 
        var rollover = img.getAttribute("data-rollover"); 
        if (!rollover) continue;  // Skip images without data-rollover
//跳过没有data-rollover属性的图片
//确定将翻转的图片缓存起来
        // Ensure that the rollover image is in the cache
        (new Image()).src = rollover;
//定义一个属性来标识默认的图片URL
        // Define an attribute to remember the default image URL
        img.setAttribute("data-rollout", img.src);
//注册事件处理函数来创建翻转效果
        // Register the event handlers that create the rollover effect
        img.onmouseover = function() {
            this.src = this.getAttribute("data-rollover");
        };
        img.onmouseout = function() {
            this.src = this.getAttribute("data-rollout");
        };
    }
});

脚本化图片;直接看例子;

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值