图片友情链接滚动 横向,带控制按钮

友情链接滚动特效

.roun .rounCenter_fh{width:248px;float:left;overflow:hidden;border-left:1px solid #D3D3D3;border-right:1px solid
#D3D3D3;background-color: #FFFFFF;background-position: 193px top; height:133px; padding-top:8px;}
.container, .container img{width:180px; height:50px;}
.index_bank{width:250px; height:60px; background:url(http://zsrimg.ikafan.com/demoimg/200910//bank_back.gif) no-
repeat; padding:30px 0 0 15px;}

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) = 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

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

您可能感兴趣的文章:

  • 基于jquery实现点击左右按钮图片横向滚动
  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
  • JS实现图片横向滚动效果示例代码

Tags:图片 横向滚动 控制按钮

相关文章

  • 2008-01-01ImageFlow可鼠标控制图片滚动
  • 2012-12-12js实现运动logo图片效果及运动元素对象sportBox使用方法
  • 2010-11-11JS图片浏览组件PhotoLook的公开属性方法介绍和进阶实例代码
  • 2007-04-04用javascript实现图片马赛克后显示并切换
  • 2006-07-07自适应图片大小的弹出窗口
  • 2007-10-10非常漂亮的JS代码经典广告
  • 2008-10-10javascript图片自动缩放和垂直居中处理函数
  • 2009-04-04javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了ch
  • 2008-12-12JavaScript 图片切割效果(放大镜)
  • 2011-08-08纯JS实现的批量图片预览加载功能

最新评论

(0)

相关推荐

  • 基于jquery实现点击左右按钮图片横向滚动

    点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 复制代码 代码如下: <!DOCTYPE html> <html lange="en"> <head> <title>点击左右按钮图片横向滚动</title> <meta charset=utf-8" /> <style type="text/css"> * { margi

  • 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> <meta http-equiv=&qu

  • jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)

    demo01.html 复制代码 代码如下: <!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> <meta ht

  • 图片友情链接滚动 横向,带控制按钮

    友情链接滚动特效 .roun .rounCenter_fh{width:248px;float:left;overflow:hidden;border-left:1px solid #D3D3D3;border-right:1px solid #D3D3D3;background-color: #FFFFFF;background-position: 193px top; height:133px; padding-top:8px;} .container, .container img{wid

  • 友情链接横向文字上下间隙循环滚动JS效果

    仿qq频道上下单行多条滚动js效果代码,可用于新闻,友情链接上下间隙滚动 #nav { MARGIN: 7px auto 0px; HEIGHT: 117px } #nav #hotnews { BORDER-BOTTOM-WIDTH: 0px; HEIGHT: 89px } #Scroll { CLEAR: both; BORDER-RIGHT: #cdc9ca 1px solid; BORDER-TOP: #cdc9ca 1px solid; PADDING-LEFT: 100px; FON

  • 图片动画横条广告带上下滚动可自定义图片、链接等等

    可以自定义广告的图片.链接.长.宽等.光标移到图片上会出现左右箭头. 以下是HTML文件代码: 复制代码 代码如下: <!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/xhtm

  • 图片动画横条广告带上下滚动的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>  <meta http-equiv=

  • 详解WordPress中添加友情链接的方法

    友情链接对于一个每个独立博客来说可以说是必须的,有不少人选择在侧边栏加入友情链接栏目,但建立一个独立的友情链接页面也是一个不错的选择.用插件可以轻松做到这一点,但喜欢原生的我,能自己动手解决,还是自己动手解决好.折腾了一下,方法就出来了. 普通方法 建立一个友情链接页面的步骤也是比较简单的,先建立一个新的页面模板,用友链函数调用友链,再加上css美化,事情就完成了. 下面说说具体的步骤 1.建立一个新的模板页面  复制主题中的page.php文件,重命名为links.php. 在页面的顶部加入如

  • PJblog友情链接LOGO地址失效的解决

    这个修改是为了解决友情链接页面当友情站点logo地址失效引起页面的不美观.当图片地址失效时会显示叉叉,这样影响页面外观,通过下面的修改可以解决这个问题并且显示新的自己设定的图片. 是在alonefly的帮助下修改过来的,我只知道代码,但是对PJblog的结构不熟悉,请教alonefly才知道除了要修改bloglink.asp外还要修改class\cls_control.asp,修改很简单: 1.首先准备一张88*31的logo作为链接图片失效时新的图片,假设文件为err.gif放在images目

  • JS实现单张或多张图片持续无缝滚动的示例代码

    背景: 想要实现图片持续滚动,既然使用js,就千万不要加css动画.过渡等相关样式,如果想要滚动的平滑一下,可以一像素一像素的感动,则很平滑,如果加了过渡动画,当图片重置为0时,会有往回倒的动画效果,跟预期不符. 原理: 图片滚动原理同图片轮播原理,同样也适用于文字滚动等一系列滚动,通过复制最后一张图片或最后一堆文字插入第一行,或复制第一张图片或一堆文字插入在结尾,来实现无缝拼接,前提:1.必须是没有设置过渡动画的,2.重置为0的时候与当前已经滚动到的高度对于图片的位置而言肉眼看上去没变化. 实

  • jQuery带控制按钮轮播图插件

    带控制按钮(点击移动到指定图片)的jQuery轮播图插件 效果图 当点击下方按钮时,轮播动画会停止,按钮所对应的图片在规定时间范围内移动出现,这一动作结束后再从当前图片开始继续轮播动画 $.fn.slider = function(){ //轮播图变量 var $ul =this; //在jQuery原型方法中,this就指的调用该方法的jQuery对象 var $lis = $ul.children();//返回所有的直接子标签 var imgwidth = $lis.width(); //设

  • jQuery动画效果实现图片无缝连续滚动

    本文实例介绍了jQuery动画效果实现图片无缝连续滚动的详细代码,分享给大家供大家参考,具体内容如下 效果图如下: 一.HTML代码 <body> <div id="container"> <ul id="content"> <li><a href="#"><img src="images/0.png"/></a></li> <

  • js实现图片和链接文字同步切换特效的方法

    本文实例讲述了js实现图片和链接文字同步切换特效的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <title>js图片和链接文字同步切换特效</title> <head> <script language=JavaScript> var imgUrl=new Array(); var imgLink=new Array(); var imgTz=new Array(); var adNum=0; imgUrl

随机推荐