Js图片浏览器
来源：互联网 发布：快速排序算法实现代码 编辑：程序博客网 时间：2024/05/19 17:23
<!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>
<title>Js图片浏览器</title>
</head>
<body>
<button onclick="Slider.next()">play</button>
<script type="text/javascript">
<!--
Slider = {
isIE : true,
m_imageSource : [],
m_selIdx : 0,
m_direction : 1,
m_mainviewer : null,
m_delayTimer : null,
m_delayTimer1 : null,
m_curObj : null,
m_tarObj : null,
m_inited : false,
init : function(id, w, h, w1, h1, p, t, s, source){
this.isIE = document.all ? true : false;
this.canvasWidth = w;
this.canvasHeight = h;
this.imageWidth = w1;
this.imageHeight = h1;
this.m_percent = p;
this.m_top = t;
this.m_spaceWidth = s;
this.writeCanvas(id);
for(var i=0;i<source.length;i++)
{
this.container.innerHTML += '<img src="'+source[i]+'" border="0" style="'+(this.isIE?'filter:alpha(opacity=50)':'opacity:0.5')+';width:'+w1+'px;height:'+h1+'px;position:absolute;left:'+(i*w1+i*this.m_spaceWidth)+'px;top:'+this.m_top+'px;" index="'+i+'"/>';
}
this.m_mainviewer = this.container.firstChild.cloneNode(true);
this.bind();
this.start();
},
writeCanvas : function(id)
{
document.write('<div id="'+id+'" style="width:'+this.canvasWidth+'px;height:'+this.canvasHeight+'px;position:relative;overflow:hidden;background-color:black"></div>');
this.container = document.getElementById(id);
},
bind : function(obj, evt, fun){
var obj = this.container;
for(var i=0;i<obj.childNodes.length;i++)
{
this.attachEvent(this.container.childNodes[i], "mouseover", this.mouseover);
this.attachEvent(this.container.childNodes[i], "mouseout" , this.mouseout);
this.attachEvent(this.container.childNodes[i], "click" , this.click);
}
},
attachEvent : function(obj, evt, fun){
if (Slider.isIE)
{
obj.attachEvent("on"+evt, fun)
}else
{
obj.addEventListener(evt, fun, false);
}
},
mouseover : function(e)
{
if(!e)e=window.event;
var obj = e.srcElement || e.target;
if (Slider.isIE)
{
obj.style.filter = "alpha(opacity=80)";
}else{
obj.style.opacity = "0.8";
}
},
mouseout : function(e)
{
if(!e)e=window.event;
var obj = e.srcElement || e.target;
if (Slider.isIE)
{
obj.style.filter = "alpha(opacity=50)";
}else{
obj.style.opacity = "0.5";
}
},
click : function(e)
{
if(!e)e=window.event;
var obj = e.srcElement || e.target;
var mobj = Slider.m_mainviewer;
Slider.m_selIdx = obj.getAttribute("index");
Slider.m_curObj = Slider.m_mainviewer;
Slider.m_tarObj = obj;
Slider.m_delayTimer = Slider.fadeIn(200,5);
},
start : function(){
var obj = this.m_mainviewer;
if (Slider.isIE)
{
obj.style.filter = "alpha(opacity=100)";
}else{
obj.style.opacity = "1";
}
this.container.appendChild(this.m_mainviewer);
this.m_mainviewer.style.width = parseInt(this.m_mainviewer.style.width)*(1+this.m_percent)+"px";
this.m_mainviewer.style.height = parseInt(this.m_mainviewer.style.height)*(1+this.m_percent)+"px";
this.m_curObj = this.container.childNodes[this.m_selIdx];
this.m_tarObj = this.m_mainviewer;
if(this.m_delayTimer)clearInterval(Slider.m_delayTimer);
this.m_delayTimer = this.fadeIn(200,5);
},
next : function(){
var obj = this.container;
var mobj = this.m_mainviewer;
if(this.m_selIdx == obj.childNodes.length-2)
{
this.m_direction = -1;
}
if(this.m_selIdx == 0)
{
this.m_direction = 1;
}
Slider.m_curObj = mobj;
Slider.m_tarObj = obj.childNodes[this.m_selIdx];
this.m_delayTimer = this.fadeIn(200,5);
mobj.src = obj.childNodes[this.m_selIdx].src;
if(this.m_direction==-1){
this.m_selIdx --;
}else{
this.m_selIdx ++;
}
},
fadeIn : function(aa, ab){
var obj = this.container;
with(this.m_curObj.style){var t1 = parseInt(left);var t3 = parseInt(width);var t4 = parseInt(height);var t5 = parseInt(top);}
if (Slider.m_inited)
{
var k1 = (t1 - (this.canvasWidth- parseInt(this.m_curObj.style.width))/2)/ab;
var k3 = (t3-parseInt(this.m_tarObj.style.width))/ab;
var k4 = (t4-parseInt(this.m_tarObj.style.height))/ab;
var k5 = (t5 - parseInt(this.m_tarObj.style.top))/ab;
}else{
var k1 = (t1 - (this.canvasWidth- this.imageWidth*(1+this.m_percent))/2)/ab;
var k3 = (t3- this.imageWidth*(1+this.m_percent))/ab;
var k4 = (t4 - this.imageHeight*(1+this.m_percent))/ab;
var k5 = (this.imageHeight * this.m_percent/2)/ab;
}
var mobj = this.m_mainviewer;
return setInterval(function(){if(ab<1){
clearInterval(Slider.m_delayTimer);
if(Slider.m_inited){
if (!Slider.m_fadein)
{
Slider.m_curObj = obj.childNodes[Slider.m_selIdx];
Slider.m_tarObj = mobj;
mobj.src = obj.childNodes[Slider.m_selIdx].src;
Slider.m_fadein = true;
Slider.m_inited = false;
Slider.m_delayTimer = Slider.fadeIn(200,10);
}else{
Slider.m_fadein = false;
Slider.m_inited = true;
}
}
Slider.m_inited = true;
return;
}
ab--;t1-=k1;t3-=k3;t4-=k4;t5-=k5;
if (Slider.m_fadein)
{
for(var i=0;i<obj.childNodes.length-1;i++)
{
obj.childNodes[i].style.left = (parseInt(t1) + (Slider.imageWidth + Slider.m_spaceWidth)*(i-Slider.m_selIdx))+"px";
}
}
with(mobj.style){left = t1 + "px";top = t5 + "px";width = t3 + "px";height = t4 + "px";}
}
,aa/ab)
}
}
Slider.init('aaa',400,600,180,100, 0.5, 200, 20, [
"http://www.codefans.net/jscss/demoimg/wall1.jpg",
"http://www.codefans.net/jscss/demoimg/wall2.jpg",
"http://www.codefans.net/jscss/demoimg/wall3.jpg",
"http://www.codefans.net/jscss/demoimg/wall4.jpg",
"http://www.codefans.net/jscss/demoimg/wall5.jpg",
"http://www.codefans.net/jscss/demoimg/wall6.jpg",
"http://www.codefans.net/jscss/demoimg/wall7.jpg",
"http://www.codefans.net/jscss/demoimg/wall8.jpg"
]);
//-->
</script>
</body>
</html>
- js 图片切换浏览器
- Js图片浏览器
- js实现的图片浏览器
- js实现图片在浏览器进行预览
- js获取浏览器高度和宽度值(多浏览器) [图片]
- 用ajax清除浏览器缓存的js、css、图片等
- 用ajax清除浏览器缓存的js、css、图片等
- js 判断图片是否存在 解决方案[兼容多浏览器]
- js 判断图片是否存在 兼容多浏览器
- js遍历本地所有图片文件，显示在浏览器中
- JS预览图像将本地图片显示到浏览器上
- 兼容浏览器图片上传本地预览功能js脚本
- 适应各浏览器图片裁剪无刷新上传js插件
- JS上传图片且在线预览，修改浏览器兼容性问题
- 适应各浏览器图片裁剪无刷新上传js插件
- js 获取浏览器的大小以及图片闪烁显示
- 浏览器图片\文件上传到服务器 ajaxfileupload.js使用实例
- js屏蔽浏览器默认的拖动图片等扩展操作
- web.xml常用元素
- 盘点美国7大团购网站商业模式
- Linux常用的系统管理命令
- DNF.CF牛B辅助，会让你每天惊喜不断，我们期待你的到来。http://wgz.5d6d.com
- 代码生成器工具之四
- Js图片浏览器
- 代码生成器工具之五
- 代码生成器工具之六
- PHP创建数据库与表实例
- 数据结构(C++)中C++常用语法
- 问题思考
- 遍历页面所有TextBox控件并给它赋值为string.Empty
- 淘宝网图片预览效果
- 后3G时代的LTE技术介绍
