luckberry
luckberry

常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全

 

  
  
  
  
    
   
   
   
   
  1. <html xmlns="http://www.w3.org/1999/xhtml"> 
    2. 
   
   
   
   
  2. <head> 
    3. 
   
   
   
   
  3.    <title>常用JS图片滚动（无缝、平滑、上下左右滚动）代码大全 - www.webdm.cn</title> 
    4. 
   
   
   
   
  4. </head> 
    5. 
   
   
   
   
  5. <body> 
    6. 
   
   
   
   
  6. <div id="colee" style="overflow:hidden;height:253px;width:410px;"> 
    7. 
   
   
   
   
  7. <div id="colee1"> 
    8. 
   
   
   
   
  8. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    9. 
   
   
   
   
  9. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    10. 
   
   
   
   
  10. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    11. 
   
   
   
   
  11. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    12. 
   
   
   
   
  12. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    13. 
   
   
   
   
  13. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    14. 
   
   
   
   
  14. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    15. 
   
   
   
   
  15. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    16. 
   
   
   
   
  16. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    17. 
   
   
   
   
  17. </div> 
    18. 
   
   
   
   
  18. <div id="colee2"></div> 
    19. 
   
   
   
   
  19. </div> 
    20. 
   
   
   
   
  20. <script> 
    21. 
   
   
   
   
  21. var speed=30;  
    22. 
   
   
   
   
  22. var colee2=document.getElementById("colee2");  
    23. 
   
   
   
   
  23. var colee1=document.getElementById("colee1");  
    24. 
   
   
   
   
  24. var colee=document.getElementById("colee");  
    25. 
   
   
   
   
  25. colee2.innerHTML=colee1.innerHTML; //克隆colee1为colee2  
    26. 
   
   
   
   
  26. function Marquee1(){  
    27. 
   
   
   
   
  27. //当滚动至colee1与colee2交界时  
    28. 
   
   
   
   
  28. if(colee2.offsetTop-colee.scrollTop<=0){  
    29. 
   
   
   
   
  29.  colee.scrollTop-=colee1.offsetHeight; //colee跳到最顶端  
    30. 
   
   
   
   
  30.  }else{  
    31. 
   
   
   
   
  31.  colee.scrollTop++  
    32. 
   
   
   
   
  32. }  
    33. 
   
   
   
   
  33. }  
    34. 
   
   
   
   
  34. var MyMar1=setInterval(Marquee1,speed)//设置定时器  
    35. 
   
   
   
   
  35. //鼠标移上时清除定时器达到滚动停止的目的  
    36. 
   
   
   
   
  36. colee.onmouseover=function() {clearInterval(MyMar1)}  
    37. 
   
   
   
   
  37. //鼠标移开时重设定时器  
    38. 
   
   
   
   
  38. colee.onmouseout=function(){MyMar1=setInterval(Marquee1,speed)}  
    39. 
   
   
   
   
  39. </script> 
    40. 
   
   
   
   
  40.  
    41. 
   
   
   
   
  41. <!--向上滚动代码结束--> 
    42. 
   
   
   
   
  42.  
    43. 
   
   
   
   
  43. <br> 
    44. 
   
   
   
   
  44.  
    45. 
   
   
   
   
  45. <!--下面是向下滚动代码--> 
    46. 
   
   
   
   
  46.  
    47. 
   
   
   
   
  47. <div id="colee_bottom" style="overflow:hidden;height:253px;width:410px;"> 
    48. 
   
   
   
   
  48. <div id="colee_bottom1"> 
    49. 
   
   
   
   
  49. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    50. 
   
   
   
   
  50. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    51. 
   
   
   
   
  51. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    52. 
   
   
   
   
  52. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    53. 
   
   
   
   
  53. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    54. 
   
   
   
   
  54. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    55. 
   
   
   
   
  55. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    56. 
   
   
   
   
  56. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    57. 
   
   
   
   
  57. <p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p> 
    58. 
   
   
   
   
  58. </div> 
    59. 
   
   
   
   
  59. <div id="colee_bottom2"></div> 
    60. 
   
   
   
   
  60. </div> 
    61. 
   
   
   
   
  61. <script> 
    62. 
   
   
   
   
  62. var speed=30 
    63. 
   
   
   
   
  63. var colee_bottom2=document.getElementById("colee_bottom2");  
    64. 
   
   
   
   
  64. var colee_bottom1=document.getElementById("colee_bottom1");  
    65. 
   
   
   
   
  65. var colee_bottom=document.getElementById("colee_bottom");  
    66. 
   
   
   
   
  66. colee_bottom2.innerHTML=colee_bottom1.innerHTML  
    67. 
   
   
   
   
  67. colee_bottomcolee_bottom.scrollTop=colee_bottom.scrollHeight  
    68. 
   
   
   
   
  68. function Marquee2(){  
    69. 
   
   
   
   
  69. if(colee_bottom1.offsetTop-colee_bottom.scrollTop>=0)  
    70. 
   
   
   
   
  70. colee_bottom.scrollTop+=colee_bottom2.offsetHeight  
    71. 
   
   
   
   
  71. else{  
    72. 
   
   
   
   
  72. colee_bottom.scrollTop--  
    73. 
   
   
   
   
  73. }  
    74. 
   
   
   
   
  74. }  
    75. 
   
   
   
   
  75. var MyMar2=setInterval(Marquee2,speed)  
    76. 
   
   
   
   
  76. colee_bottom.onmouseover=function() {clearInterval(MyMar2)}  
    77. 
   
   
   
   
  77. colee_bottom.onmouseout=function() {MyMar2=setInterval(Marquee2,speed)}  
    78. 
   
   
   
   
  78. </script> 
    79. 
   
   
   
   
  79.  
    80. 
   
   
   
   
  80. <!--向下滚动代码结束--> 
    81. 
   
   
   
   
  81.  
    82. 
   
   
   
   
  82. <br> 
    83. 
   
   
   
   
  83.  
    84. 
   
   
   
   
  84. <!--下面是向左滚动代码--> 
    85. 
   
   
   
   
  85.  
    86. 
   
   
   
   
  86. <div id="colee_left" style="overflow:hidden;width:500px;"> 
    87. 
   
   
   
   
  87. <table cellpadding="0" cellspacing="0" border="0"> 
    88. 
   
   
   
   
  88. <tr><td id="colee_left1" valign="top" align="center"> 
    89. 
   
   
   
   
  89. <table cellpadding="2" cellspacing="0" border="0"> 
    90. 
   
   
   
   
  90. <tr align="center"> 
    91. 
   
   
   
   
  91. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    92. 
   
   
   
   
  92. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    93. 
   
   
   
   
  93. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    94. 
   
   
   
   
  94. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    95. 
   
   
   
   
  95. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    96. 
   
   
   
   
  96. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    97. 
   
   
   
   
  97. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    98. 
   
   
   
   
  98. </tr> 
    99. 
   
   
   
   
  99. </table> 
    100. 
   
   
   
   
  100. </td> 
    101. 
   
   
   
   
  101. <td id="colee_left2" valign="top"></td> 
    102. 
   
   
   
   
  102. </tr> 
    103. 
   
   
   
   
  103. </table> 
    104. 
   
   
   
   
  104. </div> 
    105. 
   
   
   
   
  105. <script> 
    106. 
   
   
   
   
  106. //使用div时，请保证colee_left2与colee_left1是在同一行上.  
    107. 
   
   
   
   
  107. var speed=30//速度数值越大速度越慢  
    108. 
   
   
   
   
  108. var colee_left2=document.getElementById("colee_left2");  
    109. 
   
   
   
   
  109. var colee_left1=document.getElementById("colee_left1");  
    110. 
   
   
   
   
  110. var colee_left=document.getElementById("colee_left");  
    111. 
   
   
   
   
  111. colee_left2.innerHTML=colee_left1.innerHTML  
    112. 
   
   
   
   
  112. function Marquee3(){  
    113. 
   
   
   
   
  113. if(colee_left2.offsetWidth-colee_left.scrollLeft<=0)//offsetWidth 是对象的可见宽度  
    114. 
   
   
   
   
  114. colee_left.scrollLeft-=colee_left1.offsetWidth//scrollWidth 是对象的实际内容的宽，不包边线宽度  
    115. 
   
   
   
   
  115. else{  
    116. 
   
   
   
   
  116. colee_left.scrollLeft++  
    117. 
   
   
   
   
  117. }  
    118. 
   
   
   
   
  118. }  
    119. 
   
   
   
   
  119. var MyMar3=setInterval(Marquee3,speed)  
    120. 
   
   
   
   
  120. colee_left.onmouseover=function() {clearInterval(MyMar3)}  
    121. 
   
   
   
   
  121. colee_left.onmouseout=function() {MyMar3=setInterval(Marquee3,speed)}  
    122. 
   
   
   
   
  122. </script> 
    123. 
   
   
   
   
  123.  
    124. 
   
   
   
   
  124. <!--向左滚动代码结束--> 
    125. 
   
   
   
   
  125.  
    126. 
   
   
   
   
  126. <br> 
    127. 
   
   
   
   
  127.  
    128. 
   
   
   
   
  128. <!--下面是向右滚动代码--> 
    129. 
   
   
   
   
  129.  
    130. 
   
   
   
   
  130. <div id="colee_right" style="overflow:hidden;width:500px;"> 
    131. 
   
   
   
   
  131. <table cellpadding="0" cellspacing="0" border="0"> 
    132. 
   
   
   
   
  132. <tr><td id="colee_right1" valign="top" align="center"> 
    133. 
   
   
   
   
  133. <table cellpadding="2" cellspacing="0" border="0"> 
    134. 
   
   
   
   
  134. <tr align="center"> 
    135. 
   
   
   
   
  135. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    136. 
   
   
   
   
  136. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    137. 
   
   
   
   
  137. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    138. 
   
   
   
   
  138. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    139. 
   
   
   
   
  139. <td><p><img src="http://www.webdm.cn/images/20100415/bg3.jpg"></p></td> 
    140. 
   
   
   
   
  140. </tr> 
    141. 
   
   
   
   
  141. </table> 
    142. 
   
   
   
   
  142. </td> 
    143. 
   
   
   
   
  143. <td id="colee_right2" valign="top"></td> 
    144. 
   
   
   
   
  144. </tr> 
    145. 
   
   
   
   
  145. </table> 
    146. 
   
   
   
   
  146. </div> 
    147. 
   
   
   
   
  147. <script> 
    148. 
   
   
   
   
  148. var speed=30//速度数值越大速度越慢  
    149. 
   
   
   
   
  149. var colee_right2=document.getElementById("colee_right2");  
    150. 
   
   
   
   
  150. var colee_right1=document.getElementById("colee_right1");  
    151. 
   
   
   
   
  151. var colee_right=document.getElementById("colee_right");  
    152. 
   
   
   
   
  152. colee_right2.innerHTML=colee_right1.innerHTML  
    153. 
   
   
   
   
  153. function Marquee4(){  
    154. 
   
   
   
   
  154. if(colee_right.scrollLeft<=0)  
    155. 
   
   
   
   
  155. colee_right.scrollLeft+=colee_right2.offsetWidth  
    156. 
   
   
   
   
  156. else{  
    157. 
   
   
   
   
  157. colee_right.scrollLeft--  
    158. 
   
   
   
   
  158. }  
    159. 
   
   
   
   
  159. }  
    160. 
   
   
   
   
  160. var MyMar4=setInterval(Marquee4,speed)  
    161. 
   
   
   
   
  161. colee_right.onmouseover=function() {clearInterval(MyMar4)}  
    162. 
   
   
   
   
  162. colee_right.onmouseout=function() {MyMar4=setInterval(Marquee4,speed)}  
    163. 
   
   
   
   
  163. </script> 
    164. 
   
   
   
   
  164.  
    165. 
   
   
   
   
  165. <!--向右滚动代码结束--> 
    166. 
   
   
   
   
  166.  
    167. 
   
   
   
   
  167. <br /> 
    168. 
   
   
   
   
  168. <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！  
    169. 
   
   
   
   
  169. </body> 
    170. 
   
   
   
   
  170. </html> 
    171.

本源代码收集了一些常用的网页图片滚动，无缝滚动，效果很平滑，包括上下左右四个方向的滚动，或许你现在用不上这些代码，不过先收藏起来以备后用哦。

你可能感兴趣的:(图片滚动)

  • JS特效第128弹：超流畅漂亮的图片3D旋转滚动JS特效代码 马coder html前端
    超流畅漂亮的图片3D旋转滚动JS特效代码，支持360度图片旋转滚动展示，非常适合产品图片滚动切换展示以及各种产品图片的场景应用，可上下图片倒置切换，滚动非常流畅，先来看看效果：一部分关键的代码如下：超流畅漂亮的图片3D旋转滚动JS特效代码-JS代码网*{margin:0;padding:0;list-style:none;}body{background:black;overflow:hidden
  • 分享76个时间日期JS特效，总有一款适合您 自动化新人 javascript前端
    分享76个时间日期JS特效，总有一款适合您76个时间日期JS特效下载链接：https://pan.baidu.com/s/1s7tPGT_ItK7dNK5_qbZkug?pwd=8888提取码：8888Python采集代码下载链接：采集代码.zip-蓝奏云学习知识费力气，收集整理更不易。知识付费甚欢喜，为咱码农谋福利。简易的中性时钟特效翻页倒计时ui特效逼真的卡西欧手表图形特效原生js图片滚动时钟
  • 分享76个时间日期JS特效，总有一款适合您 记忆的小河 javascript前端
    分享76个时间日期JS特效，总有一款适合您76个时间日期JS特效下载链接：https://pan.baidu.com/s/1s7tPGT_ItK7dNK5_qbZkug?pwd=8888提取码：8888Python采集代码下载链接：采集代码.zip-蓝奏云学习知识费力气，收集整理更不易。知识付费甚欢喜，为咱码农谋福利。简易的中性时钟特效翻页倒计时ui特效逼真的卡西欧手表图形特效原生js图片滚动时钟
  • 鼠标移到到图片，图片向上滑动预览效果 每天都进步一点点 jsJQ
    鼠标移到到图片，图片向上滑动预览效果//图片滚动$(document).ready(function(){functiontemplate($this,img_h,info_h){functionimg1_sin(){$this.find(".img1").find("img").stop(true,true).animate({top:-(img_h-info_h)},(img_h-info_h
  • 大年三十整理的asp.net资料！（不得不收藏） fanhgye JavaScriptASP.Net2.0asp.netsqlserverdatagrid数据库dotnetnukesql
    http://blog.csdn.net/mengyao/archive/2007/02/17/1511356.aspx使用SqlBulkCopy类加载其他源数据到SQL表在数据回发时，维护ASP.NETTree控件的位置vagerent的vs2005网站开发技巧ASP.NET2.0小技巧－－内部控件权限的实现图片滚动代码。css——之三行三列等高布局DatagirdTemplateColumn类
  • 【图片滚动加载】如何解决滚动触发大量事件导致加载性能差 音仔小瓜皮 Web学习笔记JavaScript学习笔记前端
    解决方向：1、节流：特定delay时间内，无法再触发相关功能函数的执行2、防抖：在节流的基础上，避免大量滚动触发事件导致相同的功能函数执行多次，因此设置timeout定时器，在等待执行的定时器有且仅有一个，delay时间后定时器中的内容执行完毕，定时器取消3、两者互相控制：由于有时候网络请求比较快，快于delay时间，那么仅仅使用节流函数，会导致为了满足delay长的等待时间而导致请求挂起；所以，
  • 各种图片滚动/无缝滚动/文字滚动/跑马灯效果/导航/手风琴效果/轮播 季夏梧桐 html前端
    各种图片滚动/无缝滚动/文字滚动/跑马灯效果/导航/手风琴效果各种图片滚动/无缝滚动/文字滚动/跑马灯效果/导航/手风琴效果/轮播-遇见你与你分享
  • 会声会影如何制作图片轮播的视频效果 老衲还俗在即
    当需要进行图片展示时，常常使用图片轮播的形式进行展示，这种效果很常见并且展示效果好，该怎么制作呢？接下来，小编就教大家用视频编辑软件会声会影2020制作图片轮播的视频效果。一、制作单张图片滚动效果图1：视频编辑软件导入素材如图1，首先在视频编辑软件中导入图片素材，将五张猫咪图片添加到覆叠轨1。这里小编选择的是可爱的猫咪图片，大家也可以选择人物的图片作为素材，最后成片效果也很不错。如图2，如果有的图
  • vue-seamless-scroll无缝循环滚动时二轮图片不渲染 可可豆-v vue.jshtml
    关于使用vue-seamless-scroll实现图片无缝循环滚动时出现第二轮图片需要第一轮图片滚动结束后才能渲染出来的问题。1、我遇到的问题很清楚，就是图片应该无缝循环滚动，但是必须得等前一轮图片彻底消失后第二轮图片才会渲染出来，问题就是这样2、看图开始以为时插件的问题，但人家作者都是合适的，所以肯定是自己的问题，经过实验，将elementui框架中对图片的用法改成了img标签，就合适了，写法就
  • html页面双击选中文字,css怎么设置双击不选中文字？ Tengfei Jiang html页面双击选中文字
    在双击左右箭头，快速切换图片滚动时，会经常双击，浏览器就会默认选中你双击的文本，这种感觉有点不太好。该如何取消双击选中文字呢？下面我们来看一下css设置双击不能选中文字的方法。css禁止双击页面选中文本可以使用user-select属性。css代码如下：div{-moz-user-select:none;/*火狐*/-webkit-user-select:none;/*webkit浏览器*/-ms
  • jQuery 实现无限滚动轮播图 纯粹的自己 案例jquery
    1、效果展示 视频演示  2、分析由上面这张图片，开始分析:1、图片怎么滚动？可以使图片滚动容器ul滚动，为其设置margin-left，再加上动画效果2、图片用什么来装呢？可以用li，将其设置为block，进行背景图的设置，并且将其浮动并排。（这里也可以在li中包含img标签）3、外层视觉窗口div用做些什么呢？因为外层视觉窗口是父级，那么为其设置overflow:hidden;这样视觉窗口每次
  • v-html 实现图片滚动懒加载 金州 htmljavascript前端css
    实现一个vue单页面滚动懒加载的插件开发工具用的HBuilderX1.先引入组件不然会报错在标签中加入v-lazy-container="{selector:'img'}"后续修改了一个问题（懒加载失效）加上这段css：没加之前：加了之后实现滚动加载：实现效果图可滚动加载：实现懒加载滚动效果完整代码如下：[v-cloak]{display:none;}img{display:block;/*由于源
  • php实现图片的翻滚,css实现图片滚动 - 我是希希呀的个人空间 - OSCHINA - 中文开源技术交流社区... 冰镐供应商 php实现图片的翻滚
    .box{width:440px;white-space:nowrap;overflow:auto;scroll-snap-type:xmandatory;}.boximg{scroll-snap-align:start;}从以上代码，已经可以：当滑动滚动条时，滑到下一张图片的一丢丢，就会平滑定位到下一张图片了scroll-snap-type作用就是确定是水平滚动定位，还是垂直滚动定位。none默
  • web前端js基础------制作滚动图片 搁浅小泽 前端javascript开发语言
    1，要求通过定时器使其出现滚动的效果可以通过按键控制图片滚动的方向（设置两个按钮绑定点击事件）当鼠标悬停时图片停止，鼠标离开时图片继续向前滚动（可以设置鼠标的悬停和离开事件）参考如下content.onmouseenter=function(){//设置鼠标悬停事件key="stop";}content.onmouseleave=function(){//设置鼠标离开事件key="run";}图片
  • CSS实现横向图片滚动播放 风下森林 前端css
    CSS实现横向图片滚动播放以下示例代码拷走即可放到html中即可查看滚动效果:(仅供学习参考),核心代码查看CSS部分ulli{margin-top:20px;}h4{text-align:left;}hr{width:100%;color:#987cb9;SIZE:1px}header{text-align:center;background-color:#00b4ff;}footer{text
  • vue + swiper 的正确使用姿势（附即插即用css、动态更新数据，使用建议） iamlujingtao #Vuevueswiper
    vue+swiper的正确使用姿势（附即插即用css、动态更新数据，使用建议）一、演示效果二、吐槽三、使用建议四、正式使用1、指定安装swiper3版本2、详细代码（具体请看注释）一、演示效果先看看成果，展示了常用的图片滚动样色，以及动态变更数据后插件响应跟新的效果二、吐槽从来没见过这么难用的插件！在结合vue使用情况下，我就想实现简单的图片滚动+数据变更插件响应更新的效果，然而折腾了一天！三、使
  • 心理测试 登泓听香
    请看图是动的还是静止的请看图线条是直的还是斜的请看有几个人像图请看图第一眼看到的是鸭子还是兔子请看图是静止的还是动态的第一眼看图像是女孩还是一个女巫请看图片里是什么请看图片里的白色点有没有黑色点闪动走迷宫从哪个出口出来看图片滚动的速度快慢
  • uni-app快速入门 Crassus
    常用API注意点如果是字符串的图片路劲使用'/'作为相对路劲image.png组件内部图片使用’@/‘image.png发送图片滚动image.png组件之间的通信父组件传递给子组件uni.on('方法名',()=>{//实现})image.pngVuex状态管理，集中式储存管理应用所有的组件状态，并以相应规则保证规则:State:存储状态数据Getter：从状态数据派生数据，相当于state的计
  • uniapp：文本/图片横向滚动播放（非swiper） Mosowe uniappuniapp文字滚动uniapp插件uniapp图片无缝滚动图片无缝滚动
    插件地址平台支持：APPH5微信小程序支付宝小程序百度小程序字节跳动小程序QQ小程序√√√未测未测未测未测插件功能支持文本/图片横向播放，点击选中，扫码体验注意：css样式需要开发者布局props:名称类型默认值说明版本listArray[]需要滚动的列表1.0.0typeStringtext可选：image，纯图片滚动1.0.0textKeyString文字key值1.0.0imageKeySt
  • uni-app 之 图片匀速滑动轮播，animation动画 jun_tong uni-appuni-apphtml
    uni-app之图片匀速滑动轮播，animation动画加个标题，嘎嘎嘎exportdefault{data(){return{}},}/***图片滚动*/.container{width:100%;height:260px;/*图片高度*/overflow:hidden;}.slider{width:200%;/*图片总宽度的两倍*/height:100%;display:flex;animat
  • PMP 第六章 项目进度管理 Leeson1989
    时间的特征：时间不等人、投入有上限、对谁都公平看板工具WIP（workinprocess）在制品图片看板系统特点：拉动式看板的六大核心实践1，可视化工作流程2，限制在制品（WIP）3，管理和度量流动4，显示化流程规则5，建立反馈环路6，协作式改进图片洋葱圈规划图片时间管理的过程图片具有未完项的迭代进度计划：未完成活动或持续性活动敏捷开发图片滚动式开发图片紧前关系绘图法（PDM）紧前关系绘图法（PD
  • Vue 实现图片监听，鼠标滚轮实现图片缩放功能，可拖拽 Wooofe。 vuevue.jsjavascript前端
    Vue实现图片监听，鼠标滚轮实现图片缩放功能，可拖拽其实想要实现功能很简单，就是在一张图片上监听鼠标滑轮滚动的事件，然后根据上滚还是下滚实现图片的缩放。其实就是这种效果：HTML代码：-->@mousewheel.prevent来监听鼠标滑轮滚动。没了，当鼠标在这个图片滚动滑轮的时候就会被这个时间监听到，然后就可以写自己的逻辑代码了。JS代码：//滚轮滑动gunlun(e){//letdirect
  • 【微信小程序创作之路】- 小程序常用页面样式 java小白冲刺者 前端vue微信小程序notepad++小程序
    【微信小程序创作之路】-小程序常用页面样式第四章微信小程序用页面样式文章目录【微信小程序创作之路】-小程序常用页面样式前言一、总体样式--全局样式and局部样式1.全局样式2.局部样式二、Flex布局rpx单位三、样式导入四、常用按钮样式五、图片插入六、图片轮播七、图片滚动八、条件渲染1.2.总结前言本章节主要讲解，小程序中常用样式，涉及到WXML和WXSS文件。例如：页面布局、整体样式、按钮、图
  • JS效果 - 无缝滚动/滚动加停顿 uiswengineer divtablefunctionscrollhtmlborder
    JS效果-无缝滚动/滚动加停顿js效果中的滚动效果应该也是我们在浏览页面中比较常见的一个效果，其中不乏有文字滚动、图片滚动等。在这里我将以循序渐进的方式向大家讲解其滚动方法和原理。首先请看效果图：‍其实做此效果是不需要添加滚动轴的，但是这样却更方便于我们了解方法原理。在叙述方法之前先介绍下此效果所用的一些属性。1、innerHTML：inner(里面，元素)，innerHTML是用来改变对象DH内
  • Uniapp中实战实现左右点击滚动功能 一淘模板 uni-appjavascript前端
    一淘模板56admin.com这里的uniapp是一款基于Vue.js的跨平台应用框架，可以同时开发iOS、Android、H5、小程序等多个平台的应用程序。其中，滚动操作在Uniapp中是一项很常见的操作，今天我们来讨论在Uniapp中如何实现左右点击滚动。一、背景介绍在Uniapp的实际应用中，我们常常会遇到需要在页面中实现左右滚动操作的需求。例如，移动端的导航菜单或者横向的图片滚动，都需要使
  • 大家都看短视频了，写文字还有意义吗？ 彭小六
    你好啊，我是小六。最近我身边很多自媒体的朋友都搅入了一股短视频的骚动中：◆还没开始的人，在纠结要不要做短视频，怎么做；◆已经在做的人，发现陷入了流量困境，苦苦在支撑。甚至一些从来不露脸的朋友，也以图片滚动+字幕的方式在做短视频。我这种坚持写文字的，也有了一个称号叫：“古典自媒体”。意思是倔强的只会写文字，不怎么拍短视频的自媒体。今天我们就聊聊这个话题：大家都在看短视频了，写文字还有意义吗？1我们一
  • vue项目中实现懒加载的方法 十二的故事
    当我们开始做一个项目时，不乏有些页面图片比较多，为了加速页面的加载速度，减轻浏览器的负担，所有很多时候我们需要将页面内未出现在可视区域内的图片先不加载，等到该图片滚动到可视区域后再去加载。这样子对于页面加载性能会有很大的提升，也提高了用户体验实现方法：使用vue中的vue-lazyload插件步骤：1.安装插件npminstallvue-lazy-load-S2.在项目的入口文件main.js中引
  • CSS3关于背景图片应用的总结 读心读书
    背景的基本属性background-color(背景颜色)background-image(背景图片)background-repeat(背景图片展示的方式)background-attachment(背景图片滚动还是固定)background-position(背景图片定位)简写为：background:background-colorbackground-imagebackground-rep
  • SuperSlide轮播插件滚动高度或宽度不对的问题解决 Deshun
    声明：本文由w3h5原创，转载请注明出处：《SuperSlide轮播插件滚动高度或宽度不对的问题解决》SuperSlide是一款比较实用的轮播插件，网站上常用的“焦点图/幻灯片”“Tab标签切换”“图片滚动”“无缝滚动”等都能实现，兼容包括IE6的绝大部分浏览器。但是作者写的教程复杂难懂，有时需要摸索好久才能实现效果。问题描述：而且会存在一些问题，没有考虑到。今天就遇到一个问题，轮播的滚动距离出现
  • 心理健康测试 登泓听香
    请看图是动的还是静止的请看图线条是直的还是斜的请看有几个人像图请看图第一眼看到的是鸭子还是兔子请看图是静止的还是动态的第一眼看图像是女孩还是一个女巫请看图片里是什么请看图片里的白色点有没有黑色点闪动走迷宫从哪个出口出来看图片滚动的速度快慢
  • html 周华华 html
    js 1，数组的排列 var arr=[1,4,234,43,52,]; for(var x=0;x<arr.length;x++){    for(var y=x-1;y<arr.length;y++){      if(arr[x]<arr[y]){     &
  • 【Struts2 四】Struts2拦截器 bit1129 struts2拦截器
    Struts2框架是基于拦截器实现的，可以对某个Action进行拦截，然后某些逻辑处理，拦截器相当于AOP里面的环绕通知，即在Action方法的执行之前和之后根据需要添加相应的逻辑。事实上，即使struts.xml没有任何关于拦截器的配置，Struts2也会为我们添加一组默认的拦截器，最常见的是，请求参数自动绑定到Action对应的字段上。   Struts2中自定义拦截器的步骤是：
  • make:cc 命令未找到解决方法 daizj linux命令未知make cc
    安装rz sz程序时，报下面错误：   [root@slave2 src]# make posix cc   -O -DPOSIX -DMD=2 rz.c -o rz make: cc：命令未找到 make: *** [posix] 错误 127   系统：centos 6.6 环境：虚拟机   错误原因：系统未安装gcc，这个是由于在安
  • Oracle之Job应用 周凡杨 oracle job
    最近写服务，服务上线后，需要写一个定时执行的SQL脚本，清理并更新数据库表里的数据，应用到了Oracle 的 Job的相关知识。在此总结一下。   一：查看相关job信息    1、相关视图  dba_jobs  all_jobs  user_jobs  dba_jobs_running 包含正在运行
  • 多线程机制 朱辉辉33 多线程
    转至http://blog.csdn.net/lj70024/archive/2010/04/06/5455790.aspx 程序、进程和线程： 程序是一段静态的代码，它是应用程序执行的蓝本。进程是程序的一次动态执行过程，它对应了从代码加载、执行至执行完毕的一个完整过程，这个过程也是进程本身从产生、发展至消亡的过程。线程是比进程更小的单位，一个进程执行过程中可以产生多个线程，每个线程有自身的
  • web报表工具FineReport使用中遇到的常见报错及解决办法（一） 老A不折腾 web报表finereportjava报表报表工具
    FineReport使用中遇到的常见报错及解决办法（一） 这里写点抛砖引玉，希望大家能把自己整理的问题及解决方法晾出来，Mark一下，利人利己。   出现问题先搜一下文档上有没有，再看看度娘有没有，再看看论坛有没有。有报错要看日志。下面简单罗列下常见的问题，大多文档上都有提到的。   1、address pool is full： 含义：地址池满，连接数超过并发数上
  • mysql rpm安装后没有my.cnf 林鹤霄 没有my.cnf
    Linux下用rpm包安装的MySQL是不会安装/etc/my.cnf文件的， 至于为什么没有这个文件而MySQL却也能正常启动和作用，在这儿有两个说法， 第一种说法，my.cnf只是MySQL启动时的一个参数文件，可以没有它，这时MySQL会用内置的默认参数启动， 第二种说法，MySQL在启动时自动使用/usr/share/mysql目录下的my-medium.cnf文件，这种说法仅限于r
  • Kindle Fire HDX root并安装谷歌服务框架之后仍无法登陆谷歌账号的问题 aigo root
    原文：http://kindlefireforkid.com/how-to-setup-a-google-account-on-amazon-fire-tablet/   Step 4: Run ADB command from your PC   On the PC, you need install Amazon Fire ADB driver and instal
  • javascript 中var提升的典型实例 alxw4616 JavaScript
    // 刚刚在书上看到的一个小问题,很有意思.大家一起思考下吧 myname = 'global'; var fn = function () { console.log(myname); // undefined var myname = 'local'; console.log(myname); // local }; fn() // 上述代码实际上等同于以下代码 m
  • 定时器和获取时间的使用 百合不是茶 时间的转换定时器
    定时器:定时创建任务在游戏设计的时候用的比较多   Timer();定时器 TImerTask();Timer的子类  由 Timer 安排为一次执行或重复执行的任务。       定时器类Timer在java.util包中。使用时，先实例化，然后使用实例的schedule(TimerTask task, long delay)方法，设定
  • JDK1.5 Queue bijian1013 javathreadjava多线程Queue
    JDK1.5 Queue LinkedList： LinkedList不是同步的。如果多个线程同时访问列表，而其中至少一个线程从结构上修改了该列表，则它必须 保持外部同步。（结构修改指添加或删除一个或多个元素的任何操作；仅设置元素的值不是结构修改。）这一般通过对自然封装该列表的对象进行同步操作来完成。如果不存在这样的对象，则应该使用 Collections.synchronizedList 方
  • http认证原理和https bijian1013 httphttps
    一.基础介绍         在URL前加https://前缀表明是用SSL加密的。 你的电脑与服务器之间收发的信息传输将更加安全。         Web服务器启用SSL需要获得一个服务器证书并将该证书与要使用SSL的服务器绑定。 http和https使用的是完全不同的连接方式，用的端口也不一样,前者是80，后
  • 【Java范型五】范型继承 bit1129 java
    定义如下一个抽象的范型类，其中定义了两个范型参数，T1，T2   package com.tom.lang.generics; public abstract class SuperGenerics<T1, T2> { private T1 t1; private T2 t2; public abstract void doIt(T
  • 【Nginx六】nginx.conf常用指令(Directive) bit1129 Directive
    1. worker_processes    8; 表示Nginx将启动8个工作者进程，通过ps -ef|grep nginx,会发现有8个Nginx Worker Process在运行   nobody 53879 118449 0 Apr22 ? 00:26:15 nginx: worker process
  • lua 遍历Header头部 ronin47 lua header 遍历　
    local headers = ngx.req.get_headers()   ngx.say("headers begin", "<br/>")   ngx.say("Host : ", he
  • java-32.通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小(两数组的差最小)。 bylijinnan java
    import java.util.Arrays; public class MinSumASumB { /** * Q32.有两个序列a,b，大小都为n,序列元素的值任意整数，无序. * * 要求：通过交换a,b中的元素，使[序列a元素的和]与[序列b元素的和]之间的差最小。 * 例如: * int[] a = {100,99,98,1,2,3
  • redis 开窍的石头 redis
    在redis的redis.conf配置文件中找到# requirepass foobared 把它替换成requirepass 12356789 后边的12356789就是你的密码 打开redis客户端输入config get requirepass 返回 redis 127.0.0.1:6379> config get requirepass 1) "require
  • [JAVA图像与图形]现有的GPU架构支持JAVA语言吗？ comsci java语言
          无论是opengl还是cuda，都是建立在C语言体系架构基础上的，在未来，图像图形处理业务快速发展，相关领域市场不断扩大的情况下，我们JAVA语言系统怎么从这么庞大，且还在不断扩大的市场上分到一块蛋糕，是值得每个JAVAER认真思考和行动的事情       
  • 安装ubuntu14.04登录后花屏了怎么办 cuiyadll ubuntu
    这个情况，一般属于显卡驱动问题。 可以先尝试安装显卡的官方闭源驱动。 按键盘三个键：CTRL + ALT  +  F1 进入终端，输入用户名和密码登录终端： 安装amd的显卡驱动 sudo  apt-get  install  fglrx 安装nvidia显卡驱动 sudo  ap
  • SSL 与 数字证书 的基本概念和工作原理 darrenzhu 加密ssl证书密钥签名
    SSL 与 数字证书 的基本概念和工作原理 http://www.linuxde.net/2012/03/8301.html SSL握手协议的目的是或最终结果是让客户端和服务器拥有一个共同的密钥，握手协议本身是基于非对称加密机制的，之后就使用共同的密钥基于对称加密机制进行信息交换。 http://www.ibm.com/developerworks/cn/webspher
  • Ubuntu设置ip的步骤 dcj3sjt126com ubuntu
    在单位的一台机器完全装了Ubuntu Server，但回家只能在XP上VM一个，装的时候网卡是DHCP的，用ifconfig查了一下ip是192.168.92.128,可以ping通。 转载不是错： Ubuntu命令行修改网络配置方法 /etc/network/interfaces打开后里面可设置DHCP或手动设置静态ip。前面auto eth0，让网卡开机自动挂载. 1. 以D
  • php包管理工具推荐 dcj3sjt126com PHPComposer
    http://www.phpcomposer.com/   Composer是 PHP 用来管理依赖（dependency）关系的工具。你可以在自己的项目中声明所依赖的外部工具库（libraries），Composer 会帮你安装这些依赖的库文件。 中文文档  入门指南  下载  安装包列表 Composer 中国镜像
  • Gson使用四（TypeAdapter） eksliang jsongsonGson自定义转换器gsonTypeAdapter
    转载请出自出处：http://eksliang.iteye.com/blog/2175595 一.概述        Gson的TypeAapter可以理解成自定义序列化和返序列化 二、应用场景举例        例如我们通常去注册时（那些外国网站），会让我们输入firstName，lastName,但是转到我们都
  • JQM控件之Navbar和Tabs gundumw100 htmlxmlcss
    在JQM中使用导航栏Navbar是简单的。 只需要将data-role="navbar"赋给div即可： <div data-role="navbar"> <ul> <li><a href="#" class="ui-btn-active&qu
  • 利用归并排序算法对大文件进行排序 iwindyforest java归并排序大文件分治法Merge sort
      归并排序算法介绍，请参照Wikipeida zh.wikipedia.org/wiki/%E5%BD%92%E5%B9%B6%E6%8E%92%E5%BA%8F 基本思想： 大文件分割成行数相等的两个子文件，递归（归并排序）两个子文件，直到递归到分割成的子文件低于限制行数 低于限制行数的子文件直接排序 两个排序好的子文件归并到父文件 直到最后所有排序好的父文件归并到输入
  • iOS UIWebView URL拦截 啸笑天 UIWebView
    本文译者：candeladiao，原文：URL filtering for UIWebView on the iPhone说明：译者在做app开发时，因为页面的javascript文件比较大导致加载速度很慢，所以想把javascript文件打包在app里，当UIWebView需要加载该脚本时就从app本地读取，但UIWebView并不支持加载本地资源。最后从下文中找到了解决方法，第一次翻译，难免有
  • 索引的碎片整理SQL语句 macroli sql
    SET NOCOUNT ON DECLARE @tablename VARCHAR (128) DECLARE @execstr VARCHAR (255) DECLARE @objectid INT DECLARE @indexid INT DECLARE @frag DECIMAL DECLARE @maxfrag DECIMAL --设置最大允许的碎片数量,超过则对索引进行碎片
  • Angularjs同步操作http请求with $promise qiaolevip 每天进步一点点学习永无止境AngularJS纵观千象
    // Define a factory app.factory('profilePromise', ['$q', 'AccountService', function($q, AccountService) { var deferred = $q.defer(); AccountService.getProfile().then(function(res) {
  • hibernate联合查询问题 sxj19881213 sqlHibernateHQL联合查询
    最近在用hibernate做项目，遇到了联合查询的问题，以及联合查询中的N+1问题。 针对无外键关联的联合查询，我做了HQL和SQL的实验，希望能帮助到大家。（我使用的版本是hibernate3.3.2）   1 几个常识：  （1）hql中的几种join查询，只有在外键关联、并且作了相应配置时才能使用。  （2）hql的默认查询策略，在进行联合查询时，会产
  • struts2.xml wuai struts
    <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN" "http://struts.apache
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他