腾讯首页js图片切换效果
< HEAD >
< TITLE > 腾讯软件 - 图片滑动效果,阿里西西整理收集。 < / TITLE>
< style >
BODY {
PADDING - BOTTOM: 0px; MARGIN: 0px; PADDING - LEFT: 0px; PADDING - RIGHT: 0px; PADDING - TOP: 0px
}
UL {
PADDING - BOTTOM: 0px; MARGIN: 0px; PADDING - LEFT: 0px; PADDING - RIGHT: 0px; PADDING - TOP: 0px
}
.container {
WIDTH: 610px; HEIGHT: 205px
}
.container A IMG {
WIDTH: 610px; HEIGHT: 205px
}
.container IMG {
BORDER - BOTTOM - STYLE: none; BORDER - RIGHT - STYLE: none; BORDER - TOP - STYLE: none; BORDER - LEFT - STYLE: none
}
.td_f A IMG {
PADDING - BOTTOM: 0px; MARGIN: 0px; PADDING - LEFT: 0px; PADDING - RIGHT: 0px; PADDING - TOP: 0px
}
.num {
POSITION: absolute; WIDTH: 90px; FLOAT: right; TOP: 180px; LEFT: 520px
}
.num LI {
TEXT - ALIGN: center; LINE - HEIGHT: 15px; LIST - STYLE - TYPE: none; MARGIN: 1px; WIDTH: 15px; FONT - FAMILY: Arial; BACKGROUND: url(http: // pc.qq.com/pc/images/flashbutton.gif) no-repeat -15px 0px; FLOAT: left; HEIGHT: 15px; COLOR: #86a2b8; FONT-SIZE: 12px; CURSOR: pointer
}
.num LI.on {
LINE - HEIGHT: 15px; WIDTH: 15px; BACKGROUND: url(http: // pc.qq.com/pc/images/flashbutton.gif) no-repeat; HEIGHT: 15px; COLOR: #ffffff
}
.more {
FLOAT: right
}
.more1 A {
TEXT - ALIGN: left; LINE - HEIGHT: 25px; MARGIN: 0px 0px 0px 10px; COLOR: #3373a3
}
< / style>
< SCRIPT language = javascript >
if ( typeof (pgvMain) == ' function ' )
pgvMain();
< / SCRIPT>
< SCRIPT >
var gtopTab = " one " ;
function $id(id){
return document.getElementById(id);
}
function changesTab(tab_id){
if (tab_id == gtopTab){
return ;
} else {
$id(gtopTab).className = " unselect " ;
$id(tab_id).className = " select " ;
$id( " tab_ " + gtopTab).style.display = " none " ;
$id( " tab_ " + tab_id).style.display = " block " ;
gtopTab = tab_id;
}
}
< / SCRIPT>
< SCRIPT type = text / javascript>
var $ = function (id) {
return " string " == typeof id ? document.getElementById(id) : id;
};
var Extend = function (destination, source) {
for ( var property in source) {
destination[property] = source[property];
}
return destination;
}
var CurrentStyle = function (element){
return element.currentStyle || document.defaultView.getComputedStyle(element, null );
}
var Bind = function (object, fun) {
var args = Array.prototype.slice.call(arguments).slice( 2 );
return function () {
return fun.apply(object, args.concat(Array.prototype.slice.call(arguments)));
}
}
var Tween = {
Quart: {
easeOut: function (t,b,c,d){
return - c * ((t = t / d-1)*t*t*t - 1) + b;
}
},
Back: {
easeOut: function (t,b,c,d,s){
if (s == undefined) s = 1.70158 ;
return c * ((t = t / d-1)*t*((s+1)*t + s) + 1) + b;
}
},
Bounce: {
easeOut: function (t,b,c,d){
if ((t / =d) < (1 / 2.75 )) {
return c * ( 7.5625 * t * t) + b;
} else if (t < ( 2 / 2.75)) {
return c * ( 7.5625 * (t -= ( 1.5 / 2.75))*t + .75) + b;
} else if (t < ( 2.5 / 2.75)) {
return c * ( 7.5625 * (t -= ( 2.25 / 2.75))*t + .9375) + b;
} else {
return c * ( 7.5625 * (t -= ( 2.625 / 2.75))*t + .984375) + b;
}
}
}
}
// 容器对象,滑动对象,切换数量
var SlideTrans = function (container, slider, count, options) {
this ._slider = $(slider);
this ._container = $(container); // 容器对象
this ._timer = null ; // 定时器
this ._count = Math.abs(count); // 切换数量
this ._target = 0 ; // 目标值
this ._t = this ._b = this ._c = 0 ; // tween参数
this .Index = 0 ; // 当前索引
this .SetOptions(options);
this .Auto = !! this .options.Auto;
this .Duration = Math.abs( this .options.Duration);
this .Time = Math.abs( this .options.Time);
this .Pause = Math.abs( this .options.Pause);
this .Tween = this .options.Tween;
this .onStart = this .options.onStart;
this .onFinish = this .options.onFinish;
var bVertical = !! this .options.Vertical;
this ._css = bVertical ? " top " : " left " ; // 方向
// 样式设置
var p = CurrentStyle( this ._container).position;
p == " relative " || p == " absolute " || ( this ._container.style.position = " relative " );
this ._container.style.overflow = " hidden " ;
this ._slider.style.position = " absolute " ;
this .Change = this .options.Change ? this .options.Change :
this ._slider[bVertical ? " offsetHeight " : " offsetWidth " ] / this ._count;
};
SlideTrans.prototype = {
// 设置默认属性
SetOptions: function (options) {
this .options = { // 默认值
Vertical: true , // 是否垂直方向(方向不能改)
Auto: true , // 是否自动
Change: 0 , // 改变量
Duration: 50 , // 滑动持续时间
Time: 10 , // 滑动延时
Pause: 4000 , // 停顿时间(Auto为true时有效)
onStart: function (){}, // 开始转换时执行
onFinish: function (){}, // 完成转换时执行
Tween: Tween.Quart.easeOut // tween算子
};
Extend( this .options, options || {});
},
// 开始切换
Run: function (index) {
// 修正index
index == undefined && (index = this .Index);
index < 0 && (index = this ._count - 1 ) || index >= this ._count && (index = 0 );
// 设置参数
this ._target = - Math.abs( this .Change) * ( this .Index = index);
this ._t = 0 ;
this ._b = parseInt(CurrentStyle( this ._slider)[ this .options.Vertical ? " top " : " left " ]);
this ._c = this ._target - this ._b;
this .onStart();
this .Move();
},
// 移动
Move: function () {
clearTimeout( this ._timer);
// 未到达目标继续移动否则进行下一次滑动
if ( this ._c && this ._t < this .Duration) {
this .MoveTo(Math.round( this .Tween( this ._t ++ , this ._b, this ._c, this .Duration)));
this ._timer = setTimeout(Bind( this , this .Move), this .Time);
} else {
this .MoveTo( this ._target);
this .Auto && ( this ._timer = setTimeout(Bind( this , this .Next), this .Pause));
}
},
// 移动到
MoveTo: function (i) {
this ._slider.style[ this ._css] = i + " px " ;
},
// 下一个
Next: function () {
this .Run( ++ this .Index);
},
// 上一个
Previous: function () {
this .Run( -- this .Index);
},
// 停止
Stop: function () {
clearTimeout( this ._timer); this .MoveTo( this ._target);
}
};
< / SCRIPT>
< BODY >
告诉你一个应有尽有的网页特效网址: < a href = " http://js.alixixi.com " > http: // js.alixixi.com</a>
< hr / >
< DIV id = idContainer2 class = container >
< TABLE id = idSlider2 border = 0 cellSpacing = 0 cellPadding = 0 >
< TBODY >
< TR >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.SOFTMGR'}); " href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/manage.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.PY'}); " href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/py.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.PLAYER'}); " href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/player.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.XF'}); " href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/xf.jpg " >< / A>< / TD >
< TD class = td_f >< A onclick = " pgvSendClick({hottag:'ISD.SHOW.BANNER.TT'}); " href = " http://js.alixixi.com " >< IMG src = " http://pc.qq.com/pc/images/TT.jpg " >< / A>< / TD >
< / TR>
< / TBODY>
< / TABLE>
< UL id = idNum class = num >< / UL>
< / DIV>
< SCRIPT >
// new SlideTrans("idContainer", "idSlider", 3).Run();
// /
var forEach = function (array, callback, thisObject){
if (array.forEach){
array.forEach(callback, thisObject);
} else {
for ( var i = 0 , len = array.length; i < len; i ++ ) { callback.call(thisObject, array[i], i, array); }
}
}
var st = new SlideTrans( " idContainer2 " , " idSlider2 " , 5 , { Vertical: false });
var nums = [];
// 插入数字
for ( var i = 0 , n = st._count - 1 ; i <= n;){
(nums[i] = $( " idNum " ).appendChild(document.createElement( " li " ))).innerHTML = ++ i;
}
forEach(nums, function (o, i){
o.onmouseover = function (){ o.className = " on " ; st.Auto = false ; st.Run(i); }
o.onmouseout = function (){ o.className = "" ; st.Auto = true ; st.Run(); }
})
// 设置按钮样式
st.onStart = function (){
forEach(nums, function (o, i){ o.className = st.Index == i ? " on " : "" ; })
}
// $("idAuto").onclick = function(){
// if(st.Auto){
// st.Auto = false; st.Stop(); this.value = "自动";
// }else{
// st.Auto = true; st.Run(); this.value = "停止";
// }
// }
// $("idNext").onclick = function(){ st.Next(); }
// $("idPre").onclick = function(){ st.Previous(); }
// $("idTween").onchange = function(){
// switch (parseInt(this.value)){
// case 2 :
// st.Tween = Tween.Bounce.easeOut; break;
// case 1 :
// st.Tween = Tween.Back.easeOut; break;
// default :
// st.Tween = Tween.Quart.easeOut;
// }
// }
st.Run();
< / SCRIPT>
< / BODY>< / HTML >
转载于:https://www.cnblogs.com/s7mmersupport/archive/2010/06/11/1756727.html
腾讯首页js图片切换效果相关推荐
- html首页 slider图片切换效果,jQuery插件Slider Revolution实现响应动画滑动图片切换效果...
jQuery插件Slider Revolution实现响应动画滑动图片切换效果 2018-12-31 编程之家 https://www.jb51.cc 这是一款非常强大的内容切换插件,它基于jQuer ...
- html鼠标点击切换图片,js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不 ...
- js原生带缩略图的图片切换效果
js原生带缩略图的图片切换效果 本例中用到的 moveElement(elementID,final_x,final_y,interval)是来自<JavaScript DOM编程艺术(中文第二 ...
- 腾讯《活着》频道JS图片轮换效果解析
腾讯<活着>频道JS图片轮换效果解析 1.原理分析 总析: 包含内容的层->宽:900 高:400 主要显示层-> 宽800 高400 即最上面那层 z-index=100 中 ...
- html+css+jquery,html+css+js(+JQuery)制作扑克牌图片切换效果
先把静态页面写出来: index.html jquery制作扑克牌图片切换效果 此时的效果是这样的: 分析: 背景颜色 图片的位置 图片的边框.圆角以及阴影 让图片动起来 index.css代码: * ...
- php幻灯片切换,JavaScript_JS实现FLASH幻灯片图片切换效果的方法,本文实例讲述了JS实现FLASH幻灯 - phpStudy...
JS实现FLASH幻灯片图片切换效果的方法 本文实例讲述了JS实现FLASH幻灯片图片切换效果的方法.分享给大家供大家参考.具体实现方法如下: JS模拟FLASH幻灯片图片切换效果 /* ul,li{ ...
- html图片轮播怎么写,用js和CSS写图片切换效果(轮播图)
用js和CSS写图片切换效果(轮播图). ** 学习前提** 了解CSS伪类元素,css3过度效果 对js拥有基础的了解. 清楚图片切换原理. CSS3轮播图 body{ background:#cc ...
- CSS+JS带缩略图随机切换方式的图片切换效果
<html> <head> <title>CSS+JS带缩略图随机切换方式的图片切换效果丨芯晴网页特效丨CsrCode.Cn</title> <s ...
- html5滚动文字切换效果代码,js+div实现文字滚动和图片切换效果代码
本文实例讲述了js+div实现文字滚动和图片切换效果代码.分享给大家供大家参考.具体如下: 这里演示js+div文字滚动和图片切换代码,为了演示方便,去掉了图片调用,用数字代替了,用时候再加上就可以了 ...
最新文章
- 1、Cocos2dx 3.0游戏开发三找一小块前言
- mysql:mysql error:Access denied for user 'root'@'localhost' (using password: YES)
- Servlet 组件相关的接口、抽象类关系图
- 对于右侧文字过多会跑到左侧的问题
- oracle 控制html输出样式,Oracle之sqlplus输出到html
- mate10支持html,华为Mate 10再曝光:配置强劲,全面屏十分惊艳
- 【Java】一个List按照另一个List的数据顺序来排序
- Win32汇编---控件的超类化感想
- Python self,init,对象属性
- 可计算行与计算复杂性多带图灵机实例
- 【C++函数】strcat()
- Layui在表格中无法显示进度条(layui-progress)的值
- vue-cli 安装
- 【合肥黑马程序员】SpringBoot应用Docker化
- Allatori java代码混淆
- 成理第二届信安大挑战web篇
- 怎么把音频转换成mp3,一键批量转换法
- 如何查看自己windows密钥
- Oracle数据库初学者入门教程
- 计算机固态和机械什么意思,固态硬盘和机械硬盘有什么不同?详解固态硬盘和机械硬盘...
热门文章
- IDEA检测不到JDK明明有JDK
- 入职一年后的review
- 激光雷达扫描;获取bag文件、转换成pcd文件
- Django Vue 项目踩坑记:The field admin.LogEntry.user was declared with a lazy reference to ‘xxx‘
- App Store出现异常的更新twitter提示
- 概念篇---Microkernel(微内核)
- 最新淘宝无人直播技术防违规交流
- java毕业设计-SpringBoot火车订票管理系统 火车票预订系统
- ZCMU--1516: Name(C语言)
- Python多线程——队列(Queue)