Question

我来到一个网站，我非常喜欢它的功能。 Click here to go to the website

我想开发一些类似于可以通过wordpress CMS管理的东西。我想知道我是否可以购买或使用已经完成所有这些工作的插件/脚本：

有一个网格构建器，允许我们定义每个项目（宽度和高度）+订单项目的大小
能够在块内添加背景图像
背景图片必须在其容器大小内按比例缩放
能够使用css类更新布局（如果需要）
添加在悬停+字幕+样式+文字+链接等

非常欢迎任何链接/例子/插件，谢谢

Answer 1

您正在寻找我们在德国所称的产品：＆＃34;产蛋，含乳的母猪和＃34;。它意味着：这样的事情并不存在。

但你可以使用gridster来解决困难的部分并添加一些非常简单的功能：

<div class="gridster">
   <ul>
     <li data-row="1" data-col="1" data-sizex="1" data-sizey="1"></li>
   </ul>
</div>
<input type="text" placeholder="CSS Class" class="classname">
<input type="text" placeholder="Content" class="content">
<input type="text" placeholder="Image URL" class="imageurl">
<button class="add">Add</button>

在加载DOM的脚本文件中：

//init gridster
 var gridster = $(".gridster ul").gridster().data('gridster');

//get the content
var myDynamicClass=$("input.classname").val();
var myDynamicContent=$("input.content").val();
var myDynamicImage='style="background-image:url('+$("input.imageurl").val()+')  no-repeat center center fixed; background-size: cover;"';

//add a new grid element to gridster
$("button.add").click(function(){
    gridster.add_widget('<li class="'+myDynamicClass+'" '+myDynamicImage+'>'+myDynamicContent+'</li>', 2, 1);
});

编辑：您可以自己使用js实现裁剪和调整大小的工具。 Here是我几天前做过的一个完整的客户端解决方案。基本上你用javascript操作它，将它加载到画布中，裁剪它，然后将画布保存为图像。

获取将图像大小调整为其容器+其他功能的脚本名称

1 个答案: