坚持#第66天~十万个为什么and滑轮滑动滚动

2016-10-14

完成了：

（1）你的梦想是什么？变得更优秀！

（2）今天你为你的梦想做了什么？十万个为什么！

（3）你是否离你的梦想更近了？是的！

（4）看了30天；

（5）看了专套本；

（6）30天收获:

import java.util.Scanner;

Scanner scanf = new Scanner(System.in);

---------------------------------------

//定义数组长度

int[] x = new int[10];

---------------------------------------

//在网页中写文字

document.write("李涛是天才");

alert("李涛果然是天才");

---------------------------------------

--------------------------------

//在IE浏览器透明度要这样写才有效果

filter:alpha(opacity=20);

---------------------------------------

--------------------------------

<marquee direction="left" height="100%" 

scrollamount="85" scrollDelay="100" 

onmouseover="this.scrollDelay=500" 

onmouseout="this.scrollDelay=1" 

width="100%"><img src="课表1.png" 

/><img src="课表2.png" /><img src="课表

3.png" /></marquee>

---------------------------------------

--------------------------------

background:scroll;

---------------------------------------

--------------------------------

滚动的概念：

语法：<marquee>...</marquee>； 说明：在标记之间添加要进行滚动的内容。

重要属性：

1.滚动方向direction（包括4个值：up、 down、 left和 right）

语法：<marquee direction="滚动方向">...</marquee>

2.滚动方式behavior（scroll:循环滚动，默认效果； slide:只滚动一次就停止； alternate:来回交替进行滚动）

语法：<marquee behavior="滚动方式">...</marquee>

3.滚动速度scrollamount（滚动速度是设置

每次滚动时移动的长度，以像素为单位）

　　语法：<marquee 

scrollamount="5">...</marquee>

marquee图片无缝滚动

先了解一下对象的几个的属性：

innerHTML:     设置或获取位于对象起始和

结束标签内的 HTML

scrollHeight: 获取对象的滚动高度。

scrollLeft:    设置或获取位于对象左边界

和窗口中目前可见内容的最左端之间的距离

scrollTop:     设置或获取位于对象最顶端

和窗口中可见内容的最顶端之间的距离

scrollWidth:   获取对象的滚动宽度

offsetHeight: 获取对象相对于版面或由父

坐标 offsetParent 属性指定的父坐标的高

度

offsetLeft:    获取对象相对于版面或由 

offsetParent 属性指定的父坐标的计算左侧

位置

offsetTop:     获取对象相对于版面或由 

offsetTop 属性指定的父坐标的计算顶端位

置

offsetWidth:   获取对象相对于版面或由父

坐标 offsetParent 属性指定的父坐标的宽

度

---------------------------------------

--------------------------------

图片向上无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

-->

</style>

向上滚动

<div id="demo">

<div id="demo1">

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

</div>

<div id="demo2"></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; //克隆

demo1为demo2

function Marquee(){

if(tab2.offsetTop-tab.scrollTop<=0)//当

滚动至demo1与demo2交界时

tab.scrollTop-=tab1.offsetHeight //demo

跳到最顶端

else{

tab.scrollTop++

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() 

{clearInterval(MyMar)};//鼠标移上时清除

定时器达到滚动停止的目的

tab.onmouseout=function() 

{MyMar=setInterval(Marquee,speed)};//鼠

标移开时重设定时器

-->

</script>

---------------------------------------

---------------------

图片向下无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

height: 100px;

text-align: center;

float: left;

}

#demo img {

border: 3px solid #F2F2F2;

display: block;

}

-->

</style>

向下滚动

<div id="demo">

<div id="demo1">

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

</div>

<div id="demo2"></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; //克隆

demo1为demo2

tab.scrollTop=tab.scrollHeight

function Marquee(){

if(tab1.offsetTop-tab.scrollTop>=0)//当

滚动至demo1与demo2交界时

tab.scrollTop+=tab2.offsetHeight //demo

跳到最顶端

else{

tab.scrollTop--

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() 

{clearInterval(MyMar)};//鼠标移上时清除

定时器达到滚动停止的目的

tab.onmouseout=function() 

{MyMar=setInterval(Marquee,speed)};//鼠

标移开时重设定时器

-->

</script>

---------------------------------------

-----------------

图片向左无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#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://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" 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.onmouseover=function() 

{clearInterval(MyMar)};

tab.onmouseout=function() 

{MyMar=setInterval(Marquee,speed)};

-->

</script>

---------------------------------------

---------------

图片向右无缝滚动

<style type="text/css">

<!--

#demo {

background: #FFF;

overflow:hidden;

border: 1px dashed #CCC;

width: 500px;

}

#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://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" border="0" /></a>

<a href="#"><img 

src="http://www.cnrui.cn/other/link/Cle

ar_logo.gif" 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(tab.scrollLeft<=0)

tab.scrollLeft+=tab2.offsetWidth

else{

tab.scrollLeft--;

}

}

var MyMar=setInterval(Marquee,speed);

tab.onmouseover=function() 

{clearInterval(MyMar)};

tab.onmouseout=function() 

{MyMar=setInterval(Marquee,speed)};

-->

</script>