这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
鼠标控制左右滚动图片带自动翻滚
- <!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>
- <div>
- <div onmousedown="ISL_GoUp()" onmouseup="ISL_StopUp()" onmouseout="ISL_StopUp()">
- </div>
- <div>
- <div>
- <div>
- <!-- 图片列表 begin -->
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_3/1490193536_8178.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0928/15.html" target="_blank">
- 周宪环
- </a>
- </p>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_6/1490193537_2516.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0928/16.html" target="_blank">
- 周桢炜
- </a>
- </p>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_11/1490193538_1238.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0928/14.html" target="_blank">
- 张颖
- </a>
- </p>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_19/1490193539_1074.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0928/17.html" target="_blank">
- 王乃超
- </a>
- </p>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_18/1490193540_3892.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0928/19.html" target="_blank">
- 谢雯琇
- </a>
- </p>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_5/1490193541_9148.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0928/18.html" target="_blank">
- 吕铬
- </a>
- </p>
- </div>
- <div>
- <img class="img-responsive" src="http://img.phperz.com/data/img/20170322_14/1490193542_6297.jpg"
- width="109" height="87" data-src="" />
- <p>
- <a href="http://career.sina.com.cn/3/2007/0927/12.html" target="_blank">
- 贾正如
- </a>
- </p>
- </div>
- <!-- 图片列表 end -->
- </div>
- <div>
- </div>
- </div>
- </div>
- <div onmousedown="ISL_GoDown()" onmouseup="ISL_StopDown()" onmouseout="ISL_StopDown()">
- </div>
- </div>
- </div>
- <style type="text/CSS">
- <!-- .rollBox{width:704px;overflow:hidden;padding:12px 0 5px 6px;} .rollBox
- .LeftBotton{height:52px;width:19px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif)
- no-repeat 11px 0;overflow:hidden;float:left;display:inline;margin:25px
- 0 0 0;cursor:pointer;} .rollBox .RightBotton{height:52px;width:20px;background:url(http://i3.sinaimg.cn/edu/deco/2007/0924/career/job_mj_069.gif)
- no-repeat -8px 0;overflow:hidden;float:left;display:inline;margin:25px
- 0 0 0;cursor:pointer;} .rollBox .Cont{width:663px;overflow:hidden;float:left;}
- .rollBox .ScrCont{width:10000000px;} .rollBox .Cont .pic{width:132px;float:left;text-align:center;}
- .rollBox .Cont .pic img{padding:4px;background:#fff;border:1px solid #ccc;display:block;margin:0
- auto;} .rollBox .Cont .pic p{line-height:26px;color:#505050;} .rollBox
- .Cont a:link,.rollBox .Cont a:visited{color:#626466;text-decoration:none;}
- .rollBox .Cont a:hover{color:#f00;text-decoration:underline;} .rollBox
- #List1,.rollBox #List2{float:left;} -->
- </style>
- <script language="javascript" type="text/javascript">
- < !-- //--><![CDATA[//><!--
- //图片滚动列表 mengjia 070816
- var Speed = 10; //速度(毫秒)
- var Space = 5; //每次移动(px)
- var PageWidth = 132; //翻页宽度
- var fill = 0; //整体移位
- var MoveLock = false;
- var MoveTimeObj;
- var Comp = 0;
- var AutoPlayObj = null;
- GetObj("List2").innerHTML = GetObj("List1").innerHTML;
- GetObj('ISL_Cont').scrollLeft = fill;
- GetObj("ISL_Cont").onmouseover = function() {
- clearInterval(AutoPlayObj);
- }
- GetObj("ISL_Cont").onmouseout = function() {
- AutoPlay();
- }
- AutoPlay();
- function GetObj(objName) {
- if (document.getElementById) {
- return eval('document.getElementById("' + objName + '")')
- } else {
- return eval('document.all.' + objName)
- }
- }
- function AutoPlay() { //自动滚动
- clearInterval(AutoPlayObj);
- AutoPlayObj = setInterval('ISL_GoDown();ISL_StopDown();', 5000); //间隔时间
- }
- function ISL_GoUp() { //上翻开始
- if (MoveLock) return;
- clearInterval(AutoPlayObj);
- MoveLock = true;
- MoveTimeObj = setInterval('ISL_ScrUp();', Speed);
- }
- function ISL_StopUp() { //上翻停止
- clearInterval(MoveTimeObj);
- if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
- Comp = fill - (GetObj('ISL_Cont').scrollLeft % PageWidth);
- CompScr();
- } else {
- MoveLock = false;
- }
- AutoPlay();
- }
- function ISL_ScrUp() { //上翻动作
- if (GetObj('ISL_Cont').scrollLeft <= 0) {
- GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft + GetObj('List1').offsetWidth
- }
- GetObj('ISL_Cont').scrollLeft -= Space;
- }
- function ISL_GoDown() { //下翻
- clearInterval(MoveTimeObj);
- if (MoveLock) return;
- clearInterval(AutoPlayObj);
- MoveLock = true;
- ISL_ScrDown();
- MoveTimeObj = setInterval('ISL_ScrDown()', Speed);
- }
- function ISL_StopDown() { //下翻停止
- clearInterval(MoveTimeObj);
- if (GetObj('ISL_Cont').scrollLeft % PageWidth - fill != 0) {
- Comp = PageWidth - GetObj('ISL_Cont').scrollLeft % PageWidth + fill;
- CompScr();
- } else {
- MoveLock = false;
- }
- AutoPlay();
- }
- function ISL_ScrDown() { //下翻动作
- if (GetObj('ISL_Cont').scrollLeft >= GetObj('List1').scrollWidth) {
- GetObj('ISL_Cont').scrollLeft = GetObj('ISL_Cont').scrollLeft - GetObj('List1').scrollWidth;
- }
- GetObj('ISL_Cont').scrollLeft += Space;
- }
- function CompScr() {
- var num;
- if (Comp == 0) {
- MoveLock = false;
- return;
- }
- if (Comp < 0) { //上翻
- if (Comp < -Space) {
- Comp += Space;
- num = Space;
- } else {
- num = -Comp;
- Comp = 0;
- }
- GetObj('ISL_Cont').scrollLeft -= num;
- setTimeout('CompScr()', Speed);
- } else { //下翻
- if (Comp > Space) {
- Comp -= Space;
- num = Space;
- } else {
- num = Comp;
- Comp = 0;
- }
- GetObj('ISL_Cont').scrollLeft += num;
- setTimeout('CompScr()', Speed);
- }
- }
- //--><!]]>
- </script>
- </body>
- </html>
来源: http://www.phperz.com/article/17/0712/288194.html