图片不断向上滚动

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script src="http://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
       <style type="text/css">
           *{margin: 0;padding: 0;}
           #demo img{vertical-align: top;}
           #nav img{float: left;}
       </style>
       <script type="text/javascript">
           $(function(){
               //向上滚动
               $("#demo2").html($("#demo1").html());
               var a = 0;
               function long_up(){
                   if(($("#demo1").height() - $("#demo").scrollTop()) <= 0){
                       a = 0;
                       $("#demo").scrollTop(0);
                   }else{
                       $("#demo").scrollTop(a++);
                   }
               }
               var vv = setInterval(long_up,10);
               $("#demo").hover(function(){
                   clearInterval(vv);
               },function(){
                   vv = setInterval(long_up,10);
               });

               //向左滚动
               $("#nav1").width($("#nav1").children("img").width()*$("#nav1").children("img").length*2);
               $("#nav1").html($("#nav1").html()+$("#nav1").html());
               var b = 0;
               function long_left(){
                   if($("#nav1").width()/2-$("#nav").scrollLeft() <= 0){
                       b = 0;
                       $(‘#nav‘).scrollLeft(0);
                   }else{
                       $("#nav").scrollLeft(b++);
                   }
               }
               var ww = setInterval(long_left,10);
               $("#nav").hover(function(){
                   clearInterval(ww);
               },function(){
                   ww = setInterval(long_left,10);
               });
           })
       </script>
   </head>
   <body style="">
       <div id="demo" style="overflow:hidden;height:139px;width:232px; background:#f4f4f4;color:#ffffff; margin: 0 auto; margin-top: 10px;">
           <div id="demo1">
               <img src="1.jpg"/>
               <img src="2.jpg"/>
               <img src="3.jpg"/>
               <img src="4.jpg"/>
               <img src="5.jpg"/>
           </div>
           <div id="demo2"></div>
       </div>
       <div id="nav" style="width:300px;overflow: hidden; height:139px; margin: 0 auto; margin-top: 50px;">
           <div id="nav1" style="float: left;">
               <img src="1.jpg"/><img src="2.jpg"/><img src="3.jpg"/><img src="4.jpg"/><img src="5.jpg"/>
           </div>
       </div>

   <script>
// var speed=50
// demo2.innerHTML=demo1.innerHTML
// function Marquee(){
// if(demo2.offsetTop-demo.scrollTop<=0)
// demo.scrollTop-=demo1.offsetHeight
// else{
// demo.scrollTop++
// }
// }
// var MyMar=setInterval(Marquee,speed)
// demo.onmouseover=function() {clearInterval(MyMar)}
// demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
   </script>
   </body>
</html>

时间： 2024-12-23 20:35:13

图片不断向上滚动的相关文章

Android 仿美团网,大众点评购买框悬浮效果，仿美团详情页，可下拉放大图片，向上滚动图片，松手有动画

直接上代码注释都写到代码里面了: 自定义的ScrollView package mm.shandong.com.testmtxqcomplex.myui; import android.content.Context; import android.util.AttributeSet; import android.widget.ScrollView; /** * Created by buyadong on 2016/7/29. */ public class MyScrollView e

jQuery插件--图片文字向上向左循环滚动

需要引用jquery 调用非常简单: 一. 向上滚动 $(".scroll_two").jScroll({vertical: true}); <div class="box scroll_two"> <ul> <li><a href="#">声明</a>| <a href="#">农夫山泉关于公益捐赠的严正声明</a></li> &

练习题：间歇性向上滚动

1 <!DOCTYPE html > 2 <html > 3 <head> 4 <meta charset=utf-8" /> 5 <title>新闻间歇性向上滚动</title> 6 <style> 7 body { 8 font-size: 12px; 9 line-height: 24px; 10 text-algin: center; /* 页面内容居中 */ 11 } 12 * { 13 margin:

向上滚动公告栏

向上滚动公告栏项目中需要用到类似公告栏的控件,能用的基本不支持多行显示,于是只好自己动手,苦于没有自定义过一个像样的控件,借鉴Android公告条demo,实现了多行向上滚动的控件.在原控件基础之上添加如下功能: 传入数据分页显示添加Left Drawable 手指触摸事件处理添加3D动画翻滚效果效果图源码 package com.android.view; import android.content.Context; import android.content.res.Typed

DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理

推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一个滚动的文本字幕,应用于文字.图片.表格. DIV+CSS图片不间断滚动jquery特效,横向不间断不停滚动CSS特效,使用JQ+DIV实现非常实用简单兼容各大浏览器的图片不间断滚动特效(CSS+JQ不间断滚动图片). 使用方法如下: 1.加载JavaScript. 1 <script type=&qu

图片不断向上滚动