javascript 图片滑动展示效果

更新版本:slideview 图片滑动（扩展/收缩）展示效果

看到jquery实例：图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个。

其中的难点在于怎么设计各个滑动对象进行想要的滑动。

一开始我想的是利用滑动对象的宽度的变化来实现滑动,

但实行起来发现这个只能在理想状态下实现,一般实现起来很困难。

所以还是参照了实例中的方法,利用left的变化来实现滑动。

效果:

1111111

2222222

3333333

1111111

2222222

3333333

不展开

程序原理:

设计之初,先不要考虑文本显示那部分,把重心放到滑动效果的实现上,

减少设计负担,这是小小的技巧吧。

总体的思路是通过移动各个滑动对象到指定的位置来实现不同的效果。

效果有两种,分部是:鼠标移出容器时的默认效果和鼠标移到某个滑动对象时的展示效果。

根据效果可以看出,滑动对象有三种宽度一个是默认宽度,最大宽度和最小宽度。

这些宽度都可以在初始化时设置:

code

this._list = ocontainer.getelementsbytagname(stag);

len = this._list.length;

this._count = len;

this._width = parseint(iwidth / len);

this._width_max = parseint(imaxwidth);

this._width_min = parseint((iwidth - this._width_max) / (len - 1));

我给每个滑动对象添加了一个_target属性来放一个目标值,用来告诉它要滑到哪里。

移动之前先执行set()程序,给每个对象设置目标值,要分两种情况:

1.鼠标移出容器:这时只要设置滑动对象的目标值为默认宽度*索引值就行;

olist._target = this._width * i;

2.鼠标移到某个滑动对象上:把当前对象和之前的滑动对象的目标值设为最小宽度*索引值,之后的对象设为最小宽度*(索引值-1)加上最大宽度(因为这样会算多一个最小宽度所以要减1个),这样设置就能得到要实现的效果:

olist._target = (iindex) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;

接下来就是怎么移动到目标值了,这个在move()程序中实现。

首先移动效果是通过用计时器逐步设置滑动对象的left来实现,减速部分用一个getstep()程序来实现(相关说明请看javascript 图片切换展示效果)。

不断移动,直到所有滑动对象都到达目标值:

code

cleartimeout(this._timer);

var bfinish = true;

this.each(function(olist, otext, i){

var nowleft = parseint(olist.style.left), ileftstep = this.getstep(olist._target, nowleft);

if (ileftstep != 0) { bfinish = false; olist.style.left = (nowleft + ileftstep) + "px"; }

})

if (!bfinish) { var othis = this; this._timer = settimeout(function(){ othis.move(); }, this.time); }

这个程序本身的难度不高,就难在程序设计,例如怎么实现变化的效果(由于有实例难度就没那么高了)。

还有一个思想是把“移动到指定目标”这个任务分派到各个滑动对象,

主程序只要知道是否各个滑动对象都到达指定目标就行了,

这在给滑动对象设置_target属性和each()程序的应用中能体现出来。

如果每次移动都由主程序来计算(试想想没有这个_target属性),难度会大大增加,

而设计之初很容易会陷入这个死胡同。

还有一点是容器的mouseout事件中,要先判断鼠标是否在容器外(相关说明请看javascript 自定义多级联动浮动菜单)。

扩展功能:

可以设置的属性:

step: 滑动变化率;

time: 滑动延时;

texttag: 说明容器tag;

textheight: 说明容器高度;

delay: 延迟值(微秒);

showtext:是否显示说明文本;

能实现什么功能就看各位的想象力了。

程序测试:

实例化对象:

new glideview("idglideview", 1000, "div", 500, { texttag: "a", textheight: 50 });

其中参数分别是容器对象,容器宽度,展示标签,展示宽度,最后是一些设置。

程序代码:

code

var $ = function (id) {

return "string" == typeof id ? document.getelementbyid(id) : id;

};

function event(e){

var oevent = document.all ? window.event : e;

if (document.all) {

if(oevent.type == "mouseout") {

oevent.relatedtarget = oevent.toelement;

}else if(oevent.type == "mouseover") {

oevent.relatedtarget = oevent.fromelement;

}

}

return oevent;

}

function addeventhandler(otarget, seventtype, fnhandler) {

if (otarget.addeventlistener) {

otarget.addeventlistener(seventtype, fnhandler, false);

} else if (otarget.attachevent) {

otarget.attachevent("on" + seventtype, fnhandler);

} else {

otarget["on" + seventtype] = fnhandler;

}

};

var class = {

create: function() {

return function() {

this.initialize.apply(this, arguments);

}

}

}

object.extend = function(destination, source) {

for (var property in source) {

destination[property] = source[property];

}

return destination;

}

var glideview = class.create();

glideview.prototype = {

//容器对象 容器宽度 展示标签 展示宽度

initialize: function(obj, iwidth, stag, imaxwidth, options) {

var ocontainer = $(obj), othis=this, len = 0;

this.setoptions(options);

this.step = math.abs(this.options.step);

this.time = math.abs(this.options.time);

this.showtext = false;//是否显示说明文本

this._list = ocontainer.getelementsbytagname(stag);

len = this._list.length;

this._count = len;

this._width = parseint(iwidth / len);

this._width_max = parseint(imaxwidth);

this._width_min = parseint((iwidth - this._width_max) / (len - 1));

this._timer = null;

//有说明文本

if(this.options.texttag && this.options.textheight > 0){

this.showtext = true;

this._text = ocontainer.getelementsbytagname(this.options.texttag);

this._height_text = -parseint(this.options.textheight);

}

this.each(function(olist, otext, i){

olist._target = this._width * i;//自定义一个属性放目标left

olist.style.left = olist._target + "px";

olist.style.position = "absolute";

addeventhandler(olist, "mouseover", function(){ othis.set.call(othis, i); });

//有说明文本

if(otext){

otext._target = this._height_text;//自定义一个属性放目标bottom

otext.style.bottom = otext._target + "px";

otext.style.position = "absolute";

}

})

//容器样式设置

ocontainer.style.width = iwidth + "px";

ocontainer.style.overflow = "hidden";

ocontainer.style.position = "relative";

//移出容器时返回默认状态

addeventhandler(ocontainer, "mouseout", function(e){

//变通防止执行olist的mouseout

var o = event(e).relatedtarget;

if (ocontainer.contains ? !ocontainer.contains(o) : ocontainer != o && !(ocontainer.comparedocumentposition(o) & 16)) othis.set.call(othis, -1);

})

},

//设置默认属性

setoptions: function(options) {

this.options = {//默认值

step:20,//滑动变化率

time:20,//滑动延时

texttag:"",//说明容器tag

textheight:0//说明容器高度

};

object.extend(this.options, options || {});

},

//相关设置

set: function(index) {

if (index0) {

//鼠标移出容器返回默认状态

this.each(function(olist, otext, i){ olist._target = this._width * i; if(otext){ otext._target = this._height_text; } })

} else {

//鼠标移到某个滑动对象上

this.each(function(olist, otext, i){

olist._target = (iindex) ? this._width_min * i : this._width_min * (i - 1) + this._width_max;

if(otext){ otext._target = (i == index) ? 0 : this._height_text; }

})

}

this.move();

},

//移动

move: function() {

cleartimeout(this._timer);

var bfinish = true;//是否全部到达目标地址

this.each(function(olist, otext, i){

var inow = parseint(olist.style.left), istep = this.getstep(olist._target, inow);

if (istep != 0) { bfinish = false; olist.style.left = (inow + istep) + "px"; }

//有说明文本

if (otext) {

inow = parseint(otext.style.bottom), istep = this.getstep(otext._target, inow);

if (istep != 0) { bfinish = false; otext.style.bottom = (inow + istep) + "px"; }

}

})

//未到达目标继续移动

if (!bfinish) { var othis = this; this._timer = settimeout(function(){ othis.move(); }, this.time); }

},

//获取步长

getstep: function(itarget, inow) {

var istep = (itarget - inow) / this.step;

if (istep == 0) return 0;

if (math.abs(istep)1) return (istep > 0 ? 1 : -1);

return istep;

},

each:function(fun) {

for (var i = 0; ithis._count; i++)

fun.call(this, this._list[i], (this.showtext ? this._text[i] : null), i);

}

};

下载完整测试代码

其他图片展示效果:

javascript 图片变换效果(ie only)

javascript 图片切换展示效果

转载请注明出处:http://www.cnblogs.com/cloudgamer/

如有任何建议或疑问,欢迎留言讨论。

如果觉得文章不错的话,欢迎点一下右下角的推荐。

程序中包含的js工具库cjl.0.1.min.js,原文在这里。

标签: javascript, 滑动, 图片展示

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2008-05-13 01:34 cloudgamer 阅读(107810) 评论(141)编辑 收藏

发表评论

2276773

评论共2页: 上一页 1 2

回复 引用 查看

#41楼 2008-07-26 09:38 蜗牛身上的一只蚂蚁

谢谢.......

回复 引用 查看

#42楼[楼主] 2008-07-26 17:13 cloudgamer

@蜗牛身上的一只蚂蚁

上面不是有一个“展开第x个”的功能了么

你看看代码就知道了

回复 引用 查看

#43楼 2008-07-27 09:26 蜗牛身上的一只蚂蚁

哈哈..还真有......谢谢.....感觉lz大大...我最近加快学js..感觉怎么也快不起来..郁闷.........

回复 引用 查看

#44楼[楼主] 2008-07-31 20:10 cloudgamer

@蜗牛身上的一只蚂蚁

坚持就行

回复 引用

#45楼 2008-11-13 16:23 chenjianwei[未注册用户]

if (ocontainer.contains ? !ocontainer.contains(o) : ocontainer != o && !(ocontainer.comparedocumentposition(o) & 16)) othis.set.call(othis, -1);

楼主能不能解释下段代码,看了有点晕,这个判断的意义。

回复 引用

#46楼 2008-11-15 19:46 chenjianwei[未注册用户]

我把楼主的代码稍微改了下,核心算法还是沿用楼主的,主要改了点依赖关系。

我把单个滑动块包装成了guest对象,6个滑动块就是6个guest对象,当然这些guest对象不具备滑动能力,需要通过效果实现对象gliding来实现滑动。guest对象与gliding对象是通过中介对象mediator联系起来的,最后由glideview对象封装。和楼主交流下,呵呵。

回复 引用 查看

#47楼[楼主] 2008-11-16 00:25 cloudgamer

@chenjianwei

这个是判断文档位置

这里有详细一点的说明

http://www.cnblogs.com/cloudgamer/archive/2008/11/15/1290954.html

欢迎交流

有空拜读

回复 引用

#48楼 2008-12-29 10:02 水流[未注册用户]

求学中,谢谢

回复 引用

#49楼 2009-01-08 09:32 zybx520[未注册用户]

我的也是在本地用html打开就为空白的,另外我看了楼主给蜗牛身上的一只蚂蚁和强强的回复,楼主你那个下载源码的地址已经打不开了,请问是否有新的地址?谢谢

回复 引用 查看

#50楼[楼主] 2009-01-08 09:59 cloudgamer

@zybx520

http://files.cnblogs.com/cloudgamer/glideview.rar

这个是下载地址

@水流

谢谢支持

回复 引用

#51楼 2009-01-08 11:06 zybx520[未注册用户]

哇,楼主,真没有想到你的回复速度这么快,我是个js初学者,代码我下载了,可是打开来之后有整个屏幕宽,请问能否设置成固定的框架大小呢?

就像你上面的效果图一样

回复 引用 查看

#52楼[楼主] 2009-01-08 11:13 cloudgamer

@zybx520

大小可以自己定的

你研究一下吧

回复 引用

#53楼 2009-01-08 12:41 zybx520[未注册用户]

new glideview("idglideview2", 700, "div", 500);

var gv = new glideview("idglideview", 700, "div", 400, { texttag: "a", textheight: 50 });

这一段代码是显示框架大小的吧。

回复 引用 查看

#54楼[楼主] 2009-01-08 14:03 cloudgamer

@zybx520

显示框是样式自己控制的

这里是根据样式来设置大小

回复 引用

#55楼 2009-01-13 09:19 zybx520[未注册用户]

楼主,不知道你最近有没有在迅雷看看上看电影,当你选择一个影片之后,会弹出一个新的页面,在新的页面上中间会有一张图片,然后经过一小段时间之后自动向两边分开,中间显示出播放器,请问楼主对这个有研究吗?如果有的话,可否提供一下相应的代码呢?

回复 引用 查看

#56楼[楼主] 2009-01-13 09:25 cloudgamer

@zybx520

还有这样要代码的阿

另请高明吧

回复 引用

#57楼 2009-01-13 16:47 zybx520[未注册用户]

真的有呢,不是和你开玩笑的,楼主可以去看一下就知道啦

回复 引用 查看

#58楼[楼主] 2009-01-13 16:52 cloudgamer

@zybx520

那个我没看过

有空再看吧

回复 引用

#59楼 2009-02-03 08:53 下午茶[未注册用户]

高人啊!我对java一窍不通,只是自己做了几个网页。很想用这些效果,但连拷贝都不会。我真的好想有楼主这样的头脑啊～～

回复 引用

#60楼 2009-02-10 16:43 飘过[未注册用户]

本来我很少顶贴的,但是博主太强大了,只有留下一笔了。

回复 引用

#61楼 2009-02-20 09:01 jjl_sky[未注册用户]

强人啊! 我要加强学习啦

回复 引用

#62楼 2009-03-02 17:32 yoy[未注册用户]

楼主好强~我什么时候能学到你这样的水平就老开心了~

回复 引用 查看

#63楼 2009-03-14 23:33 超级奶崽

楼主太强大了。。。。

回复 引用 查看

#64楼[楼主] 2009-03-16 11:07 cloudgamer

@下午茶

@飘过

@jjl_sky

@yoy

@超级奶崽

谢谢支持!!!

回复 引用

#65楼 2009-03-16 16:25 46799[未注册用户]

请问我要想在多行图片滑动勒?

回复 引用 查看

#66楼[楼主] 2009-03-16 16:30 cloudgamer

@46799

什么意思

放多几个实例?

回复 引用

#67楼 2009-04-11 16:21 翻版必究

漂亮,我以前还以为这样的效果是用flash做的呢,,

回复 引用

#68楼 2009-04-12 13:50 潘凯[未注册用户]

楼主怎么没发新帖了啊?

回复 引用 查看

#69楼 2009-07-07 12:45 迷失了方向

收藏 ,强~~~~

回复 引用

#70楼 2009-07-14 15:35 cuige[未注册用户]

只看效果和设计理念然后自己做

回复 引用 查看

#71楼[楼主] 2009-07-14 16:29 cloudgamer

@cuige

@迷失了方向

@潘凯

@翻版必究

谢谢支持

回复 引用

#72楼 2009-10-23 14:44 laoshu133[未注册用户]

以前我也一直想写个这样的效果,整了好久都没弄出来,最后无奈还是换成了jq实现。。。

还是博主强啊~

回复 引用

#73楼 2009-10-26 15:06 3123214234[未注册用户]

太谢谢楼主了,顺便说一句,你牛逼!

回复 引用

#74楼 2009-10-29 16:45 非得有昵称[未注册用户]

楼主很强大

奇怪的是为什么不用框架却用prototype.js的代码呢

回复 引用 查看

#75楼[楼主] 2009-10-29 17:03 cloudgamer

@3123214234

@laoshu133

谢谢支持

回复 引用 查看

#76楼[楼主] 2009-10-29 17:03 cloudgamer

@非得有昵称

我也没有用prototype.js啊

只是用了里面几个方法而已

回复 引用 查看

#77楼 2009-11-01 23:32 treblam

学习了一下你的代码,写得真牛,以后会常来学习。

不过发现一个小小的问题,下面的text的高度在css里面被写死成了50px,如果options里面的textheight不是50px的话好像有点问题。这里text的高度如果根据options.textheight来设置是不是更好?

回复 引用 查看

#78楼[楼主] 2009-11-02 08:32 cloudgamer

@treblam

其实这个应该用样式来解决

具体以后再看吧

这个应该也要更新一下了

回复 引用 查看

#79楼 2009-12-22 17:59 後生哥哥

牛人呀,收藏了,我也会常常来看的

回复 引用 查看

#80楼 2009-12-29 15:11 matt.com

硬是没看懂到底写的什么

我汗

回复 引用 查看

#81楼[楼主] 2009-12-29 15:17 cloudgamer

@matt.com

那里不明白?

@後生哥哥

谢谢支持

回复 引用 查看

#82楼 2009-12-29 16:30 itliyi

楼主能告诉我好的tween算法资料么? 还有js学习方法 谢谢

回复 引用 查看

#83楼[楼主] 2009-12-29 17:44 cloudgamer

@itliyi

tween就是一些公式而已

关键是如何用

我已经写过一个关于tween的

http://www.cnblogs.com/cloudgamer/archive/2009/01/06/tween.html

回复 引用

#84楼 2010-03-10 19:14 真的诚心感谢楼主[未注册用户]

真的感谢楼主

另外我想问个小问题

我做的是.net网页

我在网页中想换掉你的图片 换成我本地的图片 我要怎么写add方法里的图片那个url呢 我试了html的img还有.net中的image控件都没好使 请楼主指点一下

先谢谢了

回复 引用 查看

#85楼[楼主] 2010-03-10 21:14 cloudgamer

@真的诚心感谢楼主

这个好像没有add方法啊

回复 引用

#86楼 2010-03-10 21:44 真的诚心感谢楼主[未注册用户]

@cloudgamer

我发错网页了~

rvt.add('http://images.cnblogs.com/cnblogs_com/cloudgamer/143727/r_rt_1.jpg', '图片变换效果', 'http://www.cnblogs.com/cloudgamer/archive/2008/05/23/1205642.html');

这句中的图片 怎么换成.net项目中的本地图片呢

回复 引用 查看

#87楼[楼主] 2010-03-10 23:19 cloudgamer

@真的诚心感谢楼主

你读数据库

然后用repeat循环输出就行了

回复 引用 查看

#88楼 2010-04-08 14:44 蔚蓝星辰

楼主你好,我在vs2005里使用这段代码filter和opacity会报错,提示不是已知css属性名,当然也运行不了,请问楼主这种问题有什么号办法能解决吗?

回复 引用 查看

#89楼[楼主] 2010-04-08 17:07 cloudgamer

@蔚蓝星辰

你是说vs报错?

浏览器不报错就行了

回复 引用 查看

#90楼 2010-04-24 23:11 jet_lee

请问一下:

object.extend(this.options, options || {});

这句话走完之后,this.options继承了options之后texttag有什么变化么

在(

//有说明文本

if(this.options.texttag && this.options.textheight > 0))之前没看到texttag 的变化(水平太菜了,没看出来),这个texttag是在什么时候赋值的呢?麻烦解答

回复 引用 查看

#91楼 2010-04-24 23:24 jet_lee

我知道了。

new glideview("idglideview", 1000, "div", 750, { texttag: "a", textheight: 50 });这里传值进去了。

回复 引用 查看

#92楼[楼主] 2010-04-25 20:30 cloudgamer

@jet_lee

是的

回复 引用 查看

#93楼 2010-05-11 17:10 xiaogan

再次学习!

getstep()这方法很有意思,能让图片滑动时,前面一段时间快,后面一段时间有微调的效果。

楼主怎么不用匀速滑动呢?

回复 引用 查看

#94楼[楼主] 2010-05-11 17:17 cloudgamer

@xiaogan

匀速也可以啊

看喜欢咯

一般缓动看着比较舒服

回复 引用 查看

#95楼 2010-05-12 11:06 xiaogan

求助,楼主,

this.each(function(olist, otext, i){

olist._target = this._width * i;//自定义一个属性放目标left

olist.style.left = olist._target + "px";

olist.style.position = "absolute";

addeventhandler(olist, "mouseover",

function(){

alert(i);

othis.set.call(othis, i);

}

);

})

在这里,您用自己的each方法实现了给每个图片层增加一个left以及mouseover事件。

我想用直观的for循环做出同样的事情,

for( var kk = 0 ; kk

发现mouseover事件不正确,主要是kk这个值不对。

能给点提示么

回复 引用 查看

#96楼[楼主] 2010-05-12 14:10 cloudgamer

@xiaogan

显然闭包问题

你在for里面做function

kk会出问题的会是最后一个值

回复 引用 查看

#97楼 2010-05-13 09:44 xiaogan

@cloudgamer

为什么kk会是最后一个值……不太明白

回复 引用 查看

#98楼[楼主] 2010-05-13 13:36 cloudgamer

@xiaogan

因为在函数里的kk跟外面的kk是同一个变量

外面的kk for完之后变成n

那执行函数时也是读这个kk即n了

回复 引用 查看

#99楼 2010-05-21 11:28 xiaogan

楼主,我发现一个现象。

就是页顶部的5个漫画图片部分,如果给每个图片加个高度和宽度,就会变得非常的卡。。。

这是为什么??

回复 引用 查看

#100楼[楼主] 2010-05-21 23:16 cloudgamer

@xiaogan

email整个例子给我吧

懒得弄了

回复 引用 查看

#101楼[楼主] 2010-05-22 16:55 cloudgamer

@xiaogan

看了

那是因为你的图片比较大

本身耗资源

没办法

回复 引用 查看

#102楼 2010-07-27 11:36 海洋之 心

楼主,我只想说:日,你太强大了,呵呵

回复 引用

#103楼 2010-10-12 16:51 ssssssssssssss[未注册用户]

不错

回复 引用 查看

#104楼[楼主] 2010-11-13 13:56 cloudgamer

@海洋之 心

@ssssssssssssss

谢谢支持

回复 引用 查看

#105楼 2010-11-26 21:32 sgof

楼主太强悍了,搞得我上班都这里跑,好东西顶起!!

回复 引用 查看

#106楼 2010-12-15 00:20 fly811

很好学习中

回复 引用 查看

#107楼[楼主] 2010-12-15 09:11 cloudgamer

@sgof

@fly811

谢谢支持

回复 引用 查看

#108楼 2010-12-17 18:15 零与非零

很喜欢的效果啊谢谢大哥

回复 引用 查看

#109楼 2010-12-20 12:14 joyice

一头雾水好像做好啊

回复 引用 查看

#110楼[楼主] 2010-12-20 14:31 cloudgamer

@零与非零

谢谢支持

回复 引用 查看

#111楼[楼主] 2010-12-20 14:31 cloudgamer

@joyice

哪里不明白

回复 引用

#112楼 2010-12-20 16:42 木小夕[未注册用户]

太猛啊,有源码么。

回复 引用 查看

#113楼[楼主] 2010-12-20 17:10 cloudgamer

@木小夕

有实例下载

回复 引用 查看

#114楼 2010-12-21 11:19 1239678420

如何将js代码写在一个js文件里,再在html面页里调用js代码啊,

如果将全部代码都放在一个文件里,看代码时会好头晕的。。。。

楼主能请教一下》。。。。。

回复 引用 查看

#115楼[楼主] 2010-12-21 14:17 cloudgamer

@1239678420

不知你说什么

回复 引用 查看

#116楼 2011-01-28 11:14 east神奇

楼主牛人啊!!

回复 引用

#117楼 2011-03-13 21:55 - -0[未注册用户]

好复杂。。。我能问一下这个是用什么软件做的么。。。

回复 引用 查看

#118楼[楼主] 2011-03-13 22:24 cloudgamer

@east神奇

谢谢支持

回复 引用 查看

#119楼[楼主] 2011-03-13 22:24 cloudgamer

@- -0

就是用js

回复 引用

#120楼 2011-04-09 10:39 aiyaya[未注册用户]

楼主想问下js从那学起要先买什么资料么??

回复 引用 查看

#121楼[楼主] 2011-04-12 08:22 cloudgamer

@aiyaya

慢慢积累吧

回复 引用 查看

#122楼 2011-04-29 13:50 玛丽苏

楼主,我想改动一下这个容器的高度,应该改哪段代码??

谢谢谢谢谢谢!!!!!

回复 引用 查看

#123楼 2011-04-30 13:14 玛丽苏

我找到了~~~~

以后有不会的再麻烦你哈!!

回复 引用 查看

#124楼[楼主] 2011-04-30 13:57 cloudgamer

@youth melody

参考

http://www.cnblogs.com/cloudgamer/archive/2010/07/29/slideview.html

回复 引用 查看

#125楼 2011-04-30 14:00 youth melody

hi,cloudgamer老师您好!我下载了您的实例测试,非常的使用!

想请教您,怎么更改代码,是鼠标移出整个容器时图片全部滑动至右边,只展现第一张图片?如图示:500) this.width=500;">然后文字也无法正常显示?

烦请老师指点,谢谢啦!

回复 引用 查看

#126楼 2011-04-30 14:11 youth melody

谢谢您!但是文字的问题怎么解决呢?

回复 引用 查看

#127楼[楼主] 2011-04-30 21:40 cloudgamer

@youth melody

自己研究一下吧

回复 引用 查看

#128楼 2011-05-18 19:01 终极baby

这些代码图片要发哪啊?什么看都看不懂

回复 引用

#129楼 2011-06-16 09:02 莫莫白[未注册用户]

那个彩色格子可以替换成别的图片么。怎么替换。我在dm里弄不了啊

回复 引用

#130楼 2011-06-25 10:18 玉露香茗[未注册用户]

你对这些程序非常厉害,我很需要跑这个变幻的图片,可是我看不懂你说的是什么!能不能免费帮我设置一下呢?

回复 引用 查看

#131楼[楼主] 2011-06-26 17:19 cloudgamer

@玉露香茗

@莫莫白

@终极baby

看实例

回复 引用 查看

#132楼 2011-07-08 13:29 尐☆如

图片上面怎么去掉那堆空白啊

回复 引用 查看

#133楼 2011-08-22 09:11 syp水无颜

楼主,你qq多少

回复 引用

#134楼 2011-08-24 10:11 kicyou[未注册用户]

在哪里更换图片和尺寸的?

回复 引用

#135楼 2011-09-03 09:40 edgelu[未注册用户]

http://bbs.php168.net/simple/index.php?t316988.html

楼主能否帮解决一下这个问题呢,我的也是无法获得id,在最后一帖的问题

回复 引用

#136楼 2011-10-04 17:00 飞翔chf[未注册用户]

谢谢

回复 引用

#137楼 2011-10-04 17:00 飞翔chf[未注册用户]

谢谢哈

回复 引用 查看

#138楼 2011-12-02 14:57 惠红毅

楼主,可以加下我的qq不,我有问题要请教下,关于jquery的,不胜感激 qq:764558941

回复 引用

#139楼 2011-12-13 08:55 qllxw[未注册用户]

好强,膜拜一下啊~

回复 引用

#140楼 2011-12-22 15:01 小小小小[未注册用户]

小弟想在首页加个类似的效果,请问lz我在div里面加图片怎么不行呀

~ ~!!

评论共2页: 上一页 1 2

刷新评论列表刷新页面返回页首

发表评论

昵称: [登录]

[注册]

主页:

邮箱:(仅博主可见)

验证码:看不清。
       换一个

评论内容:

记住我的昵称和主页

-->

登录注册

[使用ctrl+enter键快速提交评论]

0

1194272

mt1fsq1dl3k=

首页博问闪存新闻园子招聘知识库

最新it新闻:

·windows 7官方rss动态主题：《昆虫》

·捡到iphone 4s玩自拍 icloud同步酿悲剧

·铁道部购票网站存泄密危险 cdn服务商技术短板是主因

·利用 mimo magictouch 打造另类的平板电脑

·但愿大嘴巴的消息再次失准

» 更多新闻...

最新知识库文章:

·设计师的品牌意识

·如何成为“10倍效率”开发者

·快速排序（quicksort）的javascript实现

·wcf服务端运行时架构体系详解[续篇]

·wcf服务端运行时架构体系详解[下篇]

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/

JavaScript 图片滑动展示效果javascript相关推荐

1. JavaScript 图片滑动切换效果

   序一(08/07/06) 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 序二(09/03/ ...

2. JavaScript 图片切换展示效果

   JavaScript 图片切换展示效果 看到alibaba的一个图片切换效果,感觉不错,想拿来用用.但代码一大堆的,看着昏,还是自己来吧. 由于有了做图片滑动展示效果的经验,做这个就容易得多了. 先看 ...

3. JavaScript html 图片滑动切换效果,幻灯片式切换,新闻展示,滚动新闻

   新闻展示,滚动新闻 程序说明 原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果. 首先需要一个容器,程序会自动设置容器overflow为hidden,如果 ...

4. 《JavaScript 实战》：实现图片幻滑动展示效果

   滑动展示效果主要用在图片或信息的滑动展示,也可以设置一下做成简单的口风琴(Accordion)效果.这个其实就是以前写的图片滑动展示效果的改进版,那是我第一篇比较受关注的文章,是时候整理一下了. 有如 ...

5. JavaScript 图片3D展示空间（3DRoom）

   一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果. 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间. 很久以前就看过一个3DRoo ...

6. css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果，CSS:style type=text/cssgt - phpStudy...

   纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...

7. jquery练习——简单的图片结果展示效果

   今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下 再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...

8. [Android]使用ViewPager实现图片滑动展示

   在淘宝等电商的APP首页经常能看到大幅的广告位,通常有多幅经常更新的图片用于展示促销信息,如下图所示: 通常会自动滚动,也可以根据手势滑动.我没有研究过人家的APP是通过什么实现的,可能有第三方已经封 ...

9. flash特效原理：图片滑动放大效果(2)

   flash特效原理:图片滑动放大效果(1) http://blog.csdn.net/hero82748274/archive/2009/10/22/4715312.aspx 最近看了一些关于动态注册 ...

最新文章

1. LeetCode简单题之找到最近的有相同 X 或 Y 坐标的点
2. 优达学城《DeepLearning》2-2：迁移学习
3. 吴恩达deeplearning.ai发布NLP课程！
4. BZOJ4573 : [Zjoi2016]大森林
5. multi-target not supporte
6. Floyd —Warshall（最短路及其他用法详解）
7. ABAP 数值四舍五入函数
8. [转]CISCO IOS命名规则
9. ssas表格模型 权限控制_性能调整SSAS表格模型
10. pyinstaller与anaconda python_python – 在Anaconda安装后运行pyinstaller导致ImportError：没有名为’pefile’的模块...
11. 一款度盘高速下载工具
12. Qt练习项目--鼠标连点器
13. STM32开源代码——OLED汉字显示程序
14. methylKit：差异甲基化分析
15. nginx全局配置文件通解
16. Redis数据结构Hash应用场景-存储商品、购物车、淘宝短链接、分布式Session、用户注册、发微博功能
17. 详解二分搜索，强攻细节问题
18. 【Oracle】ora-02391解决方法，生产环境测试通过
19. 中国幼儿教育市场运营模式与未来发展方向分析报告2022版
20. C语言实现小球落地问题

热门文章

1. AlienSkinExposureX8必备的图片后期PS处理软件
2. Python地图可视化框架pygal.maps.world/和pyecharts
3. IT项目管理软件应该具备哪些功能？ IT项目管理软件推荐
4. Educational Codeforces Round 67小结
5. LNMP编译安装及应用（理论+实验）——详细步骤说明，看完可以尝试操作
6. Elasticsearch 桶最小值聚合
7. 能让Jellyfin直接挂载阿里云盘的aliyundrive-fuse
8. Android 强大软件,4款强大的安卓黑科技APP，各个都是压箱底，请大家要低调使用...
9. 在苹果Mac上的Safari浏览器中如何阻止跨站跟踪？
10. SAP 关于库存确定的配置