有意思的图片组合飞入效果

  • 有意思的图片组合飞入效果,本代码将多张GIF图片按一定方向组合在一起,由两个方向向一个方向组合,需要多张图片,但最终效果挺好,以前不怎么见到过,发上来分享给JS爱好者,请预览看效果吧。

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>河北草坪</title>

</head>

<body onload=changeimage()>

<STYLE>

.spanstyle {

LEFT: -5000px; POSITION: absolute

}

</STYLE>

<SCRIPT>

var imgwidth=200

var imgheight=90

var imgurl=new Array()

imgurl[0]="/jscss/demoimg/201303/1.gif"

imgurl[1]="/jscss/demoimg/201303/5.gif"

imgurl[2]="/jscss/demoimg/201303/6.gif"

var imgpreload=new Array()

for (i=0;i<=imgurl.length-1;i++) {

imgpreload[i]=new Image()

imgpreload[i].src=imgurl[i]

}

var x_finalpos=300

var y_finalpos=200

var x_slices=8

var y_slices=3

var pause=10

var screenwidth=800

var screenheight=500

var x_step=new Array()

var y_step=new Array()

var x_randompos=0

var y_randompos=0

var i_loop=0

var max_loop=20

var i_image=0

var width_slice=Math.floor(imgwidth/x_slices)

var height_slice=Math.floor(imgheight/y_slices)

var cliptop=0

var clipbottom=height_slice

var clipleft=0

var clipright=width_slice

var spancounter=0

function initiate() {

cliptop=0

clipbottom=height_slice

clipleft=0

clipright=width_slice

i_loop=0

spancounter=0

if (document.all) {

for (i=0;i<=y_slices-1;i++) {

for (ii=0;ii<=x_slices-1;ii++) {

var thisspan=eval("document.all.span"+spancounter+".style")

x_randompos=Math.ceil(screenwidth*Math.random())

y_randompos=Math.ceil(screenheight*Math.random())

thisspan.posLeft=x_randompos

thisspan.posTop=y_randompos

thisspan.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

clipleft+=width_slice

clipright+=width_slice

spancounter++

}

clipleft=0

clipright=width_slice

cliptop+=height_slice

clipbottom+=height_slice

}

}

explode_IE()

}

function changeimage() {

spancounter=0

for (i=0;i<=y_slices-1;i++) {

for (ii=0;ii<=x_slices-1;ii++) {

var thisspan=eval("document.all.span"+spancounter+".style")

thisspan.posLeft=-5000

thisspan.posTop=-5000

spancounter++

}

}

spancounter=0

if (i_image>imgurl.length-1) {i_image=0}

for (i=0;i<=y_slices-1;i++) {

for (ii=0;ii<=x_slices-1;ii++) {

var thisinnerspan=eval("span"+spancounter)

thisinnerspan.innerHTML="<img src=‘"+imgurl[i_image]+"‘>"

spancounter++

}

}

i_image++

initiate()

}

function explode_IE() {

spancounter=0

if (i_loop<=max_loop-1) {

for (i=0;i<=y_slices-1;i++) {

for (ii=0;ii<=x_slices-1;ii++) {

var thisspan=eval("document.all.span"+spancounter+".style")

x_step[spancounter]=(x_finalpos-thisspan.posLeft)/(max_loop-i_loop)

y_step[spancounter]=(y_finalpos-thisspan.posTop)/(max_loop-i_loop)

thisspan.posLeft+=x_step[spancounter]

thisspan.posTop+=y_step[spancounter]

spancounter++

}

}

i_loop++

var timer=setTimeout("explode_IE()",pause)

}

else {

spancounter=0

clearTimeout(timer)

var timer=setTimeout("changeimage()",2000)

}

}

</SCRIPT>

<SCRIPT>

if (document.all) {

for (i=0;i<=y_slices-1;i++) {

for (ii=0;ii<=x_slices-1;ii++) {

document.write("<span id=‘span"+spancounter+"‘ class=‘spanstyle‘></span>")

spancounter++

}

}

spancounter=0

}

</SCRIPT>

</body>

</html>

有意思的图片组合飞入效果,布布扣,bubuko.com

时间: 2024-11-03 21:38:15

有意思的图片组合飞入效果的相关文章

ECSHOP添加购物车加图片飞入效果

为ECSHOP的添加购物车,加入图片飞入效果. 首先: 在goods.dwt中查找添加购物车按钮: 为添加购物车按钮加上id: 例如: <a id="iproduct_{$goods.goods_id}" href="javascript:{addToCart({$goods.goods_id})"> <img src="images/bnt_cat.gif" /></a> 然后:在js中加入: <scr

CSS3图片折角效果

本篇文章由:http://xinpure.com/css3-picture-angle-effect/ 图片折角效果主要是通过设置 border 属性实现的效果 效果预览 效果解析 假设我们将一个元素的 width .height 都设置为0,然后再将 border 设置为 80px,上下和左右边框分别为两种不同的颜色 即: width: 0; height: 0; border: 80px solid; border-color: #00a67c #333; 这时我们可以看到,四条边框像四个三

贝塞尔曲线实现购物车飞入效果

代码地址如下:http://www.demodashi.com/demo/12618.html 前言 做了一个模仿添加物品飞入购物车效果的例子,下面来讲讲它的简单使用 将涉及到以下内容: 工具类的使用 项目结构图与效果图 程序设计与实现 一. 工具类设计 工具类比较多代码,这里就不每个都贴出来了,如下截图为工具类 二. 工具类的使用 飞入购物车效果我封装成了一个工具类FlyAnimtor,下面讲讲它的使用. 如果你想使用飞入效果,你可以这样写: FlyAnimtor.getInstance().

Windows界面编程第十二篇 位图显示特效 飞入效果与伸展效果

分享一下我老师大神的人工智能教程吧.零基础!通俗易懂!风趣幽默!还带黄段子!希望你也加入到我们人工智能的队伍中来!http://www.captainbed.net 转载请标明出处,原文地址:http://blog.csdn.net/morewindows/article/details/8696726 欢迎关注微博:http://weibo.com/MoreWindows Windows界面编程之位图显示特效系列目录: 1. <Windows界面编程第九篇位图显示特效交错效果> http:/

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

jquery实现上传图片及图片大小验证、图片预览效果代码

jquery实现上传图片及图片大小验证.图片预览效果代码 上传图片验证 */ function submit_upload_picture(){     var file = $('file_c').value;     if(!/.(gif|jpg|jpeg|png|gif|jpg|png)$/.test(file)){            alert("图片类型必须是.gif,jpeg,jpg,png中的一种")        }else{      $('both_form')

图片的幻灯片效果

简单实现图片的幻灯片效果 设置-->"上一页"和"下一页"按钮 NSUInteger select; //创建图片视图控件 v1=[[UIImageView alloc] initWithFrame:CGRectMake(10, 30, 400, 400)]; select=0; v1.image=arr[select]; //添加到视图 [self.view addSubview:v1]; //按钮的响应方法 -(void)butaction:(UIButt

JavaScript函数实现鼠标指向后带图片的提示效果

转载:http://www.cnblogs.com/jack86514/archive/2009/04/01/1427584.html 当我们在写一个网页程序的时候,很多方法可以提供页面的动态显示,从而提高页面的视觉效果. 本例就是通过一个简单的Javascript代码动态显示图片的信息的,其实这样的例子很多,所以这里只做简单的说明了. 现在就创建一个页面,代码如下所示: <html> <head> <meta http-equiv="Content-Type&qu

[JS]图片自动切换效果(学习笔记)

上次在下载的网页中看到 javascript实现图片自动切换效果: <style text="text/css"> /*图片滚动栏*/.container, .container * {    margin: 0;    padding: 0;}.container {    width: 1005px;    height: 395px;    float: right;    overflow: hidden;    position: relative;    rig