我对 JavaScript 还很陌生，所以我想我应该看看教程，我发现了一些我喜欢的效果，并开始阅读它们并复制它们，在我的笔记本电脑上一切正常，但是当我看看移动版本中的页面，我的两个图标都向右偏移太多，有没有办法设置 JavaScript，以便它能够响应屏幕尺寸？ http://gotsocial.co.uk/coffee/
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Cupcake coffee box / The Gelato Box </title>
</script>
</head>
<body>
<div id="clouds">
<div class="cloud x1"></div>
<div class="cloud x2"></div>
<div class="cloud x3"></div>
<div class="cloud x4"></div>
<div class="cloud x5"></div>
</div>
<div class="container">
<figure class ="rotate">
<a href="http://www.cupcakecoffeebox.com/"><img src="150.150.fw_.png" alt="Cupcake coffe box"> </a>
<figcaption>Cupcake coffee box</figcaption>
</figure>
<figure class ="rotate">
<a href="http://www.thegelatobox.com/janettas/"><img src="Icon-Logo3.png" alt="The Gelato Box" ></a>
<figcaption>Gelato box</figcaption>
</figure>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="js/index.js"></script>
</div>
</body>
</html>
CSS
*{ margin: 0; padding: 0;}
body {
/*To hide the horizontal scroller appearing during the animation*/
overflow: hidden;
}
#clouds{
padding: 100px 0;
background: #c9dbe9;
background: -webkit-linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -linear-gradient(top, #c9dbe9 0%, #fff 100%);
background: -moz-linear-gradient(top, #c9dbe9 0%, #fff 100%);
}
/*Time to finalise the cloud shape*/
.cloud {
width: 200px; height: 60px;
background: #fff;
border-radius: 200px;
-moz-border-radius: 200px;
-webkit-border-radius: 200px;
position: relative;
}
.cloud:before, .cloud:after {
content: '';
position: absolute;
background: #fff;
width: 100px; height: 80px;
position: absolute; top: -15px; left: 10px;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
-moz-transform: rotate(30deg);
}
.cloud:after {
width: 120px; height: 120px;
top: -55px; left: auto; right: 15px;
}
/*Time to animate*/
.x1 {
-webkit-animation: moveclouds 15s linear infinite;
-moz-animation: moveclouds 15s linear infinite;
-o-animation: moveclouds 15s linear infinite;
}
/*variable speed, opacity, and position of clouds for realistic effect*/
.x2 {
left: 200px;
-webkit-transform: scale(0.6);
-moz-transform: scale(0.6);
transform: scale(0.6);
opacity: 0.6; /*opacity proportional to the size*/
/*Speed will also be proportional to the size and opacity*/
/*More the speed. Less the time in 's' = seconds*/
-webkit-animation: moveclouds 25s linear infinite;
-moz-animation: moveclouds 25s linear infinite;
-o-animation: moveclouds 25s linear infinite;
}
.x3 {
left: -250px; top: -200px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
.x4 {
left: 470px; top: -250px;
-webkit-transform: scale(0.75);
-moz-transform: scale(0.75);
transform: scale(0.75);
opacity: 0.75; /*opacity proportional to the size*/
-webkit-animation: moveclouds 18s linear infinite;
-moz-animation: moveclouds 18s linear infinite;
-o-animation: moveclouds 18s linear infinite;
}
.x5 {
left: -150px; top: -150px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.8; /*opacity proportional to the size*/
-webkit-animation: moveclouds 20s linear infinite;
-moz-animation: moveclouds 20s linear infinite;
-o-animation: moveclouds 20s linear infinite;
}
@-webkit-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-moz-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
@-o-keyframes moveclouds {
0% {margin-left: 1000px;}
100% {margin-left: -1000px;}
}
.container{
overflow:hidden;
margin-left:auto;
margin-right:auto;
width:50%;
height:50%;
margin-top:-20%;
}
figure{
height:30%;
width:30%;
}
figcaption{
background-color:black;
color:white;
width:50%;
}
.rotate {
position: absolute;
}
JS
var stops = 2, // number of stops around the circle
delay = 2500, // time to pause in milliseconds
animationDelay = 20, // animation time between steps
step = 0.05, // in radians
img = $('.rotate'), // target images
r = 150, // radius
xcenter = 600, // x offset
ycenter = 200, // y offset
// *** don't change variables below ***
last,
d = 0,
t = 0,
i = 1,
angledStops = 360/stops,
RadToDeg = 180 / Math.PI,
stop = angledStops;
// this evenly spaces out all images with the class rotate around the circle
function setup() {
// 270 degrees is actually the top of the circle
var start = 270 * Math.PI/180,
spacing = 2 * Math.PI / img.length;
img.each(function () {
$(this)
.data('pos', start) // save the position of each image
.css({
top: Math.floor(ycenter + (r * Math.sin(start))),
left: Math.floor(xcenter + (r * Math.cos(start)))
});
start += spacing;
});
}
function moveit() {
t += step;
last = d;
d = Math.round(t * RadToDeg) % 360;
$.when(
img.each(function () {
var $t = $(this),
pos = $t.data('pos') + step;
$t
.data('pos', pos)
.animate({
top: Math.floor(ycenter + (r * Math.sin(pos))),
left: Math.floor(xcenter + (r * Math.cos(pos)))
}, animationDelay);
})).then(function () {
if (d > stop || d < last) {
i++;
if (i > stops || d < angledStops) {
stop = angledStops;
i = 1;
} else {
stop = angledStops * i;
}
setTimeout(moveit, delay);
} else {
moveit();
}
});
}
$(document).ready(function () {
setup();
moveit();
});
最佳答案
当屏幕宽度变为 960 像素或更小时，此代码片段使用 window.matchMedia 方法删除图像并增加其旁边的 colspan="4"。以全页模式查看并减小浏览器的宽度。
片段
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Profile</title>
<link href="http://glpjt.s3.amazonaws.com/so/wm.css" rel="stylesheet">
<style>
img { width: 225px; height: 300px; }
</style>
</head>
<body>
<table class="ap">
<tbody>
<tr>
<td class="header" colspan="4">
<h1>Name</h1>
<h3>Company</h3>
<h3 style="margin-bottom: 10px;">Position</h3>
</td>
</tr>
<tr>
<td class="bio" colspan="4">
<p>
Lorem ipsum dolor sit amet, integer risus facilisis arcu feugiat, aliquet mattis est et eu, in malesuada nunc viverra. Risus quis turpis facilisis, et lorem mauris metus libero, aliquam rhoncus netus etiam, eu eu semper aliquam. Elementum dolorem nec amet, eu posuere parturient sed. Sed laoreet adipiscing potenti id, lacinia tempus nam cursus, laoreet blandit pulvinar amet, quis maecenas posuere scelerisque sed. Nunc maecenas sit quam eu, tortor arcu quis in lacus, risus quisque vel amet, pharetra sed odio eget cras.</p>
<p>
Class dictum metus aliquam molestie, vestibulum proin varius penatibus, scelerisque duis nisl lacinia sed, suspendisse sed senectus cras. In amet ridiculus mollis aenean, consequat odio euismod ante, cursus etiam rhoncus proin pede, vel etiam maecenas accumsan sed. Urna pharetra non rutrum magna, diam nonummy mi id, sit nullam sit orci, ridiculus ut velit ullamcorper. Sodales malesuada vestibulum ut neque, sit suspendisse pretium et, viverra mauris arcu velit. Ut rhoncus pulvinar neque felis, lacus amet diam donec tempor. Leo consequat dapibus felis, et est nonummy rhoncus, magna volutpat magna in dis.</p>
</td>
</tr>
<tr>
<td class="pic"><img src="http://i.imgur.com/6Bf5kNC.jpg" /></td> <td class="cell" colspan="3"><section class="acm">
<h2>List</h2>
<ul>
<li>Lorem ipsum dolor sit amet, nullam ac adipiscing nec nec, quis eget egestas turpis nec, et id fusce nam, tempor netus orci lorem quam. </li>
<li>Pellentesque in adipiscing eget, nunc tincidunt numquam ac, sed vestibulum sollicitudin id. </li>
<li>Lorem nunc ut iaculis wisi, augue gravida mollis vel congue, aliquam suspendisse pharetra volutpat eget. </li>
<li>Ipsum mollis sit quidem, donec sit commodo lorem, at sit pede non, morbi consectetuer blandit libero. </li>
<li>Amet aliquam ante fermentum imperdiet, in nam ipsum nulla, vehicula arcu feugiat vulputate, amet eu commodo enim. </li>
<li>Dignissim nibh et libero, cras praesent dictum nascetur lectus, vestibulum integer pellentesque nam, eget ac cras nunc pede. </li>
</ul>
</section></td>
</tr>
<tr>
<td class="txt" colspan="4">
<h2>Text</h2>
<p>Lorem ipsum dolor sit amet, ex eum inimicus percipitur, his denique blandit an, in nobis assentior definitionem sed. Id molestiae mediocritatem necessitatibus vim. Doming maiestatis scripserit vim no, qui et epicuri prodesset, te qui nusquam indoctum consetetur. Nam phaedrum dissentias ea. Sit in idque percipitur.</p>
<p>Ne integre definiebas mea, scripta phaedrum laboramus mei ut, solum paulo imperdiet vel ne. Ex eam unum detracto reprehendunt. Sit id labore philosophia, ei vel recusabo constituam neglegentur, melius persequeris te nam. Duo ei quaeque ceteros concludaturque, sit salutandi explicari dignissim at. Illum impedit scaevola et mei, sale quando ne mea, te meis laboramus voluptaria sed. Mel novum perpetua recteque te.</p>
</td>
</tr>
<tr>
<td colspan="4"><h2>Video</h2>
<video id="vid" src="http://glpjt.s3.amazonaws.com/so/av/vid1.mp4" controls width="100%"></video>
</td>
</tr>
<tr>
<td class="lnx" colspan="4">
<h2>Links</h2>
<ul>
<li><a href="http://www.google.com" target="_blank">Phasellus et nonummy consequat, curabitur erat purus ornare. </a></li>
<li><a href="http://www.google.com" target="_blank">Egestas erat in porttitor, in dolor mi libero dictum, nulla non ut sollicitudin mi, eu non justo dictum varius.</a></li>
<li><a href="http://www.google.com" target="_blank">Dignissim pede semper luctus, integer turpis tellus congue diam, maecenas mauris sollicitudin in.</a></li>
<li><a href="http://www.google.com" target="_blank">Nec feugiat neque pharetra, egestas iaculis nunc in pharetra, wisi fermentum massa tincidunt, dui vestibulum pellentesque mollis.</a></li>
<li><a href="http://www.google.com" target="_blank">Suspendisse in duis in, quis adipiscing consectetuer dui ligula, leo semper vel viverra, porttitor vitae nec ut.</a></li>
</ul>
</td>
</tr>
</tbody>
</table>
<script>
function mqr(mql){
var pic = document.querySelector('.pic');
var acm = document.querySelector('.cell');
if (mql.matches){
pic.style.display = "none";
acm.setAttribute('colspan', 4);
}
else {
pic.style.display = "";
acm.setAttribute('colspan', 3);
}
}
var mql = window.matchMedia("screen and (max-width: 960px)");
mqr(mql);
mql.addListener(mqr);
</script>
</body>
</html>关于javascript - 响应偏移，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37370624/