如何在HTML中实现图片的滚动效果

<MARQUEE onmouseover=stop() onmouseout=start() scrollAmount=3 loop=infinite deplay="0"><IMG src="第一张图片地址" ><IMG src="第二张图片地址"></MARQUEE>
注释：
1) scrollAmount。它表示速度，值越大速度越快。
2) 加入onmouseover=stop() onmouseout=start()代码，鼠标指向循环文字图片时他们会停止滚动，鼠标离开时继续滚动。
给滚动图片加超链接
用<a href=>和</a>把<img>包围，并且img必须设border=0，否则图片会出现边框。例子如下：
<MARQUEE scrollAmount=3 loop=infinite deplay="0"><a href="链接网址"><img src="图片网址" border=0></a></MARQUEE>
图片从右到左滚动
<MARQUEE width=宽 height=高 onmouseover=stop() onmouseout=start() scrollAmount=速度 loop=infinite deplay="0"><img src="图片地址 "><img src="图片地址 ">···</MARQUEE>
图片从下到上滚动
<marquee behavior="scroll" direction=up width="宽" height="高" scrollamount="5" onmouseout="this.start()"><img src="图片网址 "><img src="图片网址 ">···</marquee>
带有超链接的图片实现滚动效果
<marquee behavior="scroll" direction=up width="120" height="60" scrollamount="1" scrolldelay="60" onmouseover="this.stop()" onmouseout="this.start()"><a target="cont" href="连接地址"><img src="http://图片地址" idth="88" height="33" border="0"></a><a target="cont" href="连接地址"><img src="图片地址" width="88" height="33" border="0"></a></marquee>

原文地址：https://www.cnblogs.com/tccm/p/10868654.html

时间： 2024-08-07 12:03:04

如何在HTML中实现图片的滚动效果的相关文章

无缝不间断图片垂直滚动效果

无缝不间断图片垂直滚动效果: 垂直滚动效果虽然使用频率没有水平滚动高,不过也有大量的使用,例如垂直滚动的友情链接效果,下面就结合实例简单介绍一下如何实现此效果,代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /&g

如何在GridControl中显示图片列？控件DevExpress.XtraGrid.GridControl中显示图片列。

GridControl一列的ColumnEdit属性中选择PictureEdit,一个RepositoryItemPictureEdit添加完成.列的FieldName设置为Image列名,如img. GridControl绑定的数据,不管是DataTable.List或者其他源,添加一个列,列名为img. 以DataTable为例: Image xx=Image.FromFile("xxx"),yy=Image.FromFile("yyy"); dt.Column

[androidUI特效]android中TextView中如何设置水平滚动效果

如何让文本实现走马灯的效果,下面就一起实现下吧~~~~~~ package irdc.ScrollingText; import android.app.Activity; import android.os.Bundle; import android.widget.TextView; public class ScrollingText extends Activity { public TextView t1; /** Called when the activity is first c

图片循环滚动效果shader

背景无限循环滚动效果,有X和Y轴的速度控制,方便控制.见下图,操作步骤同之前的背景循环设置. shader如下: Shader "Custom/Scroll" { Properties{ _MainTint("Diffuse Tint" , Color) = (1,1,1,1) _MainTex("Base (RGB)", 2D) = "white" {} //x轴滚动速度 _ScrollXSpeed("X Scro

如何在html中插入图片

HTML内容元素中图片元素 使用img元素:src属性:图片路径. alt属性:图片无法显示的时候使用替代文本,title属性:鼠标悬停时显示文本内容. 在同一张图片上点击不同的位置链接到不同的页面上 使用map,和area元素(map是area的父元素) 加上id或者name是为了解决兼容性. shap形状分类:圆形,矩形,多边形,(点击区域的形状). href:形状的链接地址. coords:形状的位置. 圆形(cicle),多边形(poly) 矩形(rectangle) coords;矩形

小技巧，如何在Label中显示图片

这个需求其实是有的,比如QQ聊天界面里面发送的信息,可以用label来显示文字(也可以用button显示),但是有时候用户可能会发送图片.如果能让Label遇到文字就显示文字,遇到图片就显示图片就好了.可能有的人会说用Quartz2D,直接在Label的drawinrect 里面用上下文画上去.但这感觉太刻意去弄了,而且比较麻烦. 如果你不是在董铂然博客园看到本文,请点击查看原文 推荐一种用Label系统的属性来做. 1 2 3 4 5 6 7 8 9 10 UIImage *image = [

如何在Label中显示图片

UIImage *image = [UIImage imageNamed:@"321.jpg"]; // 1> 生成文本附件 NSTextAttachment *textAttach = [[NSTextAttachment alloc] init]; textAttach.image = image; // 2> 使用文本附件创建属性文本 NSAttributedString *strA = [NSAttributedString attributedStringWith

图片横向滚动效果

在body中增加div: <div id="photo-list"></div> 在js中写入onload方法(domain,urls)传入图片地址与域名,(图片最少5张,显示4张) function initOnloadAction(domain,urls,page_id){ var id = function(el) { return document.getElementById(el); }, c = id('photo-list'); //生成动态图片

网页中商品图片的局部放大效果

需求背景:购物网站中的商品局部放大: 代码: html: <div class="Pro_Detleft"> <div class="detail-itemsummary-imageviewer"> <div id="middlePicRemark" class="middlePicRemark">  <img id="imgGoodsPic" alt="