精华内容
下载资源
问答
  • 超出div高度,文本自动滚动(像跑马灯一样从下往上滚动) 一个div里面有文字 1、如果文字没超出div高度:文字不用滚动 2、如果文字太多超出了div高度,那些文字就自动滚动 ps:滚动的效果就像我这个设置一样 <...

    1、效果1

    超出div高度,文本自动滚动(像跑马灯一样从下往上滚动)

    一个div里面有文字
    1、如果文字没超出div高度:文字不用滚动
    2、如果文字太多超出了div高度,那些文字就自动滚动
    ps:滚动的效果就像我这个设置一样

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title>文字内容超长,自动滚屏(跑马灯效果)</title>
    		<script src="js/jquery-1.9.1.min.js"></script>
    		<style>
    		div.marquee{
    			overflow:hidden;
    			background:#ccc;
    			width:400px;
    			height:140px;
    			line-height:30px;
    		}
    		</style>
    		
    	</head>
    	<body>
    	<script>
    		var s = '<div class="marquee">';
    		for(var i = 0; i < 10; i++){
    			s += i + '该系统于2017-06-21进行维护,望相互告知!!!<br />';
    			
    		} 
    		s += '</div>';
    		document.write(s);
    	</script><br />
        <div class="marquee">该系统于2017-06-21进行维护,望相互告知!!!</div>
    	<script>
    	    $('div.marquee').each(function () {
    	        if (this.scrollHeight > this.offsetHeight) $(this).html('<marquee behavior="scroll" direction="up" scrollamount="1" height="140" onmouseover="this.stop()" onmouseout="this.start()">'+this.innerHTML+'</marquee>');
    	    });
    	</script>
    	</body>
    </html>
    

     

    2、效果2

    js文字跑马灯

    实现文字跑马灯效果,主要控制scrollLeft.

    效果图如下

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title>文字内容超长,自动滚屏(跑马灯效果)</title>
    		<script src="js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript">
    var position=$("div").scrollLeft();
    var t;
    var flag=true;
    $(document).ready(function(){
      $("button").click(function(){
          if(flag){
            position=0;
            fun();
            $(".btn1").text("重置跑马灯");
          }else{
            $(".btn1").text("开始跑马灯")
            clearTimeout(t); 
            $("div").scrollLeft(0);
          }
          flag=!flag;
          
      });
    });
    function fun(){
        if(position>400){
            position=0;
        }
        $("div").scrollLeft(position++);
        t=setTimeout("fun()",30);
    }
    </script>
    </head>
    <body>
    <div id="testDiv" style="width:300px;overflow:hidden;white-space:nowrap;position:relative;">
    The longest word in the english dictionary is: pneumonoultramicroscopicsilicovolcanoconiosis.
    </div>
    <button class="btn1">开始跑马灯</button>
    </body>
    </html>
    

     

    3、HTML之marquee(文字滚动)详解

    语法:

    <marquee></marquee>

    以下是一个最简单的例子:

    代码如下:

    <marquee><font size=+3 color=red>Hello, World</font></marquee>

    下面这两个事件经常用到:

    onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动

    onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动

    代码如下:

    <marquee onMouseOut="this.start()" onMouseOver="this.stop()">onMouseOut="this.start()" :用来设置鼠标移出该区域时继续滚动 onMouseOver="this.stop()":用来设置鼠标移入该区域时停止滚动</marquee>

    这是一个完整的例子:

    代码如下:

    <marquee id="affiche" align="left" behavior="scroll" bgcolor="#FF0000" direction="up" height="300" width="200" hspace="50" vspace="20" loop="-1" scrollamount="10" scrolldelay="100" onMouseOut="this.start()" onMouseOver="this.stop()">

    这是一个完整的例子

    </marquee>

    该标签支持的属性多达11个:

    align

    设定<marquee>标签内容的对齐方式

    absbottom:绝对底部对齐(与g、p等字母的最下端对齐)

    absmiddle:绝对中央对齐

    baseline:底线对齐

    bottom:底部对齐(默认)

    left:左对齐

    middle:中间对齐

    right:右对齐

    texttop:顶线对齐

    top:顶部对齐

    代码如下:

    <marquee align="absbottom">align="absbottom":绝对底部对齐(与g、p等字母的最下端对齐)。 </marquee>

    <marquee align="absmiddle">align="absmiddle": 绝对中央对齐。 </marquee>

    <marquee align="baseline">align="baseline": 底线对齐。 </marquee>

    <marquee align="bottom">align="bottom": 底部对齐(默认)。 </marquee>

    <marquee align="left">align="left": 左对齐。 </marquee>

    <marquee align="middle">align="middle": 中间对齐。 </marquee>

    <marquee align="right">align="right": 右对齐。 </marquee>

    <marquee align="texttop">align="texttop": 顶线对齐。 </marquee>

    <marquee align="top">align="top": 顶部对齐。 </marquee>

    behavior

    设定滚动的方式:

    alternate: 表示在两端之间来回滚动。

    scroll: 表示由一端滚动到另一端,会重复。

    slide:      表示由一端滚动到另一端,不会重复。

    代码如下:

    <marquee behavior="alternate">alternate:表示在两端之间来回滚动。 </marquee>

    <marquee behavior="scroll">scroll:表示由一端滚动到另一端,会重复。</marquee>

    <marquee behavior="slide">slide:      表示由一端滚动到另一端,不会重复。</marquee>

    bgcolor

    设定活动字幕的背景颜色,背景颜色可用RGB、16进制值的格式或颜色名称来设定。

    代码如下:

    <marquee bgcolor="#006699">设定活动字幕的背景颜色 bgcolor="#006699"</marquee>

    <marquee bgcolor="RGB(10%,50%,100%,)">设定活动字幕的背景颜色 bgcolor="rgb(10%,50%,100%,)"</marquee>

    <marquee bgcolor="red">设定活动字幕的背景颜色 bgcolor="red"</marquee>

    direction

    设定活动字幕的滚动方向

    代码如下:

    <marquee direction="down">设定活动字幕的滚动方向direction="down":向下</marquee>

    <marquee direction="left">设定活动字幕的滚动方向direction="left":向左</marquee>

    <marquee direction="right">设定活动字幕的滚动方向direction="right":向右</marquee>

    <marquee direction="up">设定活动字幕的滚动方向direction="up":向上</marquee>

    height

    设定活动字幕的高度

    代码如下:

    <marquee height="500" direction="down" bgcolor="#CCCCCC">设定活动字幕的高度height="500"</marquee>

    width

    设定活动字幕的宽度

    代码如下:

    <marquee width="500" bgcolor="#CCCCCC">设定活动字幕的宽度width="500"</marquee>

    hspace

    设定活动字幕里所在的位置距离父容器水平边框的距离

    This controls the horizontal(水平)space around the display box.

    代码如下:

          <table width="500" border="1" align="center" cellpadding="0" cellspacing="0">

            <tr>

              <td><marquee hspace="100" bgcolor="#CCCCCC">hspace="100"</marquee></td>

            </tr>

          </table>

    vspace

    设定活动字幕里所在的位置距离父容器垂直边框的距离

    This controls the vertical(垂直) space around the display box.

    代码如下:

    <marquee vspace="100" bgcolor="#CCCCCC">hspace="100"</marquee>

    loop

    设定滚动的次数,当loop=-1表示一直滚动下去,默认为-1

    代码如下:

    <marquee loop="-1" bgcolor="#CCCCCC">我会不停地走。</marquee>

    <p>&nbsp;</p>

    <marquee loop="2" bgcolor="#CCCCCC">我只走两次哦</marquee>

    scrollamount

    设定活动字幕的滚动速度,单位pixels

    代码如下:

    <marquee scrollamount="10" >scrollamount="10" </marquee>

    <marquee scrollamount="20" >scrollamount="20" </marquee>

    <marquee scrollamount="30" >scrollamount="30" </marquee>

    scrolldelay

    设定活动字幕滚动两次之间的延迟时间,单位millisecond(毫秒)

    值大了会有一步一停顿的效果

    代码如下:

    <marquee scrolldelay="10" >scrolldelay="10" </marquee>

    <marquee scrolldelay="100" > scrolldelay="100"</marquee>

    <marquee scrolldelay="1000">scrolldelay="1000" </marquee>

     

    <marquee> ... </marquee>

    移动属性的设置 ,这种移动不仅仅局限于文字,也可以应用于图片,表格等等

    鼠标属性

    onMouseOut=this.start() ........鼠标移出状态滚动

    onMouseOver=this.stop() .........鼠标经过时停止滚动

    方向

    <direction=#> #=left, right ,up ,down <marquee direction=left>从右向左移!</marquee>

    方式

    <bihavior=#> #=scroll, slide, alternate <marquee behavior=scroll>一圈一圈绕着走!</marquee>

    <marquee behavior=slide>只走一次就歇了!</marquee>

    <marquee behavior=alternate>来回走</marquee>

    循环

    <loop=#> #=次数;若未指定则循环不止(infinite) <marquee loop=3 width=50% behavior=scroll>只走 3 趟</marquee>

    <marquee loop=3 width=50% behavior=slide>只走 3 趟</marquee>

    <marquee loop=3 width=50% behavior=alternate>只走 3 趟!</marquee>

    速度

    <scrollamount=#> <marquee scrollamount=20>啦啦啦,我走得好快哟!</marquee>

    延时

    <scrolldelay=#> <marquee scrolldelay=500 scrollamount=100>啦啦啦,我走一步,停一停!</marquee>

    外观(Layout)设置

    对齐方式(Align)

    <align=#> #=top, middle, bottom <font size=6>

    <marquee align=# width=400>啦啦啦,我会移动耶!</marquee>

    </font>

    底色

    <bgcolor=#> #=rrggbb 16 进制数码,或者是下列预定义色彩:

    Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,

    Fuchsia, White, Green, Purple, Silver, Yellow, Aqua <marquee bgcolor=aaaaee>颜色!</marquee>

    面积

    <height=# width=#> <marquee height=40 width=50% bgcolor=aaeeaa>面积!</marquee>

    空白

    (Margins)<hspace=# vspace=#>

    <marquee hspace=20 vspace=20 width=150 bgcolor=ffaaaa align=middle>面积!</marquee>

    </P>

    <marquee id="iescroller" direction=left height=10 onMouseOut=start(); onMouseOver=stop(); scrollamount=2 scrolldelay=10 scrollleft="0" scrolltop="0" behavior="alternate" bgcolor="#999999" style="color: #ffffff; font-size: 14; font-family: '宋体', 'Arial','Helvetica', 'sans-serif'"title=文字内容> 这是放文字或需要移动的图片(光标放在这里时用INSERT命令就可以插入图片)</marquee> </P>

     

     

    marquee的滚动属性参数 

     

         从<marquee>开始到</marquee>结束,其中有很多参数,其实,朋友们还是应用得很多了,让图片滚动起来,也是经常经常应用的,下面对这个网页参数的属性做一些简单的描述;

    滚动参数:

    1:方向:DIRECTION

    left---左(默认)

    right---右

    up------上

    down----下

    2:方式:BEHAVIOR

    SCROLL -------环绕滚动(默认)

    SLIDE---------滚动一次

    ALTERNATE-----来回滚动

    3:次数:LOOP

    当LOOP=-1或LOOP=INFINITE时,则表明文字滚动是无限循环(默认)

    4:速度:SCROLLDELAY

    任意自然整数

    5:对齐:ALIGN

    TOP---------对齐上方

    MIDDLE------对齐中部

    BOTTOM------对齐下方

    6:鼠标的划过与离开

    onMouseOver=this.stop(); onMouseOut=this.start();

    划过停止滚动。离开,继续滚动

    有了以上参数。我们就很容易制作出一个logo图片的任意滚动方式,例如:

    <marquee width=120 height=200 DIRECTION=up BEHAVIOR=ALTERNATE SCROLLDELAY=120 ALIGN=MIDDLE onMouseOver=this.stop(); onMouseOut=this.start();><a href=http://qjpz.com><img src=http://qjpz.com/bbs/images/logo.gif border=0><marquee>

    很容易对照出。这是一个滚动速度为120MM,从下到上碰壁即返回并对齐中间,鼠标划过图标即停止,点击图标进入〈千娇论坛〉的一个来回滚动的代码。

    在背景图片上做滚动字幕

    <TABLE width="500" border=0>

    <TBODY>

    <TR>

    <TD background=背景图片地址 height=250>

    <P><MARQUEE scrollAmount=2 scrollDelay=50 direction=up width=200 height=200 behavior=scroll>要滚动的文字</MARQUEE></P></TD></TR></TBODY></TABLE></DIV>

    参数设置:

    a)scrollAmount表示速度,值越大速度越快。如果没有它,默认为6,建议设为1~3比较好

    b)scrollDelay也是用来控制速度的,表示走走停停,默认为90,值越大,速度越慢。通常scrollDelay是不需要设置的。

    c)direction很明显是表示滚动的方向,默认为从右向左:←,因此如果是向左滚动的话不需要次参数。其他可选的值还有right,down,up。滚动方向分别为:right表示→,up表示↑,down表示↓。

    d)width和height用来表示滚动区域的大小,width是宽度,height是高度。特别是在做垂直滚动的时候,一定要设height的值。

    e)behavior是来控制滚动属性的,默认为循环滚动(scroll),同样,如果是循环滚动的话可以不需要此参数。其他可选的值还有alternate(交替滚动),slide(幻灯片效果,指的是滚动一次,然后停止滚动)。

    f)每行字的前后<FONT color=#990066 size=4 face=隶书>和</FONT>用定义每行字的颜色,大小和字体,如果哪项不需要的话,把代码去掉就行。

    图片滚动
    用<img src=相对路径/文件名>的语句。并且要注意图片名不要中文,要注意区分英文大小写。

    图片做超链接
    用<a href=>和</a>把<img>包围,并且img必须设border=0,否则图片会出现蓝框。

    正确的例子如:

    <a href=http://www.sina.com.cn/><img src=../../j/01.jpg border=0></a>
    其中a href=表示超链接,这是最常用的。练习的方法也很简单,就是平时用FP或DW做网页的时候,要多查看源代码。

    多张图片排列滚动
    通常图片和图片之间用<br>(回行)或<p style=margin-top:9>(精确调整图片间的距离)来链接。也可以把你的图片先用表格排版,然后把这个表格的所有语句也加入到marquee中,让这个表格来滚动。
    代码如:

    <script>document.write('<marquee scrollAmount=2 width=340 height=160 direction=up οnmοuseοver=stop() οnmοuseοut=start()><a href=http://www.sina.com.cn/><img src=../../j/01.jpg border=0></a></marquee>')</script> 

     

     

    参考资料

    https://ask.csdn.net/questions/391201?sort=id
    https://www.cnblogs.com/lidedong/p/9667512.html

    https://www.cnblogs.com/smiler/p/4892918.html

     

    展开全文
  • 实现图片自动滚动

    2016-06-09 09:26:26
    此案例是实现页面的自滚动,且中间有小圆圈随着连动: private void setIndicator() {  layout=(LinearLayout) findViewById(R.id.pagerIndicator);  for (int i = 0; i  View view=new View(this); ...

    此案例是实现页面的自滚动,且中间有小圆圈随着连动:


    private void setIndicator() {
      layout=(LinearLayout) findViewById(R.id.pagerIndicator);
      for (int i = 0; i < images.length; i++) {
       View view=new View(this);
       LinearLayout.LayoutParams params=
         new LinearLayout.LayoutParams(10,10);
       
       view.setLayoutParams(params);
       view.setBackgroundResource(R.drawable.indicator_selector_01);
       layout.addView(view);
      }
      layout.getChildAt(0).setEnabled(false);
     }

     private int currentPager;
     private void setViewPager() {
      viewPager=(ViewPager) findViewById(R.id.guidePagerId);
      PagerAdapter adapter=new GuideAdapter();
      viewPager.setAdapter(adapter);
      currentPager=0;
      viewPager.setCurrentItem(currentPager);
      //让其自动滚动
      final Handler handler=new Handler();
      handler.postDelayed(new Runnable() {
       @Override
       public void run() {
        currentPager++;
        if (currentPager==10000) {
         currentPager=0;
        }
        viewPager.setCurrentItem(currentPager);
        handler.postDelayed(this, 3000);
       }
      }, 3000);
      viewPager.setOnPageChangeListener(new OnPageChangeListener() {
       @Override
       public void onPageScrollStateChanged(int arg0) {
        
       }

       @Override
       public void onPageScrolled(int arg0, float arg1, int arg2) {
       }
       private int prePos;
       @Override
       public void onPageSelected(int position) {
        layout.getChildAt(position%6).setEnabled(false);//show blue
        layout.getChildAt(prePos).setEnabled(true);//show hui
        prePos=position%6;
       }
      });
     }
     class GuideAdapter extends PagerAdapter{
      @Override
      public int getCount() {
       return 10000;
      }
      @Override
      public boolean isViewFromObject(View arg0, Object arg1) {
       return arg0==arg1;
      }
      @Override
      public Object instantiateItem(ViewGroup container, int position) {
       ImageView iv=new ImageView(MainActivity.this);
       iv.setScaleType(ScaleType.FIT_XY);
       iv.setImageResource(images[position%6]);
       container.addView(iv);
       return iv;
      }
      @Override
      public void destroyItem(ViewGroup container, int position, Object object) {
       container.removeView((View)object);
      }
     }
    }

    展开全文
  • 页面图片自动滚动

    千次阅读 2018-08-28 19:58:24
    打开网页时,图片自动在循环切换,当想仔细查看某一张图片时,停止自动播放,左右提供手动切换按钮,图片也可添加 超链接; 代码为了方便没有外联 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;...

    打开网页时,图片自动在循环切换,当想仔细查看某一张图片时,停止自动播放,左右提供手动切换按钮,图片也可添加 超链接;
    代码为了方便没有外联

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            /*css代码开始 */
            <style>
                *{margin:0;padding:0;}
                #box1{width:800px;height:400px;margin:50px auto 0;position:relative;}
                #imgs{width:800px;height:400px;}
                .page{width:50px;height:80px;background-color:rgba(0,0,0,0.2);position:absolute;top:160px;font:20px/80px 'Microsoft YaHei';text-align:center;display:none;color:white;}
                #left{left:0;}
                #right{right:0;}
                #aff{list-style:none;position:absolute;left:210px;bottom:20px;}
                #aff li{width:20px;height:20px;float:left;border-radius:50%;margin-left:20px;background-color:gray;text-align:center;font:16px/20px "微软雅黑";}
            /*css代码结束 */
            </style>
            //js原生代码
            <script type="text/javascript">
                //页面加载完毕执行
                window.onload = function(){
                    //获取所有标签对象
                    var oBox1 =  document.getElementById("box1");
                    var oImgs = document.getElementById("imgs");
                    var oLeft = document.getElementById("left");
                    var oRight = document.getElementById("right");
                    var oLiArr = document.getElementsByTagName("li");
                    //记录图片
                    var num = 1;
                    oLiArr[0].style.backgroundColor = "red";
                    //启动定时器
                    var timer = setInterval(run1,2000);
                    function run1(){
                        num++;
                        accoord()
                    }
                    function accoord(){
                        //边界判断
                        if(num==9){
                            num = 1;
                        }
                        else if(num==0){
                            num = 8;
                        }
                        //切换图片
                        oImgs.src = "img/faa/" + num + ".jpg";
                        //重置所有圆点的颜色为灰色
                        for(var i = 0 ;i < oLiArr.length; i++){
                            oLiArr[i].style.backgroundColor = "gray";   
                        }
                        //将目前所选中的圆点设置为红色
                        oLiArr[num-1].style.backgroundColor = "red";
                    }
                    //鼠标移入窗口停止滚动
                    oBox1.addEventListener("mouseover",stopFunc,false);
                    function stopFunc(){
                        clearInterval(timer);
                        oLeft.style.display = "block";
                        oRight.style.display = "block";
    
                    }
                    //鼠标移出启动自动 滚动
                    oBox1.addEventListener("mouseout",startFunc,false);
                    function startFunc(){
                        timer = setInterval(run1,2000);
                        oLeft.style.display = "none";
                        oRight.style.display = "none";
                    }
                    //鼠标移入左右按钮
                    oLeft.addEventListener("mouseover",pageFunc,false);
                    oRight.addEventListener("mouseover",pageFunc,false);
                    function pageFunc(){
                        clearInterval(timer);
                        this.style.backgroundColor = "rgba(0,0,0,0.6)";
                    }
                    //鼠标移出左右 按钮
                    oLeft.addEventListener("mouseout",noPageFunc,false);
                    oRight.addEventListener("mouseout",noPageFunc,false);
                    function noPageFunc(){
                        this.style.backgroundColor = "rgba(0,0,0,0.2)";
                    }
                    //鼠标单击左按钮切换图片
                    oLeft.addEventListener("click",function(){
                        num--;
                        accoord();
                    },false);
                    //鼠标单击右按钮切换图片
                    oRight.addEventListener("click",function(){
                        num++;
                        accoord();
                    },false);
                    //鼠标移动圆点切换图片
                    for(var i = 0;i < oLiArr.length;i++){
                        oLiArr[i].index = i + 1;
                        oLiArr[i].addEventListener("mouseover",function(){
                            clearInterval(timer);
                            num = this.index;
                            accoord();
                        },false);
                    }
                }
            </script>
        </head>
        <--h5-->
        <body>
            <!--整个盒子-->
            <div id="box1">
                <img src="img/faa/1.jpg" id="imgs"/>
                <!--手动切换上一页-->
                <div id="left" class="page"><</div>
                <!--手动切换下一页-->
                <div id="right" class="page">></div>
                <!--页数-->
                <ul id="aff">
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                    <li>5</li>
                    <li>6</li>
                    <li>7</li>
                    <li>8</li>
                </ul>
            </div>
        </body>
    </html>
    
    展开全文
  • 经常在sina网页上看到一个浮动窗口随着滚动条移动,觉得很好玩,于是自己就抽空实现了一个。代码如下: var imgTopMargin = -40; var imgSpeed = 15; var timeSpeed = 200; var hLimit = 0; var timer; ...

    经常在sina网页上看到一个浮动窗口随着滚动条移动,觉得很好玩,于是自己就抽空实现了一个。代码如下:

    var imgTopMargin = -40;
    var imgSpeed = 15;
    var timeSpeed = 200;
    var hLimit = 0;
    var timer;
    function checkImg()
    {
         var reTimer = timeSpeed;
         if(document.body.offsetHeight > hLimit)
         {  
             var startPoint = parseInt(document.all.sImg.style.top,10);
             var endPoint = document.body.scrollTop;
             endPoint = (imgTopMargin <= endPoint ) ? endPoint - imgTopMargin : 0;
             if(startPoint != endPoint)
             {
                  moveAmount = Math.ceil(Math.abs(endPoint - startPoint) / 15);
                  document.all.sImg.style.top = parseInt(document.all.sImg.style.top,10) + ((endPoint<startPoint) ? -moveAmount : moveAmount);
                  reTimer = imgSpeed;
             }
         }
         else
        {
            document.all.sImg.style.top = 0;
        }
        timer=setTimeout("checkImg();",reTimer);
    }

    function initImg()
    {
         document.all.sImg.style.top = document.body.scrollTop;
         checkImg();
    }
    注意:
    1.红色字体是我在页面中div或者图片的id
    2.如果网页的头部是<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">请把代码中的document.body.scrollTop改成document.documentElement.scrollTop,否则scrollTop取值总为0,具体原因不清楚。

    转载于:https://www.cnblogs.com/lcq135/archive/2008/05/29/1210020.html

    展开全文
  • ![图片说明](https://img-ask.csdn.net/upload/201611/23/1479892528_530870.png) 求高手解答,如何实现表格上下自动滚动?就像文字一样自动滚动
  • ********************分割线*******************************图片自动切换淡入淡出以及鼠标经过li的时候动态淡入淡出******************************** < !DOCTYPE html ">  ; charset=gb2312" />  ...
  • html页面实现图片滚动

    千次阅读 2020-12-14 22:42:11
    html页面实现图片滚动 css代码 * { margin: 0px;/*设置一个元素所有外边距的宽度*/ padding: 0px;/*设置元素所有内边距的宽度*/ text-align: center;/*规定元素中的文本的水平对齐方式。*/ } #banner { width...
  • 实现 下面我们将以一张已知的底图为基础(也就是背景图的尺寸我们知道),循序渐进讨论这个问题。 如何滚动 滚动大家应该很熟悉,使用关键帧动画即可,比如: @keyframes bg { 0% { transform: translateX(0); } ...
  • 第一种用js的window.onload() 先随便来几个图片 路径自己设一下;"> <li><img src="../img/1.jpg" width="340" height="210"> <li><img src="../img/2.jpg" wi
  • js实现滚动条到底自动加载图片

    千次阅读 2013-01-29 14:07:47
    一、之前Google的图片搜索结果界面提供了一个功能,即滚动滚动到接近底部的位置自动加载剩余图片。个人觉得这个功能还蛮人性化的,避免来回翻页的繁琐,让搜索结果以增量形式展现。所以也自己仿造了一个。功能是...
  • HTML中实现图片滚动效果

    千次阅读 多人点赞 2013-11-24 14:52:40
    HTML中实现滚动效果网页中多的不能再说了,一般的网站都有图片滚动效果,突然滚动出一个美女让你点击,这样也是一个网站获取流量的方式,今天我也做了个测试,实现简单的图片滚动效果 注释: 1) ...
  • 使用HTML+CSS实现图片滚动效果

    千次阅读 2020-02-29 17:10:32
    之前用js实现过图片切换的效果,今天实现图片滚动的特效,这里不包含图片的切换。 直接上代码: <div class="loopimg"> <ul> <li> <img src="img/运动/运动 - 21.jpg" height="200px"/> ...
  • swiper.js插件实现图片滚动效果

    千次阅读 2017-11-17 20:31:45
    swiper.js插件实现图片滚动效果 1、页面初始化效果: 2、Html如下 为你霸屏 --> 样式选择
  • 本文我们实现纯JS方式的滚动广告效果。 先show一下成品: 首先是网页样式: 1. #demo { 2. background: #FFF; 3. overflow:hidden; 4. border: 1px dashed #CCC; 5. width: 1280px; 6. height:200px; 7. } 8. #demo ...
  • &lt;head&gt; &lt;script src="js/jquery-1.7.1.min.... //(假设网速超快加载数据又很少,网页可以在瞬间或者1、2秒内就可以加载完成) &lt;script type="text/javascript"&gt;
  • 需要在页面中一个小的区域循环滚动展示新闻并且鼠标悬停时停止滚动并提示,离开后,继续滚动,具体实现如下,喜欢的朋友可以参考下 需要在页面中一个小的区域循环滚动展示新闻(公告、活动、图片等等)...
  • 纯css3实现图片自动切换

    万次阅读 2017-05-25 20:44:41
    实现图片自动切换需要用到的主要是css3里面的过渡这一节的内容。 大致思路是这样的: 1、将图片设置为li的背景图片; 2、规定一个@keyframes的规则使得图片按照这个规则进行切换; 3、设置每张图片出现的时间; ...
  • 轮播图是前端网页中常用的功能,包括PC端和移动端,都会用到轮播图,像咨讯、电商和个人博客等,首页基本都会有轮播图。 老徐在上一篇文章的基础上【最简单详细的轮播图原理和制作过程】,又扩展了功能,使之成为...
  • 一、BxCarousel实现图片滚动切换 BxCarousel是一个具有众多配置且易用的Jquery图片滚动插件,特征主要有: ◆ 可以指定显示的元素总数 ◆ 可以指定每次滚动的元素个数 ◆ 自动播放模式 ◆ 前一张/后一张按钮...
  • 以下是我个人初步接触的...1、进入网站后可看到superslide能够实现网页滑动效果。点击如何使用,有教程专门介绍该插件用法。 2、先将各种插件引用哦那个到网页页面。 3、编写div引用css样式,核心实现代码也
  • .imageList{ overflow-x: auto; overflow-y: hidden; height:180px; white-space: nowrap; img{ width:auto; height:100%; margin-right:10px; ...
  • 网页背景图片自动拉伸

    千次阅读 2014-04-24 12:12:27
    Html 在网页、页面中显示自动拉伸的背景图片,Html 在页面中显示自动拉伸的背景图片,Html 在页面中显示自动拉伸的背景图片,Html 页面中显示自动拉伸的背景图片,Html 页面中显示自动拉伸的背景图片,Html 页面...
  • html5 用canvas实现图片自动滑动切换

    千次阅读 2018-11-09 07:27:53
    html5 用canvas实现图片自动滑动切换
  • $(window).scroll(function () { //滑动滚动条的时候 slideIn($(".target"), 150); //触发函数 }); function slideIn(obj, left) { var targetHeight = obj.offset().top; //获取target绑定元素到html边界的高...
  • 方法和PageAdmin实现导航栏滚动公告一样的,将显示样式设置为显示标题+专题图片就可以了。
  • JS实现4张图片滚动切换代码

    千次阅读 2013-07-19 17:57:02
    JS实现4张图片滚动切换代码 - www.webdm.cn *{ margin:3;padding:0; font-size:12px; } body{ font-size:9pt; text-align:center; margin-top: 8px; } body *{text-align:center;} .font14{font-size...
  • dedecms首页实现图片滚动,JS调用代码从左向右滚动的代码: {dede:arclist row=1 titlelen=24 orderby=pubdate typeid=4 idlist= channelid=6 col=4 type=image.}[fie
  • 无限滚动自动翻页可以说是web2.0时代的一项堪称伟大的技术,它让我们在浏览页面的时候只需要把滚动条拉到网页底部就能自动显示下一页的结果,改变了一直以来只能通过点击下一页来翻页这种常规做法。 无限滚动自动...
  • 用div实现向左右无缝滚动图片效果

    千次阅读 2009-12-02 17:40:00
    星期六 上午 11:01div+css学习笔记22(用div实现向左无缝滚动图片效果)JavaScript实现走马灯效果[无缝连接、循环滚动] 无缝跑马灯效果以下代码在IE6、Firefox+Win2k环境下测试通过网页走马灯连续循环滚动废话少说,...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 31,483
精华内容 12,593
关键字:

网页实现图片自动滚动