<分区>
标签 php javascript jquery css
<分区>
我需要将图像拆分为方形图 block ,用户可以在这些图 block 上悬停或点击。
我应该使用纯 css 还是必须使用 jquery?你有 jquery 插件的例子吗? (我找到了 this one,但会对其他建议感兴趣)
感谢您的帮助。
最佳答案
那个插件有点旧,我建议你使用这个,改编自this other plugin :
演示: http://jsfiddle.net/elclanrs/HmpGx/
;(function( $, window ) {
var _defaults = { x: 3, y: 3, gap: 2 };
$.fn.splitInTiles = function( options ) {
var o = $.extend( {}, _defaults, options );
return this.each(function() {
var $container = $(this),
width = $container.width(),
height = $container.height(),
$img = $container.find('img'),
n_tiles = o.x * o.y,
wraps = [], $wraps;
for ( var i = 0; i < n_tiles; i++ ) {
wraps.push('<div class="tile"/>');
}
$wraps = $( wraps.join('') );
$img.hide().after( $wraps );
$wraps.css({
width: (width / o.x) - o.gap,
height: (height / o.y) - o.gap,
marginBottom: o.gap +'px',
marginRight: o.gap +'px',
backgroundImage: 'url('+ $img.attr('src') +')'
});
$wraps.each(function() {
var pos = $(this).position();
$(this).css( 'backgroundPosition', -pos.left +'px '+ -pos.top +'px' );
});
});
};
}( jQuery, window ));
关于php - jquery 插件创建带有背景图像的方 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13259451/
相关文章:
php - Wordpress 警告 : call_user_func_array() expects parameter 1 to be a valid callback, 数组必须恰好有两个成员
javascript - 将 setIntervals 与 .each() 元素链接起来
jquery - 如果生成图表时值低于 2.5,则条形图的颜色应为红色
javascript - 在 jQuery 的 $(document).ready() 之前隐藏元素的可访问方式?
javascript - 如何在 <td></td> 的每四个循环项之后添加 <tr></tr>
php - Symfony 2 : How to avoid assets being deleted?(在 Windows 上)