小编Iga*_*gal的帖子

我有一组动态生成的图像（每个图像附近都有一个注释）。我想显示每个图像的最大宽度和最大高度为48像素，但是当用户将鼠标悬停在图像上时，它会增长为最大宽度和最大高度为200像素。但不要移动页面上的其他所有内容。这是生成图像的代码：

$(function(){
        $.getJSON("inc/API.php", 
        {command : "getUserComments", userid : getQueryStringValue("userid")},
        function(result)
        {
        for (var i = 0; i<6; i++){
            $("#divUserCommentsContent").append("<div id='divUserComment'><div id='divCommentTime'>"+
            result[i].commentDateAndTime+"</div><div id='divUserDetail'><div id='divUserpic'>
       **<img src='images/"+result[i].imageFileName+"' class='commentpic' />**</div>
            <div id='divUsername'>Comment for <a href='rank.html?imageID="+result[i].imageID+
            "&imageFileName="+result[i].imageFileName+"'>"+result[i].imageHeader+
            "</a></div></div><div id='divCommentText'>"+result[i].comment+"</div></div>");
        }
    });
});

我用2 **标记了图像。这是CSS：

.userpic, .commentpic
{
max-height:48px;
max-width:48px;
border-radius:5px;
z-index:1;
position:relative;
}
.commentpic:hover
{
max-width: 200px;
max-height: 200px;
position:relative;
z-index: 50;
}

它会放大图像，但也会在图像的右侧和图像下方移动其他所有内容。

如何使用CSS（最好是CSS）或jQuery放大图像，而又不移动其他所有内容？谢谢！

我有一个动画和JS用于交替2个div并改变他们的背景图像(来自几十个图像的数组),有点可互换的div.一切正常,但是当动画运行时,我可以看到我的CPU处于100%.起初我认为这可能是由于setInterval,但是当我将代码从交替图像更改为每次迭代时只增加一个数字并将其记录到控制台时 - 我看到CPU过载减少了大约40-50%.所以我明白这可能是因为动画.

这是我的HTML代码:

<div class="wallpaper wallpaper-1" id="wallpaper-1"></div>
<div class="wallpaper wallpaper-2" id="wallpaper-2"></div>

CSS:

.wallpaper {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 0;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    -webkit-transform: translateZ(0);
    -webkit-animation-timing-function: linear;
}

.animate {
    -webkit-animation-name: fadeInOut;
    -webkit-animation-duration: 6s;
}

@-webkit-keyframes fadeInOut {
    0% {
        opacity: 0;
        -webkit-transform: scale(1);
    }
    16% {
        opacity: 1;
    }
    90% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        -webkit-transform: scale(1.1);
    }
}

和JS一起打勾:

Wallpapers.get().then(function(list) {
    var wp1, wp2, divs = [], path, bgs …

我正在尝试为我的类别列表创建自定义适配器.出于某种原因,当我试图给它充气时,我无法访问我的category_item布局.这是我的代码:

public class CategoryAdapter extends ArrayAdapter<Category> {

    LayoutInflater mInflater;
    List<Category> list;

public CategoryAdapter(Context context, int resource, int textViewResourceId, List<Category> objects) {
    super(context, resource, textViewResourceId, objects);

    mInflater = LayoutInflater.from(context);
    list = objects;
}

public View getView(int position, View convertView, ViewGroup parent) {

    final ViewHolder holder;

    if(convertView==null){

        convertView=mInflater.inflate(***resource***, null);
        holder = new ViewHolder();

    }

    return convertView;
}

// Declaring new class ViewHolder
class ViewHolder{
    TextView category_name;
}

它说resource我应该能够访问我的category_item.xml布局 - R.layout.category_item.但由于某些原因我没有在列表中看到它,我无法访问它.事实上,我在列表中看不到任何布局.

为什么会发生这种情况？如何解决？

我的页面上有一个canvas元素.我在上面绘制一个图像和用户输入的一些数据.只需按一下按钮,我就可以将画布发送到打印机,然后将其打印在纸上.我尝试使用这个插件:jQuery.printElement,就像这样:

按钮代码:

<a href="javascript:print_voucher()">PRINT</a>

'print_voucher()'功能:

function print_voucher()
{
    $("#canvas_voucher").printElement();
}

canvas_voucher是我的canvas元素的ID.它打印了页面,但没有打印画布.我试着像这样使用它:

$("#canvas_voucher img").printElement();

但这甚至没有启动打印机.

那我该怎么办呢？如何打印画布的内容？

**编辑** 这是创建我的画布并尝试使用它创建图像的代码:

function create_voucher(visitor_name, visitor_identity_num, unique_number)
{
var canvas = $("#canvas_voucher")[0];
if (canvas.getContext)
{
    var ctx = canvas.getContext('2d');

    // Draw image
    var img = new Image();
    img.src = 'https://someurl.com/image.jpg';

    img.onload = function(){
        ctx.drawImage(img,0,0);
        ctx.fillStyle="#CCC";
        ctx.font="bold 20px Arial";
        ctx.fillText(visitor_name, 750, 270);
        ctx.fillText(visitor_identity_num, 750, 295);

        ctx.font="bold 25px Arial";
        ctx.fillText(unique_number, 620, 325);
    }
    var voucher = canvas.toDataURL("image/png");
    $("#voucher_img").attr("src", voucher);
} else {
    alert('You need Safari or …

我有一个ListView与自定义适配器和此列表中的项目的布局.项目的布局只是带有ImageView的TextView.图像应与屏幕右侧对齐.但是,图像的位置会稍微移动,具体取决于TextView中文本的长度.这就是它的样子:

这是我的XML代码:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal"
    android:gravity="center_vertical" >

    <TextView
        android:id="@+id/txtCategoryName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="10"
        android:singleLine="true"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:textColor="@color/list_text_color"
        android:textAppearance="?android:attr/textAppearanceLarge" />

    <ImageView
        android:id="@+id/imgArrowRight"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:src="@drawable/right_arrow_44"
        android:contentDescription="@string/img_description_right_arrow"
        android:layout_gravity="right" />

</LinearLayout>

如何使图像始终与右侧对齐,而不是轻推？

我有一个以下片段:

public class FragmentSocial extends Fragment implements ActionBar.TabListener, OnClickListener 
{

private Fragment mFragment;

@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    getActivity().setContentView(R.layout.fragment_social);
}

public void onTabSelected(Tab tab, FragmentTransaction ft) {
    // relevant code...
}

public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    // relevant code...
}

public void onTabReselected(Tab tab, FragmentTransaction ft) {
    // TODO Auto-generated method stub

}

public void onClick(View v) {
    switch(v.getId())
    {
    case R.id.imgBtnFB:
        Toast.makeText(this, "FB pressed", Toast.LENGTH_LONG).show();
        break;
    case R.id.imgBtnTwitter:
        Toast.makeText(this, "Twitter pressed", Toast.LENGTH_LONG).show();
        break;
    }

} …

我正在尝试新的 Strapi v4。我安装了provider-upload-aws-s3来将我的图像上传到S3并对其进行配置。我确实在 S3 存储桶中看到了我的图像，但在媒体库中没有看到它们。我检查了请求，发现收到此错误：

\n

内容安全策略：page\xe2\x80\x99s 设置阻止加载 {my img URL} 处的资源。

\n

当尝试使用相同的 URL 直接在浏览器中获取图像并且正在加载图像时。

我相信这与此警告有关（引用自 Strapi 文档）：

\n

Strapi 有一个默认的安全中间件，它有一个非常严格的 contentSecurityPolicy，限制加载图像和媒体只能“自己”，请参阅提供程序页面上的示例配置或查看我们的中间件文档以获取更多信息。

\n

但我不确定如何处理它以及如何覆盖它。那么如何让上传到S3的图片出现在媒体库中呢？

我正在尝试使用Slick.js创建一个滑动画廊- 查看“中心模式”部分。

总而言之，图库功能正常，但是我有一个小故障：当我在最后一个元素上并滚动到第一个元素时 - 我没有获得平滑的过渡，而是第一个元素的小跳跃。

我创建了一个 Codepen 来演示我在说什么：https ://codepen.io/anon/pen/YLExjo

我试图修改任何可能的类或类组合：

.slick-cloned, .slick-active etc...

但我仍然得到这个跳跃。我该如何解决？

由于经典模式即将被弃用，我正在尝试将我的商店转移到模块模式。但是我确实想将状态、动作、突变和吸气剂保存在单独的文件中。所以假设我目前只有一个模块 - auth。这是我的商店结构：

store
 |_ modules
 |  |_auth
 |    |_actions.js
 |    |_getters.js
 |    |_mutations.js
 |    |_state.js
 |
 |_actions.js
 |_auth.js
 |_getters.js
 |_index.js
 |_mutations.js
 |_state.js

store\modules\auth\state.js 目前只有一个属性：

store
 |_ modules
 |  |_auth
 |    |_actions.js
 |    |_getters.js
 |    |_mutations.js
 |    |_state.js
 |
 |_actions.js
 |_auth.js
 |_getters.js
 |_index.js
 |_mutations.js
 |_state.js

这是 store\modules\auth\getters.js

export const state = () => {
  return {
    token: null
  }
}

然后在我的store\auth.js：

export const getters = {
  isAuthenticated(state) {
    return !!state.token
  }
}

最后在我的store\index.js我只有这个代码：

import {actions} from …

我有一个 Axios 实例：

import axios from 'axios';

const instance = axios.create({
  baseURL: 'https://identitytoolkit.googleapis.com/v1'
});

export default instance;

然后我将其导入到我的signup.vue 文件中：

<script>
  import axios from '../../axios-auth';
  ...
</script>

在该 Vue 文件中，我有一个注册表单，一旦我点击“提交”按钮，它就会运行以下方法：

onSubmit() {
        const formData = {
          email: this.email,
          age: this.age,
          password: this.password,
          confirmPassword: this.confirmPassword,
          country: this.country,
          hobbies: this.hobbyInputs.map(hobby => hobby.value),
          terms: this.terms
        };
        console.log(formData);
        axios.post('/accounts:signUp?key=my_key_goes_here', {
          email: formData.email,
          password: formData.password,
          returnSecureToken: true
        })
          .then(res => {
            console.info(res);
          })
          .catch(error => {
            console.error(error);
          });
      }

我收到403 错误 - 禁止400 错误 …