Question

我对jQuery很新，只有很少的编程经验所以请考虑到这一点。

我创建了一个省时的脚本，它将采用以下两个变量：

1）元素（包含单个图像） - imgelement

2）悬停图片的图片网址 - hoverimageurl

代码：

/* Image Hover Script (Start) */
    var imgelement = "#element"; /* Element containing the original image */
    var hoverimageurl = "http://www.domain.com/image.png2"; /* Image URL of the hover image */
    
    jQuery(document).ready(function() {
    
    	/* Add CSS and a class to the original image to fix positioning and give it an identification */
    	jQuery(imgelement + " img").addClass("originalimage");
    		
    	/* Prepend hover image to the element. Set the SRC to the hover image URL */
    	jQuery(imgelement).prepend('<img class="hoverimage" src="' + hoverimageurl + '">');
    	
    	/* Fade out original image and fade in hover image on hover */
    	jQuery(imgelement).hover(function() {
    		jQuery(imgelement + " .originalimage").stop(true).fadeTo(1000, 0);
    		jQuery(imgelement + " .hoverimage").stop(true).fadeTo(1000, 1);
    	}, function() {
    		jQuery(imgelement + " .hoverimage").stop(true).fadeTo(1000, 0);
    		jQuery(imgelement + " .originalimage").stop(true).fadeTo(1000, 1);
    	});
    	
    });
    /* Image Hover Script (End) */

/* Image Hover CSS (Start) */
#pix-fe .originalimage {
	position: relative;
}

#pix-fe .hoverimage {
	position: absolute;
	width: 100%;
	height: 100%;
}
/* Image Hover CSS (End) */

<div class="element">
  <a href="http://www.domain.com"><img src="http://www.domain.com/image1.png"></a>
</div>

当元素悬停时，脚本的作用是淡化到hoverimageurl变量给出的悬停图像。这很好用，但我想使用这个脚本的多个实例，为此我需要为我需要的每个实例附加一个递增数字的变量名。这是低效的，因为在理想情况下我需要重复每个实例的脚本，我只想要一个变量列表和一个主脚本实例。

有什么办法可以实现这段代码的泛化吗？我知道this，但imgelement将始终引用imgelement变量的值，因此据我所知，我无法看到如何做到这一点。

非常感谢你的时间。

Answer 1

没有什么小css无法处理：）

＆＃13;

.image-switch {
  position: relative;
}

.image-switch img {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    opacity: 1;
    transition: opacity 1s
}

.image-switch:hover img:last-child{
  opacity: 0
}

＆＃13;

<span class="image-switch">
  <img src="http://placehold.it/200x200/FF0000">
  <img src="http://placehold.it/200x200">
</span>

＆＃13;

Answer 2

你应该使用css做这样的事情，因为它比js更可靠，更容易理解。这说明这是一个了解jQuery插件的好机会，以及如何利用它来使代码更加干燥和可重复使用。

要向jQuery对象添加新方法，您可以在jQuery.fn上声明一个函数，即prototype。

函数this中的

将绑定到您选择的元素集合，因此如果您计划对集合进行api处理，则需要对其进行调用。

从那里你只需要将功能添加到该功能。任何参数都将传递给您的函数，以便您可以在运行时传递设置。这里它用于传递img url。

我使用的另一个基本功能是jQuery.fn.find，因为我们有可以遍历dom的参考元素，而不是使用对我来说更容易混淆的字符串。

要运行该插件，您只需要创建一个jQuery选择器并调用您的新方法。 $('#selector').hoverImage('url')

现在您已经了解了创建jQuery插件的基础知识，您应该真正弄清楚如何使用纯css实现相同的结果。

/*
 * jQuery hoverImage plugin
 *
 * @param {string}  url  url of the hover image
*/
(function() {
  jQuery.fn.hoverImage = function(url) {
    // loop over the element collection
    this.each(function() {
      // bind your functionality
      var $this = $(this)
      var $img = $this.find('img')
      var $hover = $('<img class="hoverimage" src="' + url + '">')
      
      $this.prepend($hover)
      
      $this.hover(function() {
        $img.stop().fadeTo(1000,0)
        $hover.stop().fadeTo(1000,1)
      }, function() {
        $img.stop().fadeTo(1000,1)
        $hover.stop().fadeTo(1000,0)
      })
    })
  }
})()
// run your plugin
$('#element').hoverImage('http://lorempixel.com/400/200/')

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="element"></div>

这个脚本可以被推广吗？

2 个答案: