Question

我希望这是有道理的。我想要完成的是，如果您在PC和移动设备上转到http://a1customcomputers.com/Web%20Development/A1CC/Main.html，您会注意到它在“输入”的位置，我希望用户能够点击它并且需要他们到适当的地方。动画有3种不同的媒体类型..取决于用户浏览器（mp4，ogv，mebm），或者如果检测到移动只是使用海报.. jpg。我需要的是当用户点击其中一个“视频”时，他们将被路由到“桌面”网站，当他们点击jpg时，他们需要被路由到“移动”网站。因此，视频需要可以点击桌面网址，并且海报需要可以点击移动网址。 vids和pics运行jquery.videobg.js并被视为背景视频，据我所知，这是我可以完成此任务的唯一方式..我花了很长时间才使它工作。所以我不想改变它。我正在使用Dreamweaver。通过流体布局，它根据像素先决条件加载适当的“东西”。如果整个页面都是可点击的并不重要..实际上我更喜欢这样。那么有没有办法通过style.css，你可以使整个页面成为可点击的URL（取决于屏幕大小..移动，平板电脑，桌面..移动和平板电脑布局需要转到移动网站和桌面到桌面）？我可以在“script.js”中的视频/图片名称后面添加一些超链接标记吗？如果需要，我可以发送你的网站.zip ..仍然相当小..不到约5 MB。我很绝望..一直在努力，包括动画（自学自己的Adobe After Effects）..大约4个月了。我对此（和其他事情）进行了无数的研究，并尝试过很多东西。

不同的部分如下：

源代码：

<!doctype html>
<!--[if lt IE 7]> <html class="ie6 oldie"> <![endif]-->
<!--[if IE 7]>    <html class="ie7 oldie"> <![endif]-->
<!--[if IE 8]>    <html class="ie8 oldie"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Untitled Document</title>
<link href="boilerplate.css" rel="stylesheet"/>
<link href="assets/style.css" rel="stylesheet"/>

    <script src="respond.min.js"></script>
    <script type="text/javascript" src="assets/jquery-1.5.1.js"></script>
    <script type="text/javascript" src="jquery.videoBG.js"></script>
    <script type="text/javascript" src="assets/script.js"></script>

</head>
<body>
<div class="gridContainer clearfix">
<div id="div1" class="fluid">
  <div align="center"><img src="A1_Banner.jpg" /></div>
</div>
<p>&nbsp;</p>
<p>&nbsp;</p>
<div id="div2" class="tab"></div>
</div>

</body>
</html>

的style.css：

@charset "utf-8";
/* Simple fluid media
   Note: Fluid media requires that you remove the media's height and width attributes from the HTML
   http://www.alistapart.com/articles/fluid-images/ 
*/
img, object, embed {
    max-width: 100%;
}

video {
  width: 400px;
  height: 400px;
}

/* IE 6 does not support max-width so default to width 100% */
.ie6 img {
    width:100%;
}

/*
    Dreamweaver Fluid Grid Properties
    ----------------------------------
    dw-num-cols-mobile:     5;
    dw-num-cols-tablet:     8;
    dw-num-cols-desktop:    12;
    dw-gutter-percentage:   15;

    Inspiration from "Responsive Web Design" by Ethan Marcotte 
    http://www.alistapart.com/articles/responsive-web-design

    and Golden Grid System by Joni Korpi
    http://goldengridsystem.com/
*/

.fluid {
    clear: none;
    width: 400px;
    float: none;
    display: block;
    padding-left: auto;
    padding-right: auto;
}

.fluidList {
    list-style:none;
    list-style-image:none;
    margin:0;
    padding:0;        
}

/* Mobile Layout: 480px and below. */

.gridContainer {
    width: 100%;
    clear: none;
    float: none;
    height: 100%;
    margin-top: 20px;
}
#div1 {
    width: 100%;
    margin-bottom: 3%;
}

#div2 {
    width: 400px;
    height: 400px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.zeroMargin_mobile {
margin-left: 0;
}
.hide_mobile {
display: none;
}

/* Tablet Layout: 481px to 768px. Inherits styles from: Mobile Layout. */

@media only screen and (min-width: 481px) {

.gridContainer {
    width: 100%;
    clear: none;
    float: none;
    margin-top: 20px;
    height: 100%;
}
#div1 {
    width: 100%;
    margin-bottom: 2%;
}

#div2 {
    width: 400px;
    height: 400px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.hide_tablet {
display: none;
}
.zeroMargin_tablet {
margin-left: 0;
}
}

/* Desktop Layout: 769px to a max of 1232px.  Inherits styles from: Mobile Layout and Tablet Layout. */

@media only screen and (min-width: 769px) {

.gridContainer {
    width: 100%;
    margin-top: 20px;
    clear: none;
    float: none;
    height: 100%;
}

#div1 {
    width: 100%;
    margin-bottom: 9%;
}

#div2 {
    width: 400px;
    height: 400px;
    position: relative;
    margin-left: auto;
    margin-right: auto;
}

.zeroMargin_desktop {
    margin-left: 0;
}

.hide_desktop {

display: none;

}
}

的script.js：

$(document).ready(function() {


    $('#div2').videoBG({
        ogv:'assets/3-4-Final.ogv',
        mp4:'assets/3-4-Final.mp4',
        webm:'assets/3-4-Final.webm',
        poster:'assets/Enter1.jpg',
        zIndex:10

    });


})

其他部分是：boilerplate.css，respond.min.js，jquery-1.5.1.js，jquery.videobg.js

谢谢

使用流体布局时，需要使用不同的“输入”媒体指向不同的URL吗？

0 个答案: