图片来回滚动和图片联接滚动

续：

1、图片的来回滚动效果

<html>
<body>
<center>
<font face="字体2" size=6 color="#ff0000">
滚动字幕
</font><br>
<marquee>啦啦啦~~~我会跑了</marquee>
<p>
<marquee behavior=alternate>
<img src="http://img.taopic.com/uploads/allimg/100312/6-1003121302510.jpg"></marquee>
<p></font></marquee>
</center>
</body>
</html>

2、图片的联接滚动效果

(注意不要让鼠标放在上面哟，不然图片会被你定住的呀！)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 100%;
}
#demo img {
border: 3px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src=" http://img.taopic.com/uploads/allimg/100312/6-1003121302510.jpg" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.οnmοuseοver=function() {clearInterval(MyMar)};
tab.οnmοuseοut=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
<marquee behavior=alternate>哈哈哈哈哈哈哈哈……………………</marquee>
</body>
</html>

图片来回滚动和图片联接滚动相关推荐

HTML怎么设置自动滚动的图片,转：HTML中让图片滚动的marquee标签的使用方法
实例: 需要滚动的文字需要滚动的文字也可以程序代码也可以是图片说明: 1.中间的内容可以为文字,图片,也可以是由程序生成的文字或图片 2.onMouseOut="this.star ...
JavaScript----marquee滚动标签图片无缝滚动插入百度地图
页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee ...
鼠标滚动缩放图片效果
前段时间本人在做项目时,做了一个鼠标滚动缩放图片效果,图片支持多个,多个图片循环缩放,花了点时间整理了下,把它贴出来,与大家分享下,在ie6.0,ie7.0,firefox都测试过,没有问题. < ...
C#跑马灯，图片滚动，后台获取图片地址。动态绑定图片，imag显示文字
下面附下载地址. http://download.csdn.net/download/njxiaogui/10002058 1.跑马灯效果,图片连续循环滚动,图片下面并可附文字描述,图片是从数据库中获 ...
[css] 如何设置背景图片不随着文本内容的滚动而滚动？
[css] 如何设置背景图片不随着文本内容的滚动而滚动? 直接对div设置background:url不就好了嘛?上代码.<!DOCTYPE html> <html lang=&qu ...
前端：JS/29/实例:控制div显示_滚动的图片
实例:控制div显示_滚动的图片 <!DOCTYPE html> <html lang="en"><head><meta charset= ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
android截取网页图片,安卓版谷歌浏览器很快将获得滚动截图功能可以用来截取整个网页...
截图功能对用户来说应该是非常常用的功能,然而有时候截取网页时可能需要我们进行多次截图再拼接截图图片. 为解决这种问题现在已经有些软件提供滚动截图功能,滚动截图可帮助用户一次性将整个网页内容截图无需拼接 ...
jQuery图片懒加载示例（滚动函数再加载）
图片懒加载可以极大的减轻服务器请求的负担,如果没有做这样的操作,一个页面很多图片同时请求,就会渲染慢,影响用户体验! 原理其实很简单,就是滚动条拉下来显示的时候再加载显示出真实的图片,在不显示的区域的 ...

图片来回滚动和图片联接滚动

图片来回滚动和图片联接滚动相关推荐

最新文章

热门文章