发布于 2017-02-17 16:25:49 | 22 次阅读 | 评论: 0 | 来源: 网友投递

这里有新鲜出炉的Javascript教程,程序狗速度看过来!

JavaScript客户端脚本语言

Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。


这篇文章主要介绍了原生javascript实现图片无缝滚动效果的相关资料,需要的朋友可以参考下

图片水平无缝滚动效果在大量的网站都有应用,特别是一些企业网站在展示产品的时候,因为是动态效果,所以能够给网站增色不少,相比静态图片展示更能够吸引用户的注意力,下面就通过实例代码介绍一下如何实现此效果。
代码如下:


<html>
<head>
<meta charset="gb2312">
<title>phperz</title>
<style type="text/css"> 
#demo{ 
 background:#FFF; 
 overflow:hidden; 
 border:1px dashed #CCC; 
 width:500px; 
} 
#indemo{
 float:left;
 width:2000px;
} 
#indemo a{
 width:100px;
 height:100px;
 float:left;
 background-color:blue;
 margin-left:5px;
 text-align:center;
 line-height:100px;
 color:red;
 text-decoration:none;
}
#demo1{float:left;} 
#demo2{float:left;} 
</style>
<script type="text/javascript"> 
window.onload=function(){
 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>
</head>
<body>
<div id="demo">
 <div id="indemo">
 <div id="demo1"> 
  <a href="#">phperz一</a> 
  <a href="#">phperz二</a> 
  <a href="#">phperz三</a> 
  <a href="#">phperz四</a> 
  <a href="#">phperz五</a> 
  <a href="#">phperz六</a> 
 </div>
 <div id="demo2"></div>
 </div>

希望对大家学习javascript程序设计有所帮助。



相关阅读 :
原生javascript实现图片无缝滚动效果
基于javascript实现文字无缝滚动效果
Javascript 实现图片无缝滚动
JavaScript代码实现图片循环滚动效果
原生javascript实现图片弹窗交互效果
原生javascript实现图片滚动、延时加载功能
使用Javascript简单实现图片无缝滚动
原生javascript实现图片放大镜效果
javascript实现平滑无缝滚动
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Javascript实现图片轮播效果(一)让图片跳动起来
基于javascript实现图片左右切换效果
最新网友评论  共有(0)条评论 发布评论 返回顶部

Copyright © 2007-2017 PHPERZ.COM All Rights Reserved   冀ICP备14009818号  版权声明  广告服务