hduyou
- 浏览: 23370 次
- 性别:
- 来自: 杭州
-
最近访客 更多访客>>
最新评论
-
suiye007：
其实重点就是那张图啊！
js 关于鼠标在页面中坐标显示的种种 -
webee：
看的眼花啊！实际只要知道这些属性就可以了，用的时候测试一两次就 ...
js 关于鼠标在页面中坐标显示的种种 -
hduyou：
<div class="quote_title ...
js 关于鼠标在页面中坐标显示的种种 -
ksqqxq：
ranbo 写道还有第三种
if(){
}else if(){ ...
js 两种方式进行字符匹配 -
libmw：
很好，搜藏了
js 关于鼠标在页面中坐标显示的种种
<!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>
分享到：
发表评论
-
屏蔽表单修改
2010-11-17 14:22 6551 通过js实现-onfocus="this.blu ... -
css 分页效果
2010-11-16 14:47 810http://www.jscode.cn/jave_page/ ... -
全景展示
2010-11-15 12:29 714http://slide.mil.news.sina.com. ... -
js 动画
2010-11-11 18:04 745http://mojo-js.appspot.com/cont ... -
css+java 侧面导航栏
2010-10-25 17:11 1707<!DOCTYPE html PUBLIC &quo ... -
js 关于鼠标在页面中坐标显示的种种
2010-09-29 20:32 980首先先看一段代码 <html> <he ... -
js 牛人的博客 学习的好地方
2010-09-27 23:35 600http://www.cnblogs.com/cloudgam ... -
js 图片切换效果
2010-09-27 23:33 827//代码一 <!DOCTYPE html PUBL ... -
js 107个常用javascript语句
2010-09-27 08:13 6481. document.write( " &qu ... -
js 判断浏览器类型以及操作系统
2010-09-26 23:51 1057var sUserAgent = navigator.us ... -
js 一些正则表达式（转载）
2010-09-26 23:39 745//1 参考网址 ：http://sharejs.co ... -
js 自定范围产生随机数字
2010-09-26 23:36 861function selectFrom(iFirstV ... -
js 两种方式进行字符匹配
2010-09-26 23:32 933第一种方式 replace Function.prot ... -
js 简单代码 有个疑问 请高手解答
2010-09-25 23:45 746var aNumbers=new Array(); va ... -
js 杨辉三角
2010-09-25 22:20 1363function Combination(m,n){ ... -
js 减少全局变量污染的方法
2010-09-24 19:03 1175//最小化使用全局变量的一个方法是在你的应用中只创建唯一一 ... -
js replace使用
2010-09-24 16:42 833Function.prototype.method=fun ... -
js 方法扩展
2010-09-24 16:06 673//Object.prototype是可以扩充的，同样Ar ... -
js 判断数组以及数字
2010-09-24 14:26 1942判断数组 var a=['you','love','fan ... -
js学习 伪类及原型
2010-09-24 00:54 738构造伪类来继承Mammal，通过定义它的constructor ...
相关推荐
【标题】"Three.js碎片化图片切换特效.zip"所涉及的知识点主要集中在Web前端开发领域，特别是关于Three.js库的应用，以及与jQuery和CSS特效的结合。Three.js是一个基于WebGL的JavaScript 3D库，它允许开发者在浏览器...
JavaScript图片切换特效是一种常见的网页动态效果，用于展示一组图片并以吸引人的动画方式在它们之间进行切换。在网页设计中，这种特效可以增加用户体验，使网站更具吸引力。本篇文章将详细探讨六种JavaScript图片...
本篇文章将深入探讨如何利用jQuery实现一款2011年备受推崇的图片切换特效。 首先，我们要了解jQuery的基本用法。jQuery的核心在于它的选择器语法，它使得DOM元素的选取变得简单而直观。例如，`$("#myImg")`会选择ID...
本资源包“多种风格js+flash图片切换特效”提供了结合JavaScript（JS）和Flash技术实现的不同类型的图片切换效果，适用于那些希望为网站增添互动性和动态感的设计者。 首先，JavaScript（JS）是一种广泛使用的...
本文将围绕“js图片切换特效”这一主题，深入探讨相关的JavaScript技术，以及如何通过源码实现这样的功能。 首先，我们需要理解JavaScript的基础。这是一种客户端脚本语言，可以直接在用户的浏览器上运行，无需...
总结来说，实现"js仿英雄杀图片切换特效"需要掌握JavaScript的DOM操作、事件处理、动画制作以及兼容性处理等技术。通过巧妙地组合和运用这些技术，我们可以创造出引人入胜的用户体验，让网页更加生动有趣。在实践中...
"js特效(大全),图片切换JS 图片放大JS"这个压缩包文件显然包含了用于创建动态图像展示的JavaScript代码示例，这对于我们理解JavaScript在网页中的应用至关重要。 首先，让我们深入了解一下“图片切换JS”。图片切换...
本文将深入探讨标题"10种漂亮的图片切换特效JS"所涵盖的知识点，并结合描述中的“非常炫目的图片切换特效”来讲解这些特效如何为网站增添魅力。 首先，我们要理解JS图片切换特效的基本原理。它通常是通过改变HTML...
本文将深入探讨“图片切换特效”这一主题，包括其原理、实现方式以及如何利用JavaScript来创建js图片轮播效果。 一、图片切换特效原理 图片切换特效的基本思想是通过动态改变图片显示，使用户感觉图片在平滑地过渡...
【JavaScript图片切换特效详解】 在Web开发中，动态图片切换是一种常见的交互效果，可以提升用户体验。"Js版迅雷图片切换特效"就是一种利用JavaScript实现的类似迅雷客户端的图片轮播功能。本文将深入探讨如何使用...
在实现图片切换特效时，JavaScript通常会结合HTML和CSS一起工作。HTML（超文本标记语言）用于创建网页结构，而CSS（层叠样式表）则用来定义页面的布局和样式。在本案例中，HTML可能包含一个图片容器和一组图片元素，...
在IT行业中，图片切换特效是网页设计中常见且重要的元素，尤其在展示产品、广告轮播或者相册功能中起到关键作用。本源码包"图片切换特效源码"是基于Jquery库实现的，提供了多种不同的样式选择，能够帮助开发者轻松地...
在IT行业中，图片切换特效是网页设计和用户体验中不可或缺的一部分，尤其在展示产品或服务时。本主题聚焦于“图片切换特效（纯FLASH）”，这是一个经典的网页元素，它利用Adobe Flash技术来创建动态且吸引人的图像...
### 知识点解析：“一款很好用的JS图片切换特效” #### 一、概述 本文将详细介绍一个简单实用的JavaScript（简称JS）图片切换特效。该特效通过动态更新页面中的图片资源并配合简单的动画效果来实现平滑过渡，增强...
【标题】"菜单形式图片切换特效"涉及到的是一种在网页设计中常见的交互效果，通过JavaScript库jQuery实现。这种特效能够使用户通过点击菜单项来切换显示的图片，从而提升用户体验，使得网站更具吸引力和互动性。 ...
总之，"带缩略图的JS首页图片切换特效"是JavaScript在网页动态效果中的典型应用，它结合了事件处理、DOM操作和CSS样式，为用户提供直观且互动的浏览体验。通过深入学习和实践，你可以掌握这种技术并将其应用到自己的...