jQuery响应式图文列表预览特效代码下载


jQuery响应式图文列表预览特效代码下载
jQuery响应式图文列表预览特效代码下载以及响应式、图文列表预览等js/jquery网页特效代码下载。

1. 引入CSS

<link type="text/css" href="static/css/common.css" rel="stylesheet" />
<link type="text/css" href="static/css/style.css" rel="stylesheet" />

2. 引入JS

<script src="static/js/jquery-1.11.1.min.js"></script>

3. HTML代码

  <div class="case">
   <div class="box">
    <div class="case-list">
     <ul>
      <li><a href="/cases/313.html" target="_blank">
        <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/1.jpg" alt="点击查看"  />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           康士柏英文
          </div>
          <div class="t2">
           响应式网站,英文网站,研发设备
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a>
	  </li>
      <li><a href="/cases/372.html" target="_blank">
        <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/2.jpg" alt="点击查看" />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           添佰丽地板
          </div>
          <div class="t2">
           企业网站
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a></li>
      <li><a href="/cases/480.html" target="_blank">
        <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/3.jpg" alt="点击查看" />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           深圳华大智造科技有...
          </div>
          <div class="t2">
           医疗健康
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a></li>
      <li><a href="/cases/327.html" target="_blank">
          <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/4.jpg" alt="点击查看" />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           泰晤士教育
          </div>
          <div class="t2">
           教育,留学,响应式网站 
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a></li>
         <li><a href="/cases/313.html" target="_blank">
        <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/4.jpg" alt="点击查看"  />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           康士柏英文
          </div>
          <div class="t2">
           响应式网站,英文网站,研发设备
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a>
	  </li>
      <li><a href="/cases/372.html" target="_blank">
        <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/3.jpg" alt="点击查看" />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           添佰丽地板
          </div>
          <div class="t2">
           企业网站
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a></li>
      <li><a href="/cases/480.html" target="_blank">
        <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/2.jpg" alt="点击查看" />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           深圳华大智造科技有...
          </div>
          <div class="t2">
           医疗健康
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a></li>
      <li><a href="/cases/327.html" target="_blank">
          <div class="img" onmouseenter="tplBoxMoveUp(this)" onmouseleave="tplBoxMoveDown(this)">
         <img src="static/picture/1.jpg" alt="点击查看" />
        </div>
        <div class="tbox">
         <div class="title">
          <div class="t1">
           泰晤士教育
          </div>
          <div class="t2">
           教育,留学,响应式网站 
          </div>
          <div class="icon">
           <span class="icon1"></span>
          </div>
         </div>
        </div></a></li>
     </ul>
    </div>
   </div>
  </div>

相关推荐

发表评论

相关文章