小编woo*_*110的帖子

JQuery内容滑块 - 最佳实践?

我想创建一个基本上是一个巨大的内容滑块的网站,在页面加载时你会看到div 1(基本上是整个屏幕)然后你可以点击向下箭头转到第2页等,当你到达第2页我也希望能够左右移动(仅在第2页),将其视为图像滑块,但使用div ..

我知道有插件可用,但我非常喜欢自己编写,我写了一些(基本的)JQuery,它确实有效但看起来太臃肿了,我想要一个更好/更有效的方法来做它...我在追求什么接近这个问题的最佳方法是,我不是在寻找代码,因为我想要学习并且变得更好但却无法想到解决这个问题的最佳方法,是否可以使用某种切换语句?你会怎么做呢?

我还需要确保你不能滚动超过div的数量,我目前正在使用带有if语句的var但是觉得必须有一种方法将每个人组合成一个简单的函数?

JS在下面,还有一个JSFiddle

谢谢!

http://jsfiddle.net/W4SVz/

$(function () {
  var box = $('.box');
  TriggerClick = 0;

  $("#down").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 0){
         TriggerClick = 1;
         $(box).stop().animate({top:'-='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 2;
         $(box).stop().animate({top:'-='+height}, 500);
     }
  });

   $("#up").click(function(){
     var height = $('.box').outerHeight();

     if(TriggerClick == 2){
         TriggerClick = 1;
         $(box).stop().animate({top:'+='+height}, 500);
     }else if(TriggerClick == 1){
        TriggerClick = 0;
         $(box).stop().animate({top:'+='+height}, 500);
     }
  });

  $("#left").click(function(){
     var height = $('.box').outerHeight();
     if(TriggerClick == 1){
         $(box).stop().animate({left:'-='+height}, 500);
     }
  });

   $("#right").click(function(){
     var …
Run Code Online (Sandbox Code Playgroud)

html jquery slider jquery-animate

8
推荐指数
1
解决办法
955
查看次数

jQuery使用common关键字选择数据属性

我有两个元素,具有以下设置:

<span data-placeholder-class="test-class"></span>
<span data-placeholder-template="/some/template.hbs"></span>
Run Code Online (Sandbox Code Playgroud)

我正在使用下划线来遍历包含这些属性之一的任何元素,然后执行相关操作.

目前这样做是这样的

_.each($('[data-placeholder-class], [data-placeholder-template]'), function cb(element) {
  // code goes here
})
Run Code Online (Sandbox Code Playgroud)

我不想定义每个数据属性来循环,而是想知道是否有一种方法可以选择包含公共关键字的所有属性,在本例中为占位符.例如

_.each($('[data-placeholder-*]'), function cb(element) {
  // code goes here
})
Run Code Online (Sandbox Code Playgroud)

任何人都知道这是否可行?

javascript jquery html5 custom-data-attribute

7
推荐指数
1
解决办法
616
查看次数

Express.js服务器端渲染 - 请求'/ json/version /

我已经运行了一个快速服务器来预渲染我的反应应用程序.我有一个路由文件,将HomeContainer与基本/路由匹配,所有其他路由匹配到找不到的页面.

import HomeContainer from 'containers/home-container/home-container';
import PageNotFound from 'components/page-not-found/page-not-found';

const routes = [
  {
    path: '/',
    exact: true,
    component: HomeContainer
  },
  {
    path: '*',
    component: PageNotFound
  }
];

export default routes;
Run Code Online (Sandbox Code Playgroud)

我遇到的问题是当我在服务器上运行应用程序时,未找到的页面路由会在快速更改为HomeContainer路由之前呈现.

我已经确定这是因为我的快递服务器在发出请求/json/version之前发出请求/,此路由与我的路由文件中的路由不匹配,因此呈现了未找到页面的组件.

现在我没有得到的是为什么它正在提出这个请求以及如何停止page not found在主容器之前呈现的组件.我已经尝试调试节点服务器和最早的地方我可以找到这个被引用的路径是在一个名为的文件内的一个调用中调用_http_server.js

下面是调试器的屏幕截图,我找到了引用的URL.

调试器截图

另外作为参考,我在下面包括了我的快递服务器.

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';
import { Provider } from 'react-redux';
import { StaticRouter, matchPath } from 'react-router-dom';
import serialize from 'serialize-javascript';
import expressStaticGzip …
Run Code Online (Sandbox Code Playgroud)

javascript json node.js express reactjs

7
推荐指数
2
解决办法
804
查看次数

减去两个图像以留下结果 - PHP

我有两个图像(两个图)一个是普通地图,一个是有图钉的地图.

图一

图一

图像二

图像二

我试图将它们相互减去,所以我只留下了作为透明png的引脚.

我已经取得了一些成功,并设法将引脚作为自己的图像,问题是颜色不太正确(见图3).

图三

图三

我正在使用Imagick这样做,我的代码如下

<?php

// load in the base image into Imagick
$imageOne = new Imagick('images/base-map.png');
$imageTwo = new Imagick('images/pins/location-7.png');

$imageOne->compositeImage($imageTwo, Imagick::COMPOSITE_DIFFERENCE, 0, 0);
$imageOne->paintTransparentImage($imageOne->getImagePixelColor(0, 0), 0, 5000);

header('Content-Type: image/png');

echo $imageOne;
Run Code Online (Sandbox Code Playgroud)

有谁知道如何整理/调整这个以使颜色与原始图像相匹配?

谢谢!

php image image-processing imagick

6
推荐指数
1
解决办法
430
查看次数

Phonegap - 本地存储不起作用 - Android

我正在使用本地存储在页面之间传递值以创建滚动效果(用户单击链接并根据ID滚动到页面的特定部分)

我以前使用的是cookie,但这似乎不适用于Android,我读到本地存储支持,所以切换到那.它在浏览器中完全正常,但只要打包为本机应用程序,我就失去了所有功能?API声明它应该受到支持,任何想法?

这是我的代码:

基本网址:

var storage = window.localStorage;
$("a.scroll_link").click(function(event) {
    event.preventDefault();
    var value = $(this).attr("id");

        storage.setItem("key",value);

    console.log(value);

    window.location=$(this).attr("href");
});
Run Code Online (Sandbox Code Playgroud)

接收网址:

$(function () { 

var value = window.localStorage.getItem("key");

if (value != "" && value != "undefined" && value != null) {
    var storage = window.localStorage;
    storage.setItem("key",value);
    var scroll_type = "";

    if ($.browser.webkit) {
        scroll_type = "body";
    } else {
        scroll_type = "html";
    }

    $(scroll_type)
        .stop()
        .animate({
        //get top-position of target-element and set it as scroll target
        scrollTop: ($("#" + value).offset().top - …
Run Code Online (Sandbox Code Playgroud)

android local-storage cordova

5
推荐指数
1
解决办法
8156
查看次数

触发多个动作并等待它们解析 RxJS / Redux Observables

我有一个动作,我想用它来初始化我的应用程序,我想为这个动作创建一个史诗,然后在这个动作的后面触发多个其他动作,等待它们全部完成,然后再触发另一个动作。我看了一下别人的质疑,这是非常类似于这样一个

我已经尝试过这种方法,但对我来说,它不起作用,它会触发该APP_INIT动作,但随后无法触发序列中的任何其他动作。有人可以帮忙吗?

import { of } from 'rxjs';
import { mergeMap, zip, concat, mapTo } from 'rxjs/operators';
import { ofType } from 'redux-observable';
import { firstAction, secondAction } from 'actions';

export default function appInit (action$) {
  return (
    action$.pipe(
      ofType('APP_INIT'),
      mergeMap(() =>
        concat(
          of(firstAction()),
          of(secondAction()),
          zip(
            action$.ofType('ACTION_ONE_COMPLETE'),
            action$.ofType('ACTION_TWO_COMPLETE')
          ).mapTo(() => console.log('complete'))
        )
      )
    )
  );
}
Run Code Online (Sandbox Code Playgroud)

javascript rxjs redux redux-observable rxjs6

2
推荐指数
1
解决办法
1853
查看次数