mgtv - 素材

当前位置:Gxlcms > jqueryhtml5 > vivo官网左右全屏动画焦点图

vivo官网左右全屏动画焦点图

时间:2021-07-01 10:21:17 帮助过:0人阅读

vivo官网左右全屏动画焦点图 vivo官网左右全屏动画焦点图是一款基于jquery+html5实现的步步高vivo官网图片切换动画效果代码。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>vivo官网左右全屏动画焦点图 - mgtv素材</title>

<script type="text/javascript" src="js/jquery.min.js"></script>
<script src="js/vivo-common.js"></script>
<script src="js/vivo-high.js"></script>

<link href="css/highlight.css" rel="stylesheet" type="text/css" />
<!--[if lte IE 8]>
	<link href="css/iefixed.css" rel="stylesheet" type="text/css" />
<![endif]-->

</head>
<body class="home">
<div id="vivo-wrap">
  <div id="vivo-contain">
    <div class="focus-gallery">
      <ul class="cl">
      
        <li class="high-imageSearch3"> 
        <a href="http://www.17sucai.com/">
          <div class="high-box">
            <div class="figure">
              <div class="screen"><img src="images/h-imagesearch3-sc1.jpg" width="1310" height="299" /></div>
              <div class="mobile"><img src="images/h-imagesearch3-mob.png" width="700" height="380" /></div>
            </div>
            <div class="high-title">
              <h2><img src="images/h-imagesearch3-logo.png" width="830" height="390" /></h2>
            </div>
          </div>
          </a> 
         </li>
         
        <li class="high-x5">
        <a href="http://www.17sucai.com/">
          <div class="high-box">
            <div class="figure"> 
            <b class="mob1"><img src="images/h-x5-f1.png" alt="X5" width="700" height="680" /></b> 
            <b class="mob2"><img src="images/h-x5-f2.png" alt="X5" width="490" height="480" /></b>
            <b class="mob3"><img src="images/h-x5-f3.png" alt="X5" width="510" height="415" /></b> 
            <b class="mob4"><img src="images/h-x5-f4.png" alt="X5" width="710" height="680" /></b> 
          </div>
            <div class="high-title">
              <h2><img src="images/h-x5-t1.png" width="366" height="107" /></h2>
              <h3><img src="images/h-x5-t2.png" width="366" height="69" /></h3>
              <h4><img src="images/h-x5-t3.png" width="366" height="127" /></h4>
            </div>
          </div>
          </a> 
        </li>
        
        <li class="high-x3v"> 
        <a href="http://www.17sucai.com/">
          <div class="high-box">
            <div class="figure"><img src="images/h-x3v-figure.png" width="532" height="566" /></div>
            <div class="high-title">
              <h2><img src="images/h-x3v-title1.png" width="459" height="95" /></h2>
              <h3><img src="images/h-x3v-title2.png" width="459" height="95" /></h3>
            </div>
          </div>
          </a>
        </li>
        
        <li class="high-enjoyevent"> 
        <a href="http://www.17sucai.com/">
        <div class="high-box">
            <div class="e-circle"> 
            	<em class="e1"></em>
                <em class="e2"></em>
                <em class="e3"></em> 
            </div>
            <div class="high-title"> 
            	<em class="t1"><img src="images/h-enjoy-t1.png" width="338" height="148" /></em> 
                <em class="t2"><img src="images/h-enjoy-t3.png" width="464" height="120" /></em>
                <h2><img src="images/h-enjoy-t4.png" width="756" height="447" /></h2>
                <em class="t3"><img src="images/h-enjoy-t2.png" width="74" height="58" /></em> 
            </div>
            <div class="figure"> 
            	<em class="m1"><img src="images/h-enjoy-c4.png" width="120" height="160" /></em>
                <div class="m2"> 
               		<em class="m2-1"><img src="images/h-enjoy-c2.png" width="180" height="110" /></em>
               		<em class="m2-2"><img src="images/h-enjoy-c1.png" width="240" height="430" /></em> 
                </div>
              	<em class="m3"><img src="images/h-enjoy-c3.png" width="486" height="482" /></em> 
            </div>
          </div>
          </a> 
        </li>
        
        <li class="high-xshotnew"> 
        <a href="http://www.17sucai.com/">
          <div class="high-box"> 
          		<em class="mask"><img src="images/h-xshot-mask.png" width="560" height="426" /></em>
           		<div class="high-title">
              		<h2><img src="images/h-xshot-t1.png" width="446" height="146" /></h2>
              		<h3><img src="images/h-xshot-t2.png" width="454" height="95" /></h3>
            	</div>
          </div>
          </a> 
        </li>
        
      </ul>
      <div class="switch-high"></div>
    </div>
  </div>
</div>

</body>