小编Cas*_*ert的帖子
推荐指数
解决办法
查看次数
如何获得视差工作的核心部分 - 这就是诀窍？
我试图尝试视差并从头开始了解这个魔法的核心部分.为了给你一个我喜欢用作灵感的例子,你可以在这个链接的"照片"部分看到它.
最新代码在页面下方,包含相关信息.要全面了解问题,请参阅其余详细信息.
核心部分我已经知道是scrollTop()的$window和offsetTop元素都是重要的应用DOM元素上的视差效果,以及一factor对多么敏感效果应该滚动速度来做出回应.最终结果应该是一些以像素或百分比计算translateY或translate3d坐标的公式.
我读了CSS属性在互联网上translate比速度更快,例如,top从position: absolute和我的偏好也将是用翻译与组合TweenMax GSAP.因此,视差的运动将非常平滑.但是,如果只有css属性translate就够了,那也没关系.我看到了一些使用TweenMax的例子,所以这就是我现在使用它的原因.
JS
我有基本的代码:
var win = $(window);
var el = $('#daily .entry').find('figure');
win.scroll(function() {
var scrollTop = win.scrollTop();
var parallaxFactor = 5;
el.each(function() {
var image = $(this).find('img');
var offsetTop = $(this).offset().top;
// This is the part where I am talking about.
// Here should be the magic happen...
});
}); …推荐指数
解决办法
查看次数
简单的中心是一个带有CSS而且没有黑客的对象
我想使用CSS将对象居中并且没有黑客,这是可能的以及如何？
我试过这个,但是我的p标签已经消失了.
.centered {
position: fixed;
top: 50%;
left: 50%;
}
推荐指数
解决办法
查看次数
是否可以创建半径的轮廓边框？
我知道你可以用CSS3添加一个轮廓边框.
outline: 10px solid red;
现在我想知道如何在该轮廓边框上添加一个半径.
我试过这个,但不起作用:
.radius {
padding: 20px 60px;
text-transform: capitalize;
-moz-outline: 10;
outline: 10px solid red;
-webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
}
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
如何覆盖特定div的max-width？
我正在寻找以下解决方案.在我的CSS中,我有以下内容:
img, a img {
max-width: 100%;
vertical-align: middle;
}
此代码对于我的WordPress主题和响应式网页设计是必需的.现在我想覆盖max-width属性auto.当我这样做时,它不会覆盖:
#pixel-perfect img {
max-width: auto !important;
position: absolute;
margin: -200px 0 0 -140px;
z-index: -9999;
}
我做错了什么？
推荐指数
解决办法
查看次数
父div中的中心图像元素
如何在父div中设置图像元素的中心？我想这样做,以便图像的中间始终在他父母的中心.此外,我希望图像始终具有100%的高度(注意:我不想拉伸图像宽度).
请看这里的例子:http://jsfiddle.net/Ex5ax/5/
<div class="box">
<img src='featured.jpg' />
</div>
CSS:
.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }
推荐指数
解决办法
查看次数
如何使用控制器范围的版本来引用JS中的当前控制器？
我遇到了以下问题.我的JavaScript结构如下所示.
我创建了一个包含所有控制器的对象.那些控制员有自己的责任.下面的代码属于main.js首先调用的文件:
main.js
var App = {};
App.init = function() {
console.log('init');
App.uiController.init();
App.heroController.init();
}
在函数中,init()我调用控制器的初始化器.
控制器对象如下所示:
uiController.js
App.uiController = {
root: 0,
init: function() {
// Development
console.log('init uiController');
root = this;
// Call functions
root.doSomething();
},
doSomething: function() {
}
}
加载完所有脚本后,我调用最后一个脚本init.js:
init.js
App.init();
我的HTML标记如下所示:
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
</head>
<body>
<!-- // Start HTML \\ -->
<header id="header">
</header><!-- End header#header -->
<main class="main">
</main><!-- End main.main -->
<footer …推荐指数
解决办法
查看次数
将CSS插入框阴影添加到子图像顶部的父元素上
我正在尝试将阴影添加到父<img>元素中,其中子元素位于其中.我想插入阴影以重叠图像.
我的HTML代码是:
<section class="highlights">
<img src="images/hero.jpg" alt="" />
</section><!-- End section.highlights -->
和CSS:
.highlights {
height: 360px;
padding: 0;
position: relative;
overflow: hidden;
opacity: 0.9;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index:1;
}
.highlights img {
height: auto;
width: 100%;
margin: 0 auto;
display: block;
position: relative;
}
.highlights {
-webkit-box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
box-shadow: inset 0 0 10px 0 rgba(0, 0, 0, 0.2);
}
阴影不会出现在我身上.我做错了什么？
推荐指数
解决办法
查看次数
如何创建包含多行的轮播？
我正在寻找一个有多行的旋转木马.例如3行 - 9个项目.一个jQuery旋转木马会很好,但我只能找到1排旋转木马.
我想要这个设置.这可能吗？
推荐指数
解决办法
查看次数