个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个 AngularJS 应用程序，它有一个容器 Div，可以包含许多宽度不同的子项。 child 的宽度通常大于 parent 的宽度。用户可以水平滚动以访问/查看子 div 及其包含的数据，但是我希望通过在用户单击特定子容器时添加动画来使生活更轻松/更酷，容器向左滚动，因此子容器处于零位置的容器。这一切都很酷，但是在点击之后无法访问(或者应该无法访问)被点击的 child 之前的先前内容，我希望允许用户向后滚动以查看原始内容。我认为这可能是我的实现有问题，我使用了 css3 转换/翻译而不是滚动父级的左侧属性。谁知道我如何让用户滚动回动画隐藏的内容？
我在 JS Bin 上做了一个虚拟人，我将在下面添加我的代码以强调我的问题。非常感谢任何想法、想法或解决方案。
要了解我的问题，请尝试以下操作:
这是 Js Bin:https://jsbin.com/fikuli/edit?html,js,output
请注意，我不想使用 jQuery。
非常非常感谢您的建议!
angular.module('cssStuff', [])
.controller('MainCtrl', ['$scope', function ($scope) {
}])
.directive('moveToThis', function () {
'use strict';
return {
restrict: 'A',
link: function (scope, element) {
var animationDistance = null;
element.bind('click', function (ev) {
console.log('I have been clicked');
// find the distance of the 'beatle' div that was clicked and scroll / animate to the zero position of the beatle-container
// what was clicked...
var clickedBeatle = findUpDom(ev.target, 'data-beatle');
if (clickedBeatle !== false) {
// get position of clicked DIV to container
if(animationDistance === null ) {
console.log('is null');
animationDistance = (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left);
} else {
console.log('already exisits');
animationDistance = animationDistance + (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left) || (element[0].children[1].getBoundingClientRect().left - clickedBeatle.getBoundingClientRect().left) ;
}
console.log(animationDistance, element[0].children[1].children[0].scrollLeft);
element[0].children[1].children[0].style['transition'] = '1s ease-in-out';
element[0].children[1].children[0].style['animation-iteration-count'] = '1';
element[0].children[1].children[0].style['animation-fill-mode'] = 'forwards';
element[0].children[1].children[0].style['transform'] = 'translate(' + animationDistance + 'px)';
}
});
var findUpDom = function (elem, attribute) {
if (elem.getAttribute(attribute)) {
return elem;
} else {
while (elem.parentNode) {
elem = elem.parentNode;
if (elem.getAttribute && elem.getAttribute(attribute)) {
return elem;
break;
}
}
return false;
}
};
}
};
}); body {
font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: aliceblue;
}
.beatle-intro {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
background-color: white;
height: 500px;
padding-left: 10px;
padding-right: 10px;
width: 25%;
}
.beatle-container {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
white-space: nowrap;
width: 70%;
background-color: white;
height: 500px;
}
.beatle {
width: 300px;
max-width: 300px;
display: inline-block;
white-space: initial;
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">
<div data-move-to-this>
<div class="beatle-intro">
<h3>Here is some info about people associated with the Beatles </h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle-container">
<div>
<div class="beatle" data-beatle="john">
<h3>John</h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="paul">
<h3>Paul</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="george">
<h3>George</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="ringo">
<h3>Ringo</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="yoko">
<h3>Yoko</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="pete">
<h3>Pete Best</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="george-m">
<h3>George Martin</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="brian">
<h3>Brian Epstein</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="neil">
<h3>Neil Aspinall</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
</div>
</div>
</div>
</body>最佳答案
只要您使用转换，我就不会期望内容可以再访问，因为它在容器的边界之外。尝试为容器的 scrollLeft 属性设置动画。
(改编自Cross browser JavaScript (not jQuery...) scroll to top animation)
function scrollTo(element, to, duration) {
var start = element.scrollLeft,
change = to - start,
currentTime = 0,
increment = 20;
var animateScroll = function(){
currentTime += increment;
var val = Math.easeInOutQuad(currentTime, start, change, duration);
element.scrollLeft = val;
if(currentTime < duration) {
setTimeout(animateScroll, increment);
}
};
animateScroll();
}
//t = current time
//b = start value
//c = change in value
//d = duration
Math.easeInOutQuad = function (t, b, c, d) {
t /= d/2;
if (t < 1) return c/2*t*t + b;
t--;
return -c/2 * (t*(t-2) - 1) + b;
};
angular.module('cssStuff', [])
.controller('MainCtrl', ['$scope', function ($scope) {
}])
.directive('moveToThis', function () {
'use strict';
var beatleContainer = document.querySelector('.beatle-container');
var xPositionInBeatleContainer = xPositionInContainer(beatleContainer);
function xPositionInContainer(container) {
var containerBox = container.getBoundingClientRect();
return function(el) {
var elBox = el.getBoundingClientRect();
return elBox.left - containerBox.left + container.scrollLeft;
};
}
return {
restrict: 'A',
link: function (scope, element) {
element.bind('click', function (ev) {
scrollTo(beatleContainer, xPositionInBeatleContainer(ev.target), 400);
});
}
};
});body {
font-family: "Comic Sans MS", "Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color: aliceblue;
}
.beatle-intro {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
background-color: white;
height: 500px;
padding-left: 10px;
padding-right: 10px;
width: 25%;
}
.beatle-container {
overflow: auto;
border: 1px solid lightskyblue;
display: inline-block;
white-space: nowrap;
width: 70%;
background-color: white;
height: 500px;
}
.beatle {
width: 300px;
max-width: 300px;
display: inline-block;
white-space: initial;
padding-left: 10px;
}<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body data-ng-app="cssStuff" data-ng-controller="MainCtrl">
<div data-move-to-this>
<div class="beatle-intro">
<h3>Here is some info about people associated with the Beatles </h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle-container">
<div>
<div class="beatle" data-beatle="john">
<h3>John</h3>
<br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="paul">
<h3>Paul</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="george">
<h3>George</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="ringo">
<h3>Ringo</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="yoko">
<h3>Yoko</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="pete">
<h3>Pete Best</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="george-m">
<h3>George Martin</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh..
</div>
<div class="beatle" data-beatle="brian">
<h3>Brian Epstein</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
<div class="beatle" data-beatle="neil">
<h3>Neil Aspinall</h3>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam scelerisque nisl vitae semper suscipit. Suspendisse blandit scelerisque ipsum ut interdum. Cras gravida arcu a quam ornare volutpat. Etiam fringilla, ex eget fermentum lobortis, ex ante dapibus orci, vitae ornare mi diam sed dui. Curabitur sit amet erat non nunc volutpat egestas et nec nunc. Phasellus lorem elit, malesuada at arcu a, congue imperdiet quam. Nulla fermentum vel nisi non ultrices. Sed nunc lorem, maximus rhoncus quam quis, blandit pharetra nibh.
</div>
</div>
</div>
</div>
</body>关于javascript - AngularJS + CSS3 TransformAnimation 向左滑动时我们会丢失内容吗？无法向后滚动？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31743591/
25
4
0
我正在为我的按钮使用 onClick 功能。我的按钮代码如下所示: Button 1 Button 2 我的 JS 函数如下所示: function fadeNext(selectedId, spee
首先，我想提一下，我理解每个人在不提供至少一些试验或错误的情况下提出问题的感受，但这纯粹是一种知识需求，话虽如此，我会去提前问。 我一直无法弄清楚如何将保存在 MySQL 表中的 600-1000 个
我想做的事情有点令人困惑，而且我英语不太好，所以我先把代码贴在这里，这样你就可以很容易地理解: 以下是表单内容: Testing for Stackoverflow Option1
我学习 SDL 二维编程已有一段时间了，现在我想创建一个结合使用 SDL 和 OpenGL 的程序。我是这样设置的: SDL_Init(SDL_INIT_VIDEO); window = SDL_Cr
我创建了 2 个 data-* 标签。数据类别和数据标签。单击 href 标签后，我想复制该数据类别和数据标签以形成输入。我的代码是:
我想用 CSS 换行。我正在使用内容。 td:before { content: "Test\A Test2"; } 它不工作。如何正确
这个问题已经有答案了: Java Class that implements Map and keeps insertion order? (8 个回答) 已关闭 6 年前。 我有一个 HashMap
我正在尝试使用 JMeter 执行端到端测试。测试涉及写入SFTP文件夹并从另一个SFTP文件夹读取写入操作生成的文件。 我能够使用 JMeter SSH SFTP 插件连接到 SFTP 文件夹，并能
您好，我有带有标准服务器端 Servlet 的 GWT 客户端。 我可以从 GWT 客户端上传文件并在服务器端读取其内容 我可以将其作为字符串发送回客户端 但是 我有 GWT FormPanel与操作
我在 Plone 4.3.9 中创建了一个自定义类型的灵巧性，称为 PersonalPage，必须只允许在特定文件夹中使用 成员文件夹/用户文件夹 . 在他的 FTI 中，默认情况下 False .
在新(更新)版本的应用程序中更改小部件布局的最佳做法是什么？当新版本提供更新、更好的小部件时，如何处理现有小部件？ 最佳答案 我认为您必须向用户显示一个弹出窗口，说明“此版本中的新功能”并要求他们重新
在我的应用程序中，我使用支持 View 寻呼机和 PagerTabStrip。进入查看寻呼机我有一些 fragment ，进入其中一个我正在使用支持卡片 View 。运行应用程序后，所有卡片 View
我有以下布局文件。基本上我有谷歌地图，在左上角我有一个 TextView，我需要在其中每 15 秒保持一次计数器以刷新 map 。布局很好。
我使用如下结构: HashMap > > OverallMap 如果我这样做: OverallMap . clear ( ) clear() 丢弃的所有内容(HashMap 对象、Integer 对
我在数据库中有 1000 张图像。在页面加载时，我随机显示 60 张图片，当用户滚动时，我通过 AJAX 请求添加 20 张图片。 第一种方法 我所做的是将所有图像加载到一个容器中，然后隐藏所有图像并
我正在使用 woocommerce 创建一个网上商店。 我想在每个产品上添加一个包含产品信息的表格，例如颜色、交货时间等等。 但是当我添加这张表时。本产品消失后的所有内容。 我的表的代码: td {
This question already has an answer here: What does an empty value for the CSS property content do?
因此，我正在与我的 friend 一起为 Google Chrome 开发一个扩展程序，对于大多数功能(即日历、设置等)，我们打开一个模式，这样我们就不必重定向到另一个页面。当您在内容之外单击时，我们
我将可变高度的 CSS 框设置为在更大的 div 中向左浮动。现在我想添加一个标题，其中文本在框的左侧垂直显示(旋转 90 度)，如下面的链接所示(抱歉还不能发布图片)。 http://imagesh
相关页面位于 www.codykrauskopf.com/circus 如果您查看我页面的右侧，在半透明容器和浏览器窗口边缘之间有一个间隙。我看了看，出于某种原因，wrap、main、content
我是一名优秀的程序员,十分优秀！