小编Cof*_*fey的帖子

将Slick轮播导航箭头与幻灯片图像垂直对齐,而不是其下方的文本

无论窗口宽度是多少,我都需要将导航箭头与幻灯片图像垂直对齐.目前,它将它放在整个幻灯片的50%.我希望能够用CSS做到这一点,但似乎可能需要用JavaScript来完成.如果是这样的话,jQuery是可以的,它只需要支持现代浏览器(IE 11+).

关于这一点的棘手部分是它需要占图像的50%而不是整个容器,因为图像下方的文本可以具有不同的高度.

它目前在做什么:

在此输入图像描述

我需要它做什么:(注意导航箭头与图像垂直居中,无论窗口宽度应该是多少)

在此输入图像描述

这是一个JSFiddle:https://jsfiddle.net/thebluehorse/2wuq3feb/5/

<div class="container">
  <div class="list clearfix">
    <div class="slide">
      <img src="http://placehold.it/800x350">

      <ul>
        <li>Ut in integer pulvinar maiores, mi sapien litora nunc ut, neque netus in ac. Et nullam, donec sapien laoreet, ullamcorper vestibulum et sed at arcu, erat scelerisque vehicula justo nam malesuada vehicula, per nibh nibh elit justo. Tempus omnis, mattis taciti cras a.</li>
      </ul>
    </div>

    <div class="slide">
      <img src="http://placehold.it/800x350">
      <ul>
        <li>Lorem ipsum dolor sit amet, et hymenaeos elit orci, rutrum dolor magna …
Run Code Online (Sandbox Code Playgroud)

javascript css jquery vertical-alignment slick.js

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

如何在使用Browserify时公开Goog​​le地图的回调功能?

我正在使用Gulp和Browserify捆绑我的JavaScripts.我需要公开一个应该在加载Google Maps API后执行的回调函数.

如果不使用类似的东西window.initMap怎么办呢?这个问题是我需要在initMap中触发大量其他方法,因此除了使用window.functionName和污染全局命名空间之外,还必须有更好的方法.

另一方面,只是排除callback参数并做这样的事情是否可以?

$.getScript('https://maps.googleapis.com/maps/api/js').done(function() {
  initMap();
});
Run Code Online (Sandbox Code Playgroud)

任何帮助将不胜感激.我花了更多的时间来承认让它发挥作用.

gulpfile.js:

gulp.task('browserify', ['eslint'], function() {
  return browserify('/src/js/main.js')
    .bundle()
    .pipe(source('main.js'))
    .pipe(buffer())
    .pipe(gulp.dest('/dist/js'))
    .pipe(reload({ stream: true }));
});
Run Code Online (Sandbox Code Playgroud)

main.js:

require('jquery');
require('./map');
Run Code Online (Sandbox Code Playgroud)

map.js:

var map = (function() {
  'use strict';

  var mapElement = $('#map');

  function googleMapsAPI() {
    $.getScript('https://maps.googleapis.com/maps/api/js?callback=initMap');
  }

  function initMap() {
    var theMap = new google.maps.Map(mapElement);
    // functions...
  }

  function init() {
    googleMapsAPI();
  }
});

map.init();
Run Code Online (Sandbox Code Playgroud)

javascript jquery google-maps browserify gulp

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

允许对子元素进行垂直滑动,使用jQuery在父元素上左右滚动水平滑动

我有一个包含一堆列的元素.在触摸设备上,列应该能够使用触摸事件向上和向下滚动.当从左到右/从右向左滑动时,我需要父元素/容器水平滚动.

我现在遇到的问题是,无论何时尝试触摸/滚动其中一列,它都不会水平滚动父元素.如何实现这一目标?

我正在使用jQuery Perfect Scrollbar插件.

CodePen(应在触摸设备上进行测试)

HTML

<main>
  <section class="red">
    <p>Content...</p>
  </section>
  <section class="green">
    <p>Content...</p>
  </section>
  <section class="blue">
    <p>Content...</p>
  </section>
  <section class="yellow">
    <p>Content...</p>
  </section>
</main>
Run Code Online (Sandbox Code Playgroud)

CSS

main {
  height: 300px;
  overflow-y: hidden;
  position: relative;
  white-space: nowrap;
}

section {
  display: inline-block;
  overflow: hidden;
  position: relative;
  vertical-align: top;
  white-space: normal;
  height: 300px;
}

p {
  padding: 1em 2em;
  width: 300px;
}
Run Code Online (Sandbox Code Playgroud)

jQuery的

$('section').perfectScrollbar();
Run Code Online (Sandbox Code Playgroud)

javascript jquery scroll touch horizontal-scrolling

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

在Gulp Header的Header文件中包含当前年份

无论如何使用Gulp Header在头文件中打印出当前年份?

这是我想做的一个例子:

var banner = ['/**',
  ' * Copyright (c) 2014 Cofey',
  ' * <%= pkg.name %> - <%= pkg.description %>',
  ' * @version v<%= pkg.version %>',
  ' * @link <%= pkg.homepage %>',
  ' * @license <%= pkg.license %>',
  ' */',
  ''].join('\n');
Run Code Online (Sandbox Code Playgroud)

javascript date gulp gulp-header

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

在JavaScript中检查数字的小数是否高于.5?

如何在JavaScript中检查数字的十进制值是否高于.5?

例如,我需要知道数字的小数点是在.5(更高)和.9(等于还是更低)之间.

一些示例数字:0.6,2.7,4.9.

javascript math numbers decimal

5
推荐指数
2
解决办法
5375
查看次数

与Hammer.js一起使用panright时,如何只开一次方法?

我遇到了使用Hammer.js(使用jQuery插件)正常运行的问题swiperight.因此,我需要使用panright.

当向右平移时,我的事件会发生很多次.

如何更新它只运行一次?(然后当用户在另一张幻灯片上向右或向左滑动时再次)

$('.slide').hammer().on('panright', doSomething);
Run Code Online (Sandbox Code Playgroud)

javascript jquery dom-events ios hammer.js

4
推荐指数
1
解决办法
1959
查看次数

如何在包含特定文件扩展名的超链接中添加类?

有人可以告诉我如何获取字符串并对其运行一个函数来检查特定类型的文件(例如".pdf").如果字符串包含该文件,则需要将"pdf"类应用于包含该链接的锚点.

这是一个字符串的示例:

<a href="/downloads/myfile.pdf">My PDF</a>
Run Code Online (Sandbox Code Playgroud)

我希望它改为:

<a href="/downloads/myfile.pdf" class="pdf">My PDF</a>
Run Code Online (Sandbox Code Playgroud)

javascript css php regex jquery

3
推荐指数
1
解决办法
654
查看次数

如何在 JavaScript 中的方法中跟踪先前的值?

我需要将当前整数与方法中的先前整数进行比较。看起来像这样的事情应该有效,但事实并非如此。有人能告诉我问题出在哪里吗?注意电流是在方法之外设置的。

myMethod : function() {
    var previous;

    if ( current > previous ) {
        // do this!
    }

    previous = current;
}
Run Code Online (Sandbox Code Playgroud)

javascript variables methods

3
推荐指数
1
解决办法
6856
查看次数

在Yii Framework中关闭BODY标记之前移动所有JS?

我一直试图弄清楚如何做这一段时间而且难倒了.出于某种疯狂的原因,YII违背了最佳实践,并尝试在HEAD标签和整个机构中插入所有这些JS.我希望所有的JS都出现在关闭body标签之前.

我正在使用自己的jQuery(v.1.9.0),Bootstrap等,并将scriptMap设置为false.但是,yiiactiveform仍然被插入HEAD标签和JS中,我使用enableClientValidation在我的视图中使用,而且在我的视图底部写的JS仍然出现在BODY中.

怎么能改变?

php performance yii

3
推荐指数
1
解决办法
3739
查看次数

如何获取HTML元素的ID?

所以下面的代码将获得BODY elementL的ID

var bodyId = document.body.id;
Run Code Online (Sandbox Code Playgroud)

如何使用普通的'JavaScript'获取HTML元素的ID?

javascript

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