小编Dav*_*ins的帖子

我需要在Internet Explorer浏览器中触发特定脚本!

我试过这个:

<!--[if IE]> 
<script></script>
<![endif]-->

不幸的是,这实际上阻止了脚本的加载.

编辑:对于每个人都在问我为什么需要这个:当使用一些动画时,IE使滚动非常跳跃.为了解决这个问题,我需要实现一个向IE提供平滑滚动的脚本.我不想将它应用到其他浏览器,因为它们不需要它和这个脚本虽然使滚动更平滑也使它有点不自然.

问题：我需要对这个布局应用一些鼠标滚轮平滑水平滚动：https : //jsfiddle.net/38qLnzkh/。

替代方案：我发现这个脚本完全符合我的要求，但它似乎只能垂直工作：Butter.js。如果你能让它水平工作，它可能会解决我所有的问题。

重要的：

1.应根据屏幕宽度和触摸设备禁用脚本。

2.它应该像你在小提琴中看到的那样在所有东西的顶部容纳一个菜单。

先感谢您。

编辑： 如果不清楚我需要什么，这里有两个我正在寻找的效果示例：

https://nemesiscorporation.com/

https://www.tentwenty.me/about-us

我的布局：

HTML：

<main class="outer-wrapper">
    <div class="wrapper">
        <article class="section" id="a"><h2>01</h2></article>
        <article class="section" id="b"><h2>02</h2></article>
        <article class="section" id="c"><h2>03</h2></article>
        <article class="section" id="d"><h2>04</h2></article>
        <article class="section" id="e"><h2>05</h2></article>
        <article class="section" id="f"><h2>06</h2></article>
    </div>
</main>

CSS：

.outer-wrapper {
  width: auto;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
::-webkit-scrollbar {
  display: none;
}

.wrapper {
  display: …

我在项目中使用了几个CSS动画.我的问题是当向下滚动时,这些动画只会被触发一次.我需要在每次用户滚动它们时触发它们,无论是向上还是向下滚动页面.

CSS

.slideRight{

    animation-name: slideRight;
    -webkit-animation-name: slideRight; 

    animation-duration: 1.5s;   
    -webkit-animation-duration: 1.5s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 

}

@keyframes slideRight {

    0% {
        transform: translateX(-150%);
    }
    50%{
        transform: translateX(8%);
    }
    65%{
        transform: translateX(-4%);
    }
    80%{
        transform: translateX(4%);
    }
    95%{
        transform: translateX(-2%);
    }               
    100% {
        transform: translateX(0%);
    }   

}

@-webkit-keyframes slideRight {

    0% {
        -webkit-transform: translateX(-150%);
    }
    50%{
        -webkit-transform: translateX(8%);
    }
    65%{
        -webkit-transform: translateX(-4%);
    }
    80%{
        -webkit-transform: translateX(4%);
    }
    95%{
        -webkit-transform: translateX(-2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }

}

HTML …

我正在使用Swiper幻灯片.我正在使用这个特定的版本.这是我正在使用的确切代码.

添加第二个"Swiper"时,分页无法正常工作.

我尝试给第二个"swiper"容器提供不同的类,但它没有用.

我怎么能在同一页面中有两个???

谢谢.

我正在寻找的很简单，一种在屏幕或窗口宽度小于 950 像素时自动将用户重定向到不同 URL 的方法。

我不想使用“刷新”，因为它不被推荐，我也不想使用“用户代理”，因为从长远来看它对我来说不太可靠，我不想担心更新这个。

这是我看到为此目的到处建议的脚本，但由于某种原因它没有做任何事情：

<script type="text/javascript">
  <!--
  if (screen.width <= 950) {
    window.location = "https://www.google.com/";
  }
  //-->
</script>

我也尝试过所有这些变体，但没有成功：

window.location
document.location
window.location.href
document.location.href

我还尝试将它作为 Head 标签之后甚至 Doctype 之前的第一件事。没发生什么事...

我在捐款表单的顶部有一条默认消息,我希望它根据用户徘徊或点击的数量动态更改.

每个金额以及"€Other"都应该有相应的信息.例如:"5.00欧元我们可以做到这一点......"10.00欧元我们可以做到......"

这些消息应在悬停时相应更改,但如果选择了相应的选项,则仍然可见.

如果用户取消选择以前选择的选项,或者未选择任何选项,则应重新显示默认消息.

我尝试了不同的方法但没有成功,我真的很感激帮助实现这一目标.

小提琴

HTML

<p>Choose below the amount of your donation</p>

<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank">

    <input type="hidden" name="cmd" value="_donations">
    <input type="hidden" name="business" value="louzanimalespaypal@gmail.com">

    <label><input type="checkbox" name="amount" class="checkbutton" value="5,00"><span>€05.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="10,00"><span>€10.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="15,00"><span>€15.00</span></label>
    <label><input type="checkbox" name="amount" class="checkbutton" value="20,00"><span>€20.00</span></label>
    <input type="number" class="textBox" name="amount" placeholder="€ Other">

    <input type="hidden" name="item_name" value="Donation">
    <input type="hidden" name="item_number" value="Donation">
    <input type="hidden" name="currency_code" value="EUR">
    <input type="hidden" name="lc" value="PT">
    <input type="hidden" name="bn" value="Louzanimales_Donation_WPS_PT">
    <input type="hidden" name="return" value="http://www.louzanimales.py/agradecimentos.htm">


    <br style="clear: both;"/>
    <input …

我正在使用这个脚本：

    var swiper = new Swiper('.swiper', {
    slidesPerView: 3,
    spaceBetween: 50,
});

当屏幕宽度小于 1000px 时，我希望“slidesPerView：3”更改为“slidesPerView：2”，当屏幕宽度小于 500px 时更改为“slidesPerView：1”。

由于我对 javascript 语法一无所知，请通过编写完整代码来帮助我。

谢谢你的帮助。

编辑：

谢谢大家的回复。

虽然我仍然无法让它工作......

波纹管是完整的脚本。

我究竟做错了什么？？？

var swiper2 = new Swiper('.swiper2', {
    slidesPerView: 3,
    spaceBetween: 50,
    freeMode: true,
    loop: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    breakpoints: {
        // when window width is <= 499px
        499: {
            slidesPerView: 1,
            spaceBetweenSlides: 30
        },
        // when window width is <= 999px
        999: {
            slidesPerView: 2,
            spaceBetweenSlides: 40
        }
    }
});

我对 JavaScript 知之甚少，所以我什至不确定我的问题是否有意义。然而，我的观点是如何应用相同的媒体查询原理来根据屏幕的宽度更改脚本上的特定值。

在下面的示例中，我使用滚动间谍活动菜单，并使用 -100px 的负滚动来进行标题补偿。此偏移是必要的，因为标头具有固定位置。

如果窗口小于 900px 宽度，我需要将偏移值更改为 0px，因为此时，标题位置变得相对。

$(document).ready(function () {
$(window).scroll(function () {

    var y = $(this).scrollTop();

    $('.link').each(function (event) {
        if (y >= $($(this).attr('href')).offset().top - 100) {
            $('.link').not(this).removeClass('active');
            $(this).addClass('active');
        }
    });

});

});

$(function () {
$('a[href*=#]:not([href=#])').click(function () {
    if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
            $('html,body').animate({
                scrollTop: (target.offset().top - 100)
            }, 850);
            return false; …

使用CSS时,是否可以使用具有两列的行,一行包含图像而另一列包含文本,以使其内容在中间垂直对齐？

几天以来我一直在敲打我的脑袋并尝试了我能想到的一切.

这是我使用的基本结构,完全基于百分比.这是针对基于一系列部分的响应式单页布局,每个部分的最小高度设置为100%.

CSS

html, body {
    width: 100%;
    height: 100%;
}

section {
    width: 100%;
    min-height: 100%;
    display:table;
    height:inherit;
}

.row {
    width: 100%;
    height: 100%;
    display:table-cell;
}

.col-left, .col-right {
    float: left;
    width: 50%;
    height: 100%;
}

/*--this should be vertically centred--*/

.content {
}

HTML

<section>

        <div class="row">

            <div class="col-left">
                <div class="content">
                    <h1>SOME TEXT</h1>
                </div>
            </div>

            <div class="col-right">
                <div class="content">
                    <img src="SOME IMAGE URL">
                </div>
            </div>

        </div>

</section>

的jsfiddle

卡验证器正确显示了我的摘要卡，但是，当我实际尝试共享它时，请单击“ twitter-share-button”，而不显示推特卡，而仅显示常规推文。

验证者这样说：

您的网站已列入summary_large_image卡的白名单

INFO：成功获取页面INFO：找到18个元标记INFO：twitter：card =找到summary_large_image标记INFO：卡成功加载

这些是我正在使用的标签：

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@username">
<meta name="twitter:title" content="Some Title">
<meta name="twitter:description" content="Some description.">
<meta name="twitter:image" content="http://example.com/images/dog.jpg">

这是html：

<a class="twitter-share-button"
  href="https://twitter.com/intent/tweet?text=Testing Testing Testing">
Tweet</a>