- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我完全被这个问题挡住了。每次我的 h4
到达窗口中间时,我都需要运行一个更改图像的函数。在我的例子中,每个 h4
一张图片,当用户向下滚动或向上滚动时改变它。也就是说,每一个img
都会属于一个h4
。到目前为止,我已经实现了根据 h4
更改不透明度,但我没有更改图像。这是我的 html:
<div id="column-left">
<h4 class="active">Targets</h4>
<h4>Valors</h4>
<h4>Me </h4>
</div>
<div id="column-right">
<img src="img/about/map.jpg" class="active" alt="Map"/>
<img src="img/about/bridge.jpg" alt="Bridge"/>
<img src="img/about/road.jpg" alt="Road"/>
</div>
这是我的代码:
var findMiddleElement = (function(docElm){
var viewportHeight = docElm.clientHeight,
elements = $('h4');
$('h4').first().css('opacity','1','important');
return function(e){
var middleElement;
if( e && e.type == 'resize' )
viewportHeight = docElm.clientHeight;
elements.each(function(){
var pos = this.getBoundingClientRect().top;
// if an element is more or less in the middle of the viewport
if( pos > viewportHeight/2.5 && pos < viewportHeight/1.5 ){
middleElement = this;
console.log('I am in the middle');
changeImage();
return false; // stop iteration
}
});
$(middleElement).css({opacity:'1', transition : 'opacity 1s ease-in-out'});
}
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
function changeImage(){
console.log('I am ready to change the image');
$('img').each(function(){
$('.active').removeClass('active');
$(this).addClass('active');
});
}
这是 fiddle : jsfiddle.net/antoniobarcos/owv1ysto/4/
提前致谢。
最佳答案
您的 changeImage()
只是将 active
类分配给页面上的最后一个图像元素。关于该类在图像元素上的行为,您没有任何 css 规则,因此显然它不会影响任何东西。我看到两种可能的解决方案:
h4
元素的索引(您正在遍历它们)发送到 changeImage
函数并选择 img:nth-child(idx + 1)
元素应用active
类。它还需要一些 css,例如 img { display: none; } img.active { 显示: block ; }
。在我看来,这不是很灵活。data-image
,图片来源,对应于每个h4
元素。然后,右栏中只有一个图像元素,您的代码将类似于以下内容:/* CHANGE MI IMAGE PLEASE */
var findMiddleElement = (function(docElm) {
var viewportHeight = docElm.clientHeight,
elements = $('h4');
$('h4').first().css('opacity', '1', 'important');
return function(e) {
var middleElement;
if (e && e.type == 'resize') viewportHeight = docElm.clientHeight;
elements.each(function(idx) {
var pos = this.getBoundingClientRect().top;
// if an element is more or less in the middle of the viewport
if (pos > viewportHeight / 2.5 && pos < viewportHeight / 1.5) {
middleElement = this;
console.log('I am in the middle');
changeImage($(this).data('image'));
return false; // stop iteration
}
});
$(middleElement).css({
opacity: '1',
transition: 'opacity 1s ease-in-out'
});
};
})(document.documentElement);
$(window).on('scroll resize', findMiddleElement);
// You probably don't need a function with one line
function changeImage(src) {
console.log('I am ready to change the image');
$('img').attr('src', src);
}
html,
body {
width: 100%;
height: 100%;
font-size: 0;
margin: 0;
padding: 0;
background-color: #000;
}
h4 {
text-transform: uppercase;
}
.left-column {
display: inline-block;
width: 40%;
height: 100%;
height: 100%;
background-color: #000;
font-size: 16px;
color: #FFF;
padding: 20px;
box-sizing: border-box;
}
.right-column {
display: inline-block;
width: 60%;
height: 100%;
height: 100%;
background-color: black;
position: fixed;
}
.right-column img {
min-width: 100%;
min-height: 100%;
}
h4 {
opacity: .2;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left-column">
<h4 data-image="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg"> Targets </h4>
<p>Nunc vitae turpis sem. Aliquam augue ligula, lacinia quis massa volutpat, fermentum ornare quam. Donec lacinia lorem orci, sit amet facilisis arcu posuere eu. Proin eu mauris ligula. Pellentesque fringilla, nisl eu ullamcorper hendrerit, nisl neque
auctor turpis, nec placerat justo massa vel erat. Vestibulum quis metus et tellus feugiat hendrerit. Nunc volutpat in turpis id imperdiet. Duis odio massa, maximus at pulvinar eu, semper sed eros. Praesent consectetur eros a neque accumsan, at semper
libero pharetra. Sed tempor, nunc quis gravida congue, lacus nisi aliquam urna, sed hendrerit risus risus eget ipsum. Vivamus eu consequat risus. Fusce tempus rhoncus odio non gravida. Nunc in ante lacus.</p>
<h4 data-image="http://www.jeremynoeljohnson.com/wp-content/uploads/2014/12/mountain.jpg"> Valors </h4>
<p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
congue urna. Sed posuere mollis consectetur.</p>
<h4 data-image="http://collabcubed.files.wordpress.com/2012/10/high-trestle-trail-bridge_kevin_eberle_booneiowa_collabcubed.jpg"> Me </h4>
<p>Maecenas sollicitudin ligula nibh, at rutrum leo sagittis non. Sed quis ornare elit, eget sodales quam. Suspendisse arcu elit, rhoncus vel neque a, faucibus aliquam massa. Mauris tincidunt dui a ipsum suscipit malesuada. Donec lacus justo, porttitor
vel vehicula in, placerat rutrum mi. Etiam non fermentum massa, nec congue justo. Duis sed ex molestie, varius tellus sit amet, molestie nunc. Phasellus aliquam magna nunc, ut lacinia massa egestas molestie. Nullam fringilla porta massa sed rhoncus.
Curabitur non ullamcorper odio, eu feugiat urna. Integer a mattis magna, in sollicitudin arcu. Fusce consectetur eu orci at sagittis. Maecenas vel ligula consectetur, placerat nibh quis, gravida augue. In risus ex, volutpat in risus at, efficitur
congue urna. Sed posuere mollis consectetur.</p>
</div>
<div class="right-column">
<img src="http://i2.cdn.turner.com/cnn/dam/assets/130530161523-100-beaches-crane-beach-horizontal-gallery.jpg" />
</div>
请注意,当您向上滚动时,图像不会更改为第一个,因为第一个 h4
元素不在中间。如果不是所需的行为,您应该修复这种情况。
关于javascript - 每次 <h4> 到达窗口中间时运行一个函数来改变图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27638467/
有人可以给我一个更简单的以下代码的解决方案(它正在展开给定结构 0xFC :: len :: payload :: ... :: 0x0A :: 0x0D 的整数列表): object Payload
我已经在我的网站上安装了 SSL 证书,但 intermediate.crt 无法正常工作。任何 SSL 检查器(例如 GeoTrust Checker)都告诉我,缺少中间 key 。网站上已经使用了
如何让图像从这个框的中间开始? (中间纵横) 最佳答案 有几种方法可以做到这一点,如果它需要在所有浏览器(IE7+ 和其他浏览器)中工作,你需要做不同的事情来让它在某些情况下工作。 使用绝对位置
如何强制 min-height 和 vertical-align:middle 为 td 元素或其内部元素工作? 最佳答案 td 元素上的 height 等同于 min-height,因为如果需要,表
我正在尝试自动滚动到订单簿的中间行。 我有 orderBook div,其中放置了带有 orderBook 的表。该表的其中一行有一个 id middleRow。我想做的是滚动该行并将其放置在 ord
我正在尝试在 javascript 中计算绝对定位元素的 transform-origin 属性,以便它们在悬停时填充整个视口(viewport)。 我尝试通过 x 除以窗口宽度和 y 除以窗口高度来
我有休闲字符串 ' this is my string ' 是否可以删除开头和结尾的所有空格,只在单词之间留一个空格。 要选择我使用过的所有空间: SELECT regexp_replace('
我正在设法创建我的第一个复杂的 J2E 解决方案,并且在每个教程中我都发现了某种中间表的用法,如下所示: 表:用户、用户角色、角色虽然逻辑会简单地向用户表添加一个键来引用它在角色表上的角色,但为什么要
我正在寻找以下解决方案。我想定位一个图像元素,例如 在中间。所以高度是视口(viewport)的高度,宽度会自动设置,图像的中间应该在视口(viewport)宽度的中间。 我搜索的一个例子就像下面的网
我正在设计一种布局,它更像是注册用户的个人仪表板。我让它变得简单,使用基本的 2 列网格,一个用于侧边栏,一个用于主要内容。 因为,例如,80% 的网站使用将发生在一个单独的子系统中,在无 chrom
我有三个不同的 div 标签(不在彼此内部)和代码,所以它有一个把单词放在左边、中间或右边,但中心非常偏离中心。这是 HTML 代码: .desc { float: right; color:
我有以下CSS http://jsbin.com/azivip/75/edit我想让黄色的 div 高度填充蓝色和绿色 div 之间的空间。使用高度继承似乎使 div 超出了绿色 div。 有什么想法
我不得不在其父元素的中间放置一些文本。我用下面的代码实现了它: #div1 { position: relative; margin: 0; padding: 0; } #div2 {
发现一个使用合法证书(由thawte 签名)的网站,但所有浏览器都会拒绝它。我不明白为什么。thawte 的支持告诉我一个域有两个证书,然后将这个 https://www.sslshopper[dot
我正在尝试使用 OpenSSL 创建证书链,但出于某种原因,当我在我的计算机上安装我的根 CA 并尝试验证证书链时,它总是告诉我它找不到证书的颁发者.为了让事情发生,我必须安装中间 CA,这是没有意义
我看到 REST 的一大好处是依赖 HTTP 缓存。我不是在争论这个,而是完全认同这个想法。但是,我从来没有看到对中间 HTTP 缓存的更深入的解释。 如果我将 Cache-control heade
查看此图片 Facebook Messenger Android App Buttons ( MESSENGER\ACTIVE ) 我怎样才能做到这一点? 详细信息:- 带有 2px 红色边框的 di
我的任务是制作漂亮的文本,在文本中间加一条白线,如下图所示。是否可以使用 css 来实现?这是 Fiddle .container{ height:200px; width:400px;
在拉丁文字中,字母有大写和小写形式。在 Python 中,如果你想比较两个字符串而不考虑它们的大小写,你可以使用 'string'.upper() 或 'string'.lower() 将它们转换为相
我正在使用 awk 对文件进行一些文本处理。例如删除尾随空格。 awk '{gsub(/ +$/, "")} {print $0}' filename 这很好用。但是当我将输出重定向到原始文件时。它变
我是一名优秀的程序员,十分优秀!