如何用asp.net格式编写javascript stroll.js [英] How to code javascript stroll.js in asp.net form

问题描述

以下是图片的代码：

 <   div     id   =  main    style   =  z-index：1; left：288px; top：588px; position：absolute ;高度：75px;宽度：1023px >  
 <  < span class =code-leadattribute> ul     class   = 翻转 >  
 <   li  >  
 
 <   img     alt   =     src   =  img / q1.png     /  >  
 
 <   / li   >  
 <   li  >  
 <   img     alt   =     src   =  img / q2.png    /  > ;  
 
 <   / li  >  
 <   li  >  
 <   img     alt   =     src   =  img / q3.png    /  & gt;  
 
 <   / li  >  
 <   li  >  
 <   img     alt   =     src   =  img / q4.png    /  >  
 <   / li  >  
 <   / ul  >  
 
 <   / div  < span class =code-keyword>>  

和脚本绑定

 <  脚本    src   =  js / stroll.min.js >  <   / script  >  
  <   script  >  
 stroll.bind（'#main ul' ）; 
 
 <   / script   >  

和stylesheet.css

  / *  基本样式* /  
  *  { margin  ：  0px;   padding  ：  0px; } 
 
  body  {
 背景 ： ＃333;  
} 
 
  / *   Images * /  
  img  {
  float  ：  left;  
  margin-right  ：  20px;  
  border-radius  ：  50％;  
} 
 
  / *  列表样式* /  
  ul  {
  position  ：  relative;  
  width  ：  800px;  
  height  ：  510px;  
  margin  ：  50px auto;  
 < span class =code-attribute> padding  ：  0;  
 < span class =code-attribute> list-style  ：  none;  
  overflow-x  ：  hidden;  
  overflow-y  ：  scroll;  
} 
 
  ul   li  {
 < span class =code-attribute> position  ：  relative;  
 < span class =code-attribute> height  ：  200px;  
 < span class =code-attribute> padding  ：  20px;  
 背景 ：  #eee;  
 颜色 ： ＃252525;  
  z-index  ：  2;  
 溢出 ：  auto;  
} 
 
  ul  li：nth-​​child（odd）{
 背景 ：  #fff;  
} 

仍然没有让stroll.js正常工作。

解决方案

什么是stroll.js以及它想做什么？



根据你提供的一点点来继续你需要改变这个

 <  ！DOCTYPE     html  >  
 <   html  >  
 <   head  >  
 <   meta     charset   =   utf- 8   /  >  
  <   meta    名称  =  description    content   =  description >  
 <   title  < span class =code-keyword>> 滚动测试<   / title  < span class =code-keyword>>  
 <   link     rel   =  stylesheet    type   =  text / css   < span class =code-attribute> media   =  screen    href   =  http://designshack.net/tutorialexamples/ScrollJS/css/style.css  /  >  
 <   link     rel   =  stylesheet    href   =  http://designshack.net/tutorialexamples/ScrollJS/css/stroll.min.css >  
 < span class =code-keyword><   / head  >  
 
 <   body  >  
 <   div     class   = < span class =code-keyword> header >  <   a     href   =  http://designshack.net/articles/css/scrolljs/ > 返回设计小屋<   / a  > ;  <   / div  >  
 
 <   div     id   = 主要 >  
 <   h1  >  Stroll.js Flip <   / h1  >  
 <   ul     class   = 翻转 >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200/city/1 >  
 <   / li  >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200/city/2 >  
 <   / li  >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200 / city / 3 >  
 <   / li  >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200/city/4 >  
 <   / li  >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200/city/5 >  
 <   / li  >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200 / city / 6 >  
 <   / li  >  
 <   li  >  
 <   img     src   =  http://lorempixum.com/200/200/city/7 >  
 <   / li   >  
 <   li  >  
 <   img     src   =  http：/ /lorempixum.com/200/200/city/8\">  
 <   / li  >  
 < ;   / ul  >  
 
 <   / div  >  
 
 <   script     src   =  http://designshack.net/tutorialexamples/ ScrollJS / js / stroll.min.js >  <   / script  >  
 <   script  >  
 stroll.bind（'#main ul'）; 
 <   / script  >  
 
 <   / body  >  
 <   / html  >  

Here is the piece of code for image :

<div id="main" style="z-index: 1; left: 288px; top: 588px; position: absolute; height: 75px; width: 1023px">
<ul class="flip">
<li>

  <img alt="" src="img/q1.png" />

</li>
<li>
   <img alt="" src="img/q2.png" />

</li>
<li>
   <img alt="" src="img/q3.png" />

</li>
<li>
   <img alt="" src="img/q4.png" />
</li>
</ul>

</div>

and script binding by

<script src="js/stroll.min.js"></script>
<script>
    stroll.bind('#main ul');

</script>

and in stylesheet.css

/*Basic Styles*/
* {margin: 0px; padding: 0px;}

body {
  background: #333;
}

/*Images*/
img {
  float: left;
  margin-right: 20px;
  border-radius: 50%;
}

/*List Styles*/
ul {
  position: relative;
  width: 800px;
  height: 510px;
  margin: 50px auto;
  padding: 0;
  list-style: none;
  overflow-x: hidden;
  overflow-y: scroll;
}

ul li {
  position: relative;
  height: 200px;
  padding: 20px;
  background: #eee;
  color: #252525;
  z-index: 2;
  overflow: auto;
}

ul li:nth-child(odd) {
  background: #fff;
}

still am not getting the stroll.js to work properly.

解决方案

What is stroll.js and what is it suppose to do?

Based on what little you''ve provided to go on, more then likely you need to change this

<!DOCTYPE html>
<html>
  <head>
    <meta charset=utf-8 />
    <meta name="description" content="description">
    <title>Scroll Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="http://designshack.net/tutorialexamples/ScrollJS/css/style.css"/>
    <link rel="stylesheet" href="http://designshack.net/tutorialexamples/ScrollJS/css/stroll.min.css">
  </head>
 
<body>
  <div class="header"><a href="http://designshack.net/articles/css/scrolljs/">Go Back to Design Shack</a></div>
 
  <div id="main">
    <h1>Stroll.js Flip</h1>
    <ul class="flip">
      <li>
        <img src="http://lorempixum.com/200/200/city/1">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/2">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/3">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/4">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/5">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/6">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/7">
      </li>
      <li>
        <img src="http://lorempixum.com/200/200/city/8">
      </li>
    </ul>

  </div>
 
  <script src="http://designshack.net/tutorialexamples/ScrollJS/js/stroll.min.js"></script>
  <script>
    stroll.bind( '#main ul' );
  </script>

</body>
</html>

这篇关于如何用asp.net格式编写javascript stroll.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！