发布于 2017-05-27 07:07:20 | 158 次阅读 | 评论: 0 | 来源: 网友投递
这里有新鲜出炉的Javascript教程，程序狗速度看过来！
JavaScript客户端脚本语言
Javascript 是一种由Netscape的LiveScript发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言，主要目的是为了解决服务器端语言，比如Perl，遗留的速度问题，为客户提供更流畅的浏览效果。
话不多说，请看代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>旋转木马特效</title>
<style type="text/css">
*{margin: 0;padding: 0;list-style:none;}
#demo{width:1200px;margin:100px auto 0;}
#innerht{width:1200px;height:500px;position:relative;}
ul li{position:absolute;top:0;left:0;z-index:1;}
ul li img{width:100%;}
#corrow{position:absolute;width:100%;top:50%;opacity:0;z-index:99;}
#btn_lef,#btn_rig{position:absolute;height:112px;width:76px;top:50%;margin-top:-56px;}
#btn_lef{left:0;}
#btn_rig{right:0;}
</style>
</head>
<body>
<div id="demo">
<div id="innerht">
<ul>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=dac666f84f6ad05ec026ad655ea0f159" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=89c2213f2b614db88b5724b82dafc02a" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=e7969486909c076abf795995bdc3da54" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=b404e53a3f4dd7e97438693e8e2d4082" alt=""></a></li>
<li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" ><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=ed309dded163d172b53154b2046eb1a2" alt=""></a></li>
</ul>
<div id="corrow">
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="btn_lef"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=206927b03b97b194bc04cdcaf0e10a33" height="112" width="76" alt=""></a>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="btn_rig"><img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=0e84253cccdf667e293522a0a107eeec" height="112" width="76" alt=""></a>
</div>
</div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
//每张图片对应的样式
var tempArr = [
{
"width":400,
"top":20,
"left":50,
"opacity":0.2,
"zIndex":2
},
{
"width":600,
"top":70,
"left":0,
"opacity":0.8,
"zIndex":3
},
{
"width":800,
"top":100,
"left":200,
"opacity":1,
"zIndex":4
},
{
"width":600,
"top":70,
"left":600,
"opacity":0.8,
"zIndex":3
},
{
"width":400,
"top":20,
"left":750,
"opacity":0.2,
"zIndex":2
}
];
// 设置限流函数
var onOff = true ;
// 获取对象
var left = $("btn_lef"),right = $("btn_rig"),innerht = $("innerht"),ul = innerht.children[0],lis = ul.children,arrow = $("corrow");
// 给每个li添加样式
addStyle();
// 大盒子的hover事件
innerht.onmouseover = function(){
animate(arrow,{"opacity":1});
};
innerht.onmouseout = function(){
animate(arrow,{"opacity":0});
};
// 右箭头点击事件
right.onclick = function(){
if( onOff ){
onOff = false;
var atop = tempArr.shift();
tempArr.push( atop );
addStyle();
};
};
// 左箭头点击事件
left.onclick = function(){
if( onOff ){
onOff = false;
var apop = tempArr.pop();
tempArr.unshift( apop );
addStyle();
};
};
function addStyle(){
for( i = 0 ; i < lis.length ; i++ ){
animate(lis[i],tempArr[i],function(){
onOff = true;
console.log(onOff);
});
};
};
// 设置animate函数
function animate(obj,json,fn){
clearInterval(obj.timer);
obj.timer = setInterval(function(){
var flog = true ;
for( k in json ){
if( k === "zIndex" ){
obj.style[k] = json[k];
}else if( k === "opacity" ){
var leader = getStyle(obj,k) * 100 ;
var target = json[k] * 100 ;
var step = ( target - leader ) / 10 ;
step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ;
// 浮点数判断相等时是不准确的
// 所以不能写leader = ( leader + step )/100;
// 保持leader和target都是整数，便于下面判断相等
leader = leader + step ;
obj.style[k] = leader / 100;
}else{
var leader = parseInt( getStyle(obj,k) ) || 0 ;
var target = json[k];
var step = ( target - leader ) / 10 ;
step = step > 0 ? Math.ceil( step ) : Math.floor( step ) ;
leader = leader + step ;
obj.style[k] = leader + "px";
};
if( leader !== target ){
flog = false ;
};
};
console.log(flog);
if( flog ){
clearInterval( obj.timer );
if( fn ){
fn();
};
};
}, 15);
};
// 设置getStyle函数，获取计算后的样式
function getStyle(obj,attr){
if( window.getComputedStyle ){
return window.getComputedStyle(obj,null)[attr];
}else{
return obj.currentStyle[attr];
};
};
})(window)
</script>
</html>以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持phperz！