图片转换
来源：互联网 发布：csploit软件电脑版 编辑：程序博客网 时间：2024/04/29 06:50
<!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>gliding and Tween</title>
<style type="text/css">
#container1,#container2{
height:180px;width:490px;position:relative;overflow:hidden;
}
#container1 div,#container2 div{
height:16px; width:16px;font-size:14px; position:absolute; cursor: pointer;margin: 1px;border: 1px solid #FF7300;background-color:#FFFFFF;
color: #FF7300;text-align: center;line-height: 16px;vertical-align:middle;
}
#container1 .on,#container2 .on{
height:17px;width:17px;line-height: 17px; border: 1px solid #FF7300;background-color:#FF7300; font-weight: bold;color: #FFFFFF;
}
/*=============================================================
第3个效果的样式============================*/
.example{
width:525px; height:245px; border:1px solid #DEDEDE; background:#F8F8F8;
}
.example #container3{
height:210px; width:400px;position:relative; overflow:hidden; margin:16px;float:left; z-index:10; background-color:#FFFF33;
display: inline; margin-right:0px;
}
.example img{height:210px; width:400px}
.example #container3 #block3{
height:840px; width:400px; position:absolute;
}
.example #btn3{
height:208px; width:91px; float:right; margin-top:16px; margin-right:4px; position:relative
}
.example #btn3 img{
width:75px; height:45px; cursor: pointer;
}
</style>
<script type="text/javascript">
var Sys = (function(ua){
var s = {};
s.IE = ua.match(/msie ([\d.]+)/)?true:false;
s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false;
s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
return s;
})(navigator.userAgent.toLowerCase());
var $ = function(id){
return document.getElementById(id);
};
var $$ = function(o,e){
return o.getElementsByTagName(e);
};
function Class(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
};
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); }
};
var TweenMove = new Class({
options : {
t : 0, //t,b,c,d,都是缓动的参数
b : 0,
c : 0,
d : 0,
timer : null,
Tween : function(t,b,c,d){return -c * ((t=t/d-1)*t*t*t - 1) + b;}, //缓动公式
howgo : function(){this._obj.style.left = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px"}, //哪些属性来执行缓动公式
Onstart : function(){},
Onmove : function(){},
Onend : function(){}
},
initialize : function(obj,options){
this._obj = obj;
var o ={};
Extend(o,this.options);
Extend(o,options||{});
Extend(this,o);
},
Start : function(){
this.Onstart();
this.Move();
},
Move : function(){
this.howgo();
this.Onmove();
if(this.t<this.d)
{this.t++;this.timer=setTimeout(Bind(this,this.Move),1)}
else
{this.t=0;this.Onend();}
},
Clear : function(){
clearTimeout(this.timer);
}
});
var gliding = new Class({
options : {
type : 1, //1表示是横着的 0表示是束者着的
direction : -1, //-1表示象上或者向左
num : 3, //多少个变化的元素
step : 0, //叫做步长吧 就是图片的宽度或者是高度
Time : 3000, //间隔
Onstart : function(){}
},
initialize : function(container,block,config,options){
this.container = container; //最外层容器
this.count = 1; //记录在第几个变化的图片上
this.timer = null; //是停顿多长时间换下张图片的定时器
var o ={};
Extend(o,this.options);
Extend(o,options||{});
Extend(this,o);
var _self = this;
Extend(config,{howgo:function(){
this._obj.style[_self.type?"left":"top"] = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px";
},Onend:function(){
_self.count++;
if(_self.count == _self.num) _self.count = 0;
_self.Set();
},Onstart: function(){
_self.Onstart();
}});
this.Tweenmove = new TweenMove(block,config);
this.Tweenmove.Start();
},
Set : function(arg){
this.Tweenmove.Clear();
clearTimeout(this.timer); //清除2个定时器 一个是记录图片运动的(上面那个) 一个是控制多长时间后进行下次运动
this.Tweenmove.t = 0;
this.Tweenmove.b = parseInt(CurrentStyle(this.Tweenmove._obj)[this.type ? 'left' : 'top'])||0;
this.Tweenmove.c = this.count*this.step*this.direction - this.Tweenmove.b;
var _self = this;
arg = arg?0:this.Time; //如果是事件触发就直接执行;
this.timer = setTimeout(Bind(this.Tweenmove,this.Tweenmove.Start),arg);
}
});
</script>
</head>
<body style="margin:0px; padding:20px;">
<table width="1200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<div id='container1'>
<table id='block1' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'>
<tr>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></td>
</tr>
<tr>
<td><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></td>
</tr>
<tr>
<td><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></td>
</tr>
<tr>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></td>
</tr>
<tr>
<td><img src="http://pics0.paipaiimg.com/update/20100315/index_c2c_201035_490_180_3.jpg"></td>
</tr>
</table>
<div class="on" style="left:360px;bottom:8px;">1</div>
<div style="left:385px;bottom:8px;">2</div>
<div style="left:410px;bottom:8px;">3</div>
<div style="left:435px;bottom:8px;">4</div>
<div style="left:460px;bottom:8px;">5</div>
</div>
<br>
<div id='container2'>
<table id='block2' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'>
<tr>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></td>
<td><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></td>
<td><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></td>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></td>
<td><img src="http://pics0.paipaiimg.com/update/20100315/index_c2c_201035_490_180_3.jpg"></td>
</tr>
</table>
<div class="on" style="left:360px;bottom:8px;">1</div>
<div style="left:385px;bottom:8px;">2</div>
<div style="left:410px;bottom:8px;">3</div>
<div style="left:435px;bottom:8px;">4</div>
<div style="left:460px;bottom:8px;">5</div>
</div>
</td>
<td valign="top">
<div class="example">
<div id="container3">
<div id="block3">
<div><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></div>
<div><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></div>
<div><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></div>
<div><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></div>
</div>
</div>
<div id="btn3" >
<div style="height:52px;width:91px;"><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div style="height:52px;width:91px;"><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div style="height:52px;width:91px;"><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div style="height:52px;width:91px;"><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div id="btn_block3" style="height:52px; width:91px; position:absolute; z-index:5; top:0px;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/o_cc.gif" style="height:52px; width:91px"></div>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
window.onload = function(){
var divs = $$($("container1"),"div");
var div1s = $$($("container2"),"div");
var div2s = $$($("btn3"),"div");//===================================doem1========================================================================================
var doem1 = new gliding($("container1"),$("block1"),{b:0,c:-180,d:40},{num:5,type:0,step:180,Onstart:function(){
var count = this.count;
Each(divs,function(obj,i){obj.className = "";divs[count].className = "on";});
}});
Each(divs,function(obj,i){
obj.onmouseover = function(){doem1.count=i;doem1.Set(1);};
});
//===================================doem2========================================================================================
var doem2 = new gliding($("container2"),$("block2"),{b:0,c:-490,d:40},{num:5,step:490,Onstart:function(){
var count = this.count;
Each(div1s,function(obj,i){obj.className = "";div1s[count].className = "on";});
}});
Each(div1s,function(obj,i){
obj.onmouseover = function(){doem2.count=i;doem2.Set(1);};
});
//===================================doem3========================================================================================
var doem3_1 = new gliding($("container3"),$("block3"),{b:0,c:-210,d:40},{num:4,type:0,step:210,Onstart:function(){}});
var doem3_2 = new gliding($("btn3",1),$("btn_block3"),{b:0,c:52,d:40,Tween:function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
}},{direction:1,num:4,type:0,step:52});
Each(div2s,function(obj,i){
if(i==4)return;
obj.onmouseover = function(){doem3_1.count=i;doem3_1.Set(1);doem3_2.count=i;doem3_2.Set(1);};
});
}
</script>
</body>
</html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head><title>gliding and Tween</title>
<style type="text/css">
#container1,#container2{
height:180px;width:490px;position:relative;overflow:hidden;
}
#container1 div,#container2 div{
height:16px; width:16px;font-size:14px; position:absolute; cursor: pointer;margin: 1px;border: 1px solid #FF7300;background-color:#FFFFFF;
color: #FF7300;text-align: center;line-height: 16px;vertical-align:middle;
}
#container1 .on,#container2 .on{
height:17px;width:17px;line-height: 17px; border: 1px solid #FF7300;background-color:#FF7300; font-weight: bold;color: #FFFFFF;
}
/*=============================================================
第3个效果的样式============================*/
.example{
width:525px; height:245px; border:1px solid #DEDEDE; background:#F8F8F8;
}
.example #container3{
height:210px; width:400px;position:relative; overflow:hidden; margin:16px;float:left; z-index:10; background-color:#FFFF33;
display: inline; margin-right:0px;
}
.example img{height:210px; width:400px}
.example #container3 #block3{
height:840px; width:400px; position:absolute;
}
.example #btn3{
height:208px; width:91px; float:right; margin-top:16px; margin-right:4px; position:relative
}
.example #btn3 img{
width:75px; height:45px; cursor: pointer;
}
</style>
<script type="text/javascript">
var Sys = (function(ua){
var s = {};
s.IE = ua.match(/msie ([\d.]+)/)?true:false;
s.Firefox = ua.match(/firefox\/([\d.]+)/)?true:false;
s.Chrome = ua.match(/chrome\/([\d.]+)/)?true:false;
s.IE6 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 6))?true:false;
s.IE7 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 7))?true:false;
s.IE8 = (s.IE&&([/MSIE (\d)\.0/i.exec(navigator.userAgent)][0][1] == 8))?true:false;
return s;
})(navigator.userAgent.toLowerCase());
var $ = function(id){
return document.getElementById(id);
};
var $$ = function(o,e){
return o.getElementsByTagName(e);
};
function Class(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};
_class.prototype = properties;
return _class;
};
var Bind = function(object, fun) {
var args = Array.prototype.slice.call(arguments).slice(2);
return function() {
return fun.apply(object, args);
}
};
var Extend = function(destination, source){
for (var property in source) {
destination[property] = source[property];
}
};
var CurrentStyle = function(element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null);
};
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); }
};
var TweenMove = new Class({
options : {
t : 0, //t,b,c,d,都是缓动的参数
b : 0,
c : 0,
d : 0,
timer : null,
Tween : function(t,b,c,d){return -c * ((t=t/d-1)*t*t*t - 1) + b;}, //缓动公式
howgo : function(){this._obj.style.left = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px"}, //哪些属性来执行缓动公式
Onstart : function(){},
Onmove : function(){},
Onend : function(){}
},
initialize : function(obj,options){
this._obj = obj;
var o ={};
Extend(o,this.options);
Extend(o,options||{});
Extend(this,o);
},
Start : function(){
this.Onstart();
this.Move();
},
Move : function(){
this.howgo();
this.Onmove();
if(this.t<this.d)
{this.t++;this.timer=setTimeout(Bind(this,this.Move),1)}
else
{this.t=0;this.Onend();}
},
Clear : function(){
clearTimeout(this.timer);
}
});
var gliding = new Class({
options : {
type : 1, //1表示是横着的 0表示是束者着的
direction : -1, //-1表示象上或者向左
num : 3, //多少个变化的元素
step : 0, //叫做步长吧 就是图片的宽度或者是高度
Time : 3000, //间隔
Onstart : function(){}
},
initialize : function(container,block,config,options){
this.container = container; //最外层容器
this.count = 1; //记录在第几个变化的图片上
this.timer = null; //是停顿多长时间换下张图片的定时器
var o ={};
Extend(o,this.options);
Extend(o,options||{});
Extend(this,o);
var _self = this;
Extend(config,{howgo:function(){
this._obj.style[_self.type?"left":"top"] = Math.round(this.Tween(this.t,this.b,this.c,this.d)) + "px";
},Onend:function(){
_self.count++;
if(_self.count == _self.num) _self.count = 0;
_self.Set();
},Onstart: function(){
_self.Onstart();
}});
this.Tweenmove = new TweenMove(block,config);
this.Tweenmove.Start();
},
Set : function(arg){
this.Tweenmove.Clear();
clearTimeout(this.timer); //清除2个定时器 一个是记录图片运动的(上面那个) 一个是控制多长时间后进行下次运动
this.Tweenmove.t = 0;
this.Tweenmove.b = parseInt(CurrentStyle(this.Tweenmove._obj)[this.type ? 'left' : 'top'])||0;
this.Tweenmove.c = this.count*this.step*this.direction - this.Tweenmove.b;
var _self = this;
arg = arg?0:this.Time; //如果是事件触发就直接执行;
this.timer = setTimeout(Bind(this.Tweenmove,this.Tweenmove.Start),arg);
}
});
</script>
</head>
<body style="margin:0px; padding:20px;">
<table width="1200" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="600">
<div id='container1'>
<table id='block1' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'>
<tr>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></td>
</tr>
<tr>
<td><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></td>
</tr>
<tr>
<td><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></td>
</tr>
<tr>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></td>
</tr>
<tr>
<td><img src="http://pics0.paipaiimg.com/update/20100315/index_c2c_201035_490_180_3.jpg"></td>
</tr>
</table>
<div class="on" style="left:360px;bottom:8px;">1</div>
<div style="left:385px;bottom:8px;">2</div>
<div style="left:410px;bottom:8px;">3</div>
<div style="left:435px;bottom:8px;">4</div>
<div style="left:460px;bottom:8px;">5</div>
</div>
<br>
<div id='container2'>
<table id='block2' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'>
<tr>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></td>
<td><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></td>
<td><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></td>
<td><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></td>
<td><img src="http://pics0.paipaiimg.com/update/20100315/index_c2c_201035_490_180_3.jpg"></td>
</tr>
</table>
<div class="on" style="left:360px;bottom:8px;">1</div>
<div style="left:385px;bottom:8px;">2</div>
<div style="left:410px;bottom:8px;">3</div>
<div style="left:435px;bottom:8px;">4</div>
<div style="left:460px;bottom:8px;">5</div>
</div>
</td>
<td valign="top">
<div class="example">
<div id="container3">
<div id="block3">
<div><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg"></div>
<div><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg"></div>
<div><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg"></div>
<div><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg"></div>
</div>
</div>
<div id="btn3" >
<div style="height:52px;width:91px;"><img src="http://pics1.paipaiimg.com/update/20100317/index_400_189_0318.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div style="height:52px;width:91px;"><img src="http://pics3.paipaiimg.com/update/20100311/index_c2c_400_0312.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div style="height:52px;width:91px;"><img src="http://pics2.paipaiimg.com/update/20100317/index_0317b_400.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div style="height:52px;width:91px;"><img src="http://pics1.paipaiimg.com/update/20100317/index_0317_02.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
<div id="btn_block3" style="height:52px; width:91px; position:absolute; z-index:5; top:0px;"><img src="http://images.cnblogs.com/cnblogs_com/wtcsy/240015/o_cc.gif" style="height:52px; width:91px"></div>
</div>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
window.onload = function(){
var divs = $$($("container1"),"div");
var div1s = $$($("container2"),"div");
var div2s = $$($("btn3"),"div");//===================================doem1========================================================================================
var doem1 = new gliding($("container1"),$("block1"),{b:0,c:-180,d:40},{num:5,type:0,step:180,Onstart:function(){
var count = this.count;
Each(divs,function(obj,i){obj.className = "";divs[count].className = "on";});
}});
Each(divs,function(obj,i){
obj.onmouseover = function(){doem1.count=i;doem1.Set(1);};
});
//===================================doem2========================================================================================
var doem2 = new gliding($("container2"),$("block2"),{b:0,c:-490,d:40},{num:5,step:490,Onstart:function(){
var count = this.count;
Each(div1s,function(obj,i){obj.className = "";div1s[count].className = "on";});
}});
Each(div1s,function(obj,i){
obj.onmouseover = function(){doem2.count=i;doem2.Set(1);};
});
//===================================doem3========================================================================================
var doem3_1 = new gliding($("container3"),$("block3"),{b:0,c:-210,d:40},{num:4,type:0,step:210,Onstart:function(){}});
var doem3_2 = new gliding($("btn3",1),$("btn_block3"),{b:0,c:52,d:40,Tween:function(t,b,c,d,a,p){
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;
if (!a || a < Math.abs(c)) { a=c; var s=p/4; }
else var s = p/(2*Math.PI) * Math.asin (c/a);
return (a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b);
}},{direction:1,num:4,type:0,step:52});
Each(div2s,function(obj,i){
if(i==4)return;
obj.onmouseover = function(){doem3_1.count=i;doem3_1.Set(1);doem3_2.count=i;doem3_2.Set(1);};
});
}
</script>
</body>
</html>
- 图片转换
- 图片转换
- 转换图片
- 图片转换
- 图片转换，字符串，字符串转换图片
- 图片转换成灰色图片
- 图片类型转换
- 动态转换图片
- 图片转换代码
- 图片转换成SVG
- 图片转换2进制
- 转换图片到pdf
- 图片缩放与转换
- 图片类型转换
- ppm格式图片转换
- c# 图片转换
- 文本转换成图片
- 图片缩放与转换
- 表单提交
- 一些vc的基本知识,创建应用实例的步骤
- 用Java读取INI文件(带section的)----错误订正
- 最全的MYSQL备份方法
- new Option及用法
- 图片转换
- VC读写INI文件
- objective c学习：协议（protocol）
- SOA的流程完整性（包括交易、信息和交互完整性）
- JS中面向对象编程
- 分页
- MYSQL计划任务介绍
- ExpendableListView(可展开的列表组件)笔记
- ruby入门_类
