动感超强的JS图片轮换特效_图象特效

来源：动视网责编：小采时间：2020-11-27 20:39:23

动感超强的JS图片轮换特效_图象特效

动感超强的JS图片轮换特效_图象特效: 动感超强的JS图片特效_脚本之家 * { margin:0; padding:0; } body { margin:5px auto; text-align:center; background:#f0f0f0; } img { margin:0; border:0; padding:0; } #eLore { posit

推荐度：

点击下载本文 文档为doc格式

导读动感超强的JS图片轮换特效_图象特效: 动感超强的JS图片特效_脚本之家 * { margin:0; padding:0; } body { margin:5px auto; text-align:center; background:#f0f0f0; } img { margin:0; border:0; padding:0; } #eLore { posit

<?xml version="1.0" encoding="gb2312"?> 
 
<html xmlns="http://www.w3.org/1999/xhtml" lang="gb2312"> 
<head> 
<title>动感超强的JS图片特效_脚本之家</title> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<meta name="generator" content="editplus" /> 
<meta name="author" content="eLore" /> 
<meta name="keywords" content="" /> 
<meta name="description" content="" /> 
<style type="text/css"> 
* { margin:0; padding:0; } 
body { 
 margin:5px auto; 
 text-align:center; 
 background:#f0f0f0; 
} 
img { margin:0; border:0; padding:0; } 
#eLore { 
 position:relative; 
 margin:0 auto; 
 width:800px; height:339px; 
} 
#eLore_wrap { 
 position:relative; 
 margin:0 auto; 
 overflow:hidden; 
 width:800px; height:339px; 
 background:#369; 
} 
#eLore .eLore_img { 
 position:absolute; top:0; 
 width:120px; height:339px; 
 overflow:hidden; 
 font-size:50px; 
 line-height:340px; 
} 
#eLore .eLore_out { 
 position:absolute; top:0; 
 width:120px; height:339px; 
 overflow:hidden; 
 font-size:10px; 
 line-height:340px; 
} 
</style> 
</head> 
<body> 
 
 Loading... 
 
 
//<[CDATA[ 
var eLore_wrap = document.getElementById('eLore_wrap'); 
var aImg = new Array('http://www.gxlcms.com/upload/112_jpg_thumb.jpg','http://www.gxlcms.com/upload/123_jpg_thumb.jpg','http://www.gxlcms.com/upload/112_jpg_thumb.jpg', 'http://www.gxlcms.com/upload/123_jpg_thumb.jpg'); 
var iImg = 0; 
var iA = 0; 
window.onload = function() { 
 eLore_createD(); 
} 
function eLore_createD() { 
 if (iImg==10) { 
 eLore_wrap.innerHTML = ''; 
 iImg = 0; 
 } 
 if (iImg==0) { 
 eLore_wrap.innerHTML += 'H\n'; 
 } 
 /* 
 var sDiv = '' + iImg++ + '\n'; 
 eLore_wrap.innerHTML += sDiv; 
 */ 
 var oDiv = document.createElement('div'); 
 oDiv.className = 'eLore_img'; 
 oDiv.style.right = iImg*80 +'px'; 
 oDiv.style.background = 'url(' + aImg[iA] + ') -720px top no-repeat'; 
 //oDiv.appendChild(document.createTextNode(iImg)); 
 eLore_wrap.appendChild(oDiv); 
 iImg++; 
 eLore_move(); 
} 
function eLore_move(){ 
 var oDiv = eLore_wrap.getElementsByTagName('div'); 
 for (var i=1; i<oDiv.length; i++) { 
 var iBgpx = parseInt(oDiv[i].style.backgroundPosition); 
 if (iBgpx<i*80-760) { 
 var iMovePx = Math.floor((760-i*80+iBgpx)/15); 
 oDiv[i].style.backgroundPosition = iBgpx - iMovePx + 'px top'; 
 } else { 
 oDiv[i].style.backgroundPosition = '-' + (760- i*80) + 'px top'; 
 } 
 } 
 if (iImg<10) { 
 setTimeout('eLore_createD()','50'); 
 } else if (parseInt(oDiv[10].style.backgroundPosition)<40) { 
 setTimeout('eLore_move()','50'); 
 } else { 
 iA = ++iA==aImg.length ? 0 : iA; 
 setTimeout('eLore_createD()','2000'); 
 } 
} 
//]]> 
</ script> 
</body> 
</html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

动感超强的JS图片轮换特效_图象特效

推荐度：

点击下载本文 文档为doc格式

标签：图片特效 js

热门焦点

动感超强的JS图片轮换特效_图象特效

动感超强的JS图片轮换特效_图象特效

动感超强的JS图片轮换特效_图象特效

最新推荐

猜你喜欢

热门推荐