响应偏移量

时间：2016-05-22 04:41:05

标签： javascript responsive-design

我在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();
});

1 个答案:

答案 0 :(得分：1)

当屏幕宽度变为960px或更低时，此代码段使用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>

相关问题
最新问题