js 几款图片切换 特效

最新推荐文章于 2023-03-09 15:14:38 发布
最新推荐文章于 2023-03-09 15:14:38 发布
阅读量234 收藏
点赞数
分类专栏： javascript学习 文章标签： C++ C# C IE Chrome
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jisuanjiyou/article/details/83724853
版权 


<!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</title>
<style type="text/css">
#container1,#container2{
height:168px;width:408px;position:relative;overflow:hidden; border:1px solid #999999;
}
#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{
    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 #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;
}
/*=============================================================第4个效果的样式============================*/
#container4{
height:447px; width:240px;border-left:4px solid #797979;border-right:4px solid #797979; overflow:hidden; position:relative
}
#btn4{
width:153px; height:28px; position:absolute; z-index:5; left:43px; bottom:1px;
}
#btn4_block{
height:24px;width:39px; margin:2px 0px 0px 8px; background-image:url(http://hi.csdn.net/attachment/200912/13/79043_1260689202c9mO.gif); position:absolute; z-index:30;
}
</style>

<script type="text/javascript">
	document.all&&document.execCommand("BackgroundImageCache", false, true); 
	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);
		}
	};
	function Each(list, fun){
		for (var i = 0, len = list.length; i < len; i++) {fun(list[i], i); }
	};	
	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 wt = {
		elm: null,
		$ : function(id,p){
			var arr = id.split(" ");
			this.elm = arr.length == 1?document.getElementById(id):document.getElementById(arr[0]).getElementsByTagName(arr[1]);
			return p?this.elm:wt;
		},
		$$ : function(o,v,p){
			this.elm = v?o.getElementsByTagName(v):o;
			return p?this.elm:wt;
		},
		Extend : function(destination, source){
			for (var property in source) {
				destination[property] = source[property];
			}
		},
		CurrentStyle : function(element){
			return element.currentStyle || document.defaultView.getComputedStyle(element, null);
		}
	};
//===================================================================================================以上都是公共的方法,下面才是程序内容==========
	var gliding = new Class({
		options :{
			type      : 1,                            //1表示是横着的 0表示是束者着的
			direction : -1,                           //-1表示象上或者向左
			num       : 3,                            //多少个变化的对象 
			step      : 0,                            //叫做步长吧 就是图片的宽度或者是高度
			Time      : 2000,                         //间隔
			Onstart   : function(){}               //回掉 应该还有  Onend Onmove 现在没兴趣在添加
		},
		initialize : function(container,block,config,options){
			this.container = container;         //最外层容器
			this.count = 1;                     //记录在第几个变化的图片上	
			this.timer = null;                  //是停顿多长时间换下张图片的定时器	
			wt.Extend(this.options,options||{});
			wt.Extend(this,this.options);
			var _self = this;
			wt.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();
			}});
			delete options;
			this.Tweenmove = new TweenMove(block,config);
			this.Tweenmove.Go()	;								
		},
		Set : function(arg){
			this.Tweenmove.Clear();                        
			clearTimeout(this.timer);	    //清除2个定时器 一个是记录图片运动的(上面那个) 一个是控制多长时间后进行下次运动			
			this.Tweenmove.t = 0;
			this.Tweenmove.b = parseInt(wt.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(_self.Tweenmove,_self.Tweenmove.Go),arg);
		}
	});
//===========================================================================================================================以下是缓动的类==============	
	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;
			wt.Extend(this.options,options||{});
			wt.Extend(this,this.options);
			delete options;
		},
		Go : function(){
			Tweencommand.Start(this).Move(this).End();	
		},
		Clear: function(){
			clearTimeout(this.timer);
		}
	});
//===============================================================================================================================缓动的一些公共方法=========
//因为缓动的对象可能不是一个  但是方法是一样的 就单独写成一个对象了
	var Tweencommand ={
		Start : function(o){
			o.Onstart();
			return this;
		},
		Move  : function(o){
			o.howgo();
			o.Onmove();
			if(o.t<o.d)
			{o.t++;o.timer=setTimeout(function(){Tweencommand.Move(o)},1)}
			else
			this.End(o);
			return this;
		},
		End  : function(o){
			if(!o)return;
			o.Onend();
		}
	};
</script>
</head>
<body style="margin:0px; padding:20px;">
<table width="200" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td >
		<div id='container1'>
		<table id='block' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'>
		<tr>
		<td><img  src="http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093922593.p.gif"></td>
		</tr>
		<tr>
		<td><img  src="http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093747234.p.jpg"></td>
		</tr>
		<tr>
		<td><img  src="http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093508656.p.jpg"></td>
		</tr>
		</table>
		<div class="on" style="left:320px;bottom:8px;">1</div>
		<div style="left:345px;bottom:8px;">2</div>
		<div  style="left:370px;bottom:8px;">3</div>
		</div>
	</td>
    <td>
		<div id='container2'>
		<table id='block2' border='0' cellpadding='0' cellspacing='0' style=' position:absolute;'>
		<tr>
		<td><img  src="http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093922593.p.gif"></td>
		<td><img  src="http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093747234.p.jpg"></td>
		<td><img  src="http://album.hi.csdn.net/app_uploads/wtcsy/20081216/093508656.p.jpg"></td>
		</tr>
		</table>
		<div class="on" style="left:320px;bottom:8px;">1</div>
		<div style="left:345px;bottom:8px;">2</div>
		<div  style="left:370px;bottom:8px;">3</div>
		</div>	
	</td>
  </tr>
</table>
<br>
<table width="200" border="0" cellspacing="10" cellpadding="0">
  <tr>
    <td >
		<div class="example">
			<div id="container3">
				<div id="block3">
					<div><img src="http://hi.csdn.net/attachment/200912/7/79043_1260203628OOjz.jpg"></div>
					<div><img src="http://hi.csdn.net/attachment/200912/7/79043_1260203629WxJd.jpg"></div>
					<div><img src="http://hi.csdn.net/attachment/200912/7/79043_1260203630D34i.jpg"></div>
					<div><img src="http://hi.csdn.net/attachment/200912/7/79043_126020363139kx.jpg"></div>
				</div>
			</div>
			<div id="btn3" >
				<div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043_1260203628OOjz.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
				<div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043_1260203629WxJd.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
				<div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043_1260203630D34i.jpg" style="position:absolute;z-index:10;margin:4px 0px 0px 10px"></div>
				<div style="height:52px;width:91px;"><img src="http://hi.csdn.net/attachment/200912/7/79043_126020363139kx.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://beta.hi.csdn.net/attachment/200912/7/79043_1260205123OxMO.gif" style="height:52px; width:91px"></div>
			</div>
		</div>
	</td>
    <td>
		<div style=" height:8px; width:248px; background-image:url(http://hi.csdn.net/attachment/200912/13/79043_126068953713w1.gif); margin-bottom:-1px; overflow:hidden"></div>
		<div id="container4">
			<table id="block4" width="720" border="0" cellspacing="0" cellpadding="0" style="position: absolute; z-index:3">
			  <tr>
				<td style="width:240px"><img src="http://hi.csdn.net/attachment/200912/13/79043_12606892018MCx.jpg"></td>
				<td style="width:240px"><img src="http://hi.csdn.net/attachment/200912/13/79043_1260689201IZ9E.jpg"></td>
				<td style="width:240px"><img src="http://hi.csdn.net/attachment/200912/13/79043_1260689202Z1mr.jpg"></td>
			  </tr>
			</table>
			<div id='title4' style="width:240px; height:120px; position:absolute;;z-index:5; bottom:30px;"></div>
			<div id="btn4" >
				<div id="btn4_block" usemap="#ss">
				</div>
				<img src="http://hi.csdn.net/attachment/200912/13/79043_1260689202o7Tr.gif" usemap="#tag" border="0">
				<map id ="tag" name="tag">
					<area shape ="rect" coords ="0,0,50,50" style="cursor:pointer" />
					<area shape ="rect" coords ="50,-1,100,49"  style="cursor:pointer" />
					<area shape ="rect" coords ="100,0,150,50" style="cursor:pointer" />
			  </map>
			</div>
		</div>
		<div style=" height:8px; width:248px; background-image:url(http://hi.csdn.net/attachment/200912/13/79043_1260689537Nis5.gif);overflow:hidden"></div>	
	</td>
  </tr>
</table>

<script type="text/javascript">
window.onload = function(){
	var divs  = wt.$("container1 div",1);
	var div1s = wt.$("container2 div",1);
	var div2s = wt.$("btn3 div",1);
//==============================================第一个例子==============================================	
 	var ss = new gliding(wt.$("container1",1),wt.$("block",1),{b:0,c:-168,d:50},{type:0,step:168,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(){ss.count=i;ss.Set(1);};
	});
//==============================================第二个例子==============================================	
	var ss1 = new gliding(wt.$("container2",1),wt.$("block2",1),{b:0,c:-408,d:50},{type:1,step:408,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(){ss1.count=i;ss1.Set(1);};
	});		
//==============================================第三个例子==============================================
	var ss2 = new gliding(wt.$("container3",1),wt.$("block3",1),{b:0,c:-210,d:50},{num:4,type:0,step:210,Onstart:function(){}});
	var ss3 = new gliding(wt.$("btn3",1),wt.$("btn_block3",1),{b:0,c:52,d:50,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(){ss2.count=i;ss2.Set(1);ss3.count=i;ss3.Set(1);};
	});	
//==============================================第四个例子==============================================	
	var areas = wt.$("tag area",1);
	var ph = new gliding(wt.$("container4",1),wt.$("block4",1),{b:0,c:-240,d:50,Tween:function(t,b,c,d){return -c * ((t=t/d-1)*t*t*t - 1) + b;}},{direction:-1,num:3,type:1,step:240});
	var ph1 = new gliding(wt.$("btn4",1),wt.$("btn4_block",1),{b:0,c:50,d:50},{direction:1,num:3,type:1,step:50})
	Each(areas,function(obj,i){
		obj.onmouseover = function(){ph.count=i;ph.Set(1);ph1.count=i;ph1.Set(1);};
	})
}	
</script>
</body>
</html>


jisuanjiyou
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
分享111个JS图片切换特效，总有一款适合您
adendean的博客
02-03 362
js
JS组件系列——图片切换特效：简易抽奖系统
weixin_34391445的博客
03-23 182
前言：前两天在网上找组件，无意中发现了我们儿时游戏机效果的“SlotMachine组件”，浏览一遍下来，勾起了博主小时候满满的回忆。于是下定决定要研究下这么一个东西，不得不再次叹息开源社区的强大，原来这些组件已经被封装得这么好了，使用起来如此简单。下面就让博主带着大家来看看这么一个神奇的组件——SlotMachine吧。 一、组件预览 先来一发简单的效果压压惊 觉得太简单？别急，好戏在后...
js实现图片切换效果
qq_46162047的博客
03-09 2106
JS实现图片切换
js实现20多种图片切换特效
06-04
首先，"js实现20多种图片切换特效"这个标题暗示我们将讨论JavaScript在图像处理方面的强大功能。JavaScript是一种广泛用于网页开发的脚本语言，能够实时更新DOM（文档对象模型）以改变页面内容。在图片切换特效中，...
Three.js碎片化图片切换特效
07-24
总的来说，Three.js碎片化图片切换特效是一个结合了3D图形、粒子动画和JavaScript交互的创新应用，它展示了WebGL和Three.js在网页设计中的强大潜力。通过深入学习和实践，开发者可以创建出更多令人惊叹的3D视觉体验...
Three.js碎片化图片切换特效.zip
最新发布
10-08
【标题】"Three.js碎片化图片切换特效.zip"所涉及的知识点主要集中在Web前端开发领域，特别是关于Three.js库的应用，以及与jQuery和CSS特效的结合。Three.js是一个基于WebGL的JavaScript 3D库，它允许开发者在浏览器...
html.zip_JS图片切换特效
09-21
HTML和JavaScript是网页开发中的基础技术，而"JS图片切换特效"则是利用JavaScript实现的一种增强用户体验的常见功能。在网页设计中，动态的图片切换效果能够吸引用户注意力，提升网站的交互性和视觉吸引力。本资源...
JS实现图片切换特效
10-15
在JavaScript中实现图片切换特效是一项常见的任务，尤其在网页设计和开发中。下面将详细讲解这个过程中的关键知识点，以及如何使用JS实现图片切换。 首先，我们要了解的是`window.onload`事件。这是一个JavaScript...
js特效(大全),图片切换JS 图片放大JS
05-19
本大全包括最新的、常用的JS，本人传上来方便大家使用.
js动画效果图片切换
08-14
js动画效果图片切换,只需要准备若干幅大小相同的图片，在页面中引用RevealTrans.js,然后把RevealTrans.htm中对应代码粘到页面中你要放图片的地方，代码中图片的路径改成你自己的，是不是很方便呢
各种图片切换、滚动特效
11-15
整理的各种图片滚动、切换源代码；很全的，可直接看到效果；可供学习和做web开发的供参考
图片切换特效
02-19
图片切换特效
图片切换效果
12-22
flash效果 图片切换效果大图切换，切换实例 data.xml 可以添加多张图片
17种js图片切换特效
gjpdeyx的专栏
06-23 1878
<br />17种js图片切换特效，包含：遮帘(纵向、横向)、遮帘(纵向、横向)、飞行过渡、光圈过渡、渐变曝光、像素溶解、挤压过渡、百叶窗特效等<br /> <DIV align=center><br /> <P align=center><IMG id=box style="FILTER: progid:DXImageTransform.Microsoft.Blinds(Bands=10,direction=up); WIDTH: 500px; HEIGHT: 400px" height=40
分享117个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-04 619
JS
分享113个图片切换JS特效，总有一款适合您
zy0412326的专栏
02-03 1359
js特效
图片左右切换效果
qq_53816315的博客
03-26 937
刚学到js，就想着用js做一点特效，看到element-ui里面的这个图片切换特效就非常有意思，然后自己就尝试着做了一下； *{ margin: 0;padding: 0;list-style: none; } .box{ width: 900px;height: 360px; } .box ul{ width: 900px;height: 360px; display: grid; grid-template-columns: repeat(3...
网站设计之常见简单实用的JavaScript特效总结（上篇）1
08-03
1.鼠标悬停图片切换查看器 2.鼠标移动图片放大 3.鼠标移动切换内容 4.贵财下拉菜单案例 5.JS图片放大镜功能-类似淘宝 6.下一页翻页跳转功能 3.di

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值