多图展示点击切换效果模拟的flash效果,点小图放大显示,再点恢复默认。

多图展示点击切换效果模拟的flash效果,点小图放大显示,再点恢复默认。

类似于Flash制作的一个图片展示效果

html,body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#222; left:0; top:0; width:100%; height:100%;zIndex:-2;}

=NX*NY*SP){
xrun=0;
run=false;
if(dR==-1)Parent.obj.style.zIndex = 0;
dR = -dR;
}
}
}

this.GE1 = function (N1,N2){
with(this){
if(dR==1){
px = L;
py = T;
dx = ((Parent.L + L) - (x * Parent.W)) / SP;
dy = ((Parent.T + T) - (y * Parent.H)) / SP;
pw = W;
ph = H;
dw = (Parent.W - W) / SP;
dh = (Parent.H - H) / SP;
ipx = -L;
ipy = -T;
idx = ((x * Parent.W) - L) / SP;
idy = ((y * Parent.H) - T) / SP;
}
obj.style.visibility="visible";
if(img.height>document.body.offsetHeight)oH=(img.height-document.body.offsetHeight)/2; else oH = 0;
if(img.width>document.body.offsetWidth/2)oW=(img.width-(document.body.offsetWidth/2))/2; else oW = 0;
for(i=0;i"+TXTSRC[N%nI].innerHTML+"

";
run = true;
obj.style.zIndex = 1;
for(var i=0;i

IMGBOX

Click the thumbnails on the left for a larger image. The description connected to the clicked image is displayed here.

Note: for performance reasons, images are not resized and must be all of the same size.









the river

Awaken from my nap by the river

transparency

Its transparency was hypnotizing.

cold

Currents of cold water played with light.

sank in

I threw a few nuts into the river. They floated for a while, then sank in.

masked

A wide stepping stone masked the water's depth.

a glimpse

Later on, I had a glimpse of the river's bed.

forgotten

The wheelchair made a noise. Again, I had forgotten about my legs.

floated

Still, I floated in oblivion of things too real.

for me

I stared fixedly at the water's open arms. The stream was singing for me.

Loading...

m00=document.getElementById("imgsrc").getElementsByTagName("img");
m01=m00.length;function images_loading_bar(){m02=0;
for(i=0;i

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

(0)

相关推荐

  • IE6下通过a标签点击切换图片的问题

    不过, 国内大部分用户还是在用IE6. IE6下通过a标签的onclick事件切换某个图片时, 有可能出现图片无法加载问题, httpwatch抓取表现结果是abort. 测试了一下,找到了解决办法. a标签事件一般情况是这样写的, 也可能是绑定事件, 解决方式一样: 1. <a href="javascript://" onclick="dosomething()">a1</a> 2. <a href="javascript

  • Jquery实现点击切换图片并隐藏显示内容(2种方法实现)

    我们的电脑屏幕大小是固定的,那么如何在有限的空间放更多的内容呢? 我们应该给用户足够的选择权,当他们想要看某些内容的时候可以很快的看到,不想看的时候就把他隐藏.于是就有了题目说的这个问题. 其实这个问题很简单,那么,之所以拿出来跟大家分享,一方面我们大家相互交流,另一方面,也是对自己的学习的一种总结. 这里我想到了两种方法,给大家分享一下. 好了不多说,下面看代码: 第一种,是常规的方法: [javascript] 复制代码 代码如下: $(function(){ var images = ['

  • 多图展示点击切换效果模拟的flash效果,点小图放大显示,再点恢复默认。

    多图展示点击切换效果模拟的flash效果,点小图放大显示,再点恢复默认. 类似于Flash制作的一个图片展示效果 html,body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#222; left:0; top:0; width:100%; height:100%;zIndex:-2;} =NX*NY*SP){ xrun=0; run=false; if(dR==-1

  • js实现点击切换和自动播放的轮播图

    本文实例为大家分享了js实现点击切换和自动播放的轮播图,供大家参考,具体内容如下 轮播图案例 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0"&

  • jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)

    本文实例讲述了jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果.分享给大家供大家参考,具体如下: 该插件乃文章作者所写,目的在于提升作者的js能力,也给一些js菜鸟在使用插件时提供一些便利,老鸟就悠然地飞过吧. 此插件旨在实现目前较为流行的点击放大图片并左右点击切换图片的效果,您可以根据自己的实际需求来设置是否添加左右切换图片的效果.整体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit

  • JS实现淡蓝色简洁竖向Tab点击切换效果

    本文实例讲述了JS实现淡蓝色简洁竖向Tab点击切换效果.分享给大家供大家参考.具体如下: 这里介绍一款淡蓝色竖向简洁Tab,选项卡,是很多人都喜欢的一种风格. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-blue-v-tab-cha-style-menu-codes/ 具体代码如下: <html> <head> <meta http-equiv="Content-Type" content=&qu

  • JavaScript实现多个重叠层点击切换效果的方法

    本文实例讲述了JavaScript实现多个重叠层点击切换效果的方法.分享给大家供大家参考.具体如下: <!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"&

  • flask+layui+echarts实现前端动态图展示数据效果

    效果图: 该效果主要实现一个table展示数据,并在下方生成一个折线图. 实现方式: 1.首先需要对表格进行一个数据加载,这里用到了layui的table.render,具体用法可以参考 https://www.layui.com/doc/modules/table.html html部分: <table class="layui-hide" id="reportTableId" lay-filter="currentTableFilter"

  • Qt基于定时器实现动图展示效果

    本文实例为大家分享了Qt基于定时器实现动图展示的具体代码,供大家参考,具体内容如下 总体概述 (1)总体介绍 动图展示主要是将已有的动图逐帧图片连续输出,达到视觉上的动态图效果,本次介绍两例,分别为单一动图和分组动图. 主要原理是设置一个定时器,然后随设置的秒数将资源中的逐帧图片输出,让图片连续变化. (2)素材获得途径 关于素材来源,可以到网站下载现成的逐帧图片素材包,也可以找到自己喜欢的动态图,通过软件(如:爱奇艺万能播放器)将动图逐帧保存得到素材. (注意:不论通过哪种方式获得素材,都需要

  • 简单纯js实现点击切换TAB标签实例

    一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示  源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • Android App仿微信界面切换时Tab图标变色效果的制作方法

    概述 1.概述 学习Android少不了模仿各种app的界面,自从微信6.0问世以后,就觉得微信切换时那个变色的Tab图标屌屌的,今天我就带大家自定义控件,带你变色变得飞起~~ 好了,下面先看下效果图: 清晰度不太好,大家凑合看~~有木有觉得这个颜色弱爆了了的,,,下面我动动手指给你换个颜色: 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理. 2.原理介绍 通过上面的效果图,大家可能也猜到了,我们的图标并非是两张图片,而是一张图,并且目标颜色是可定制的,谁让现在动不动就谈个性化呢. 那么我

  • js实现点击切换checkbox背景图片的简单实例

    在制作网页的过程中,经常需要实现点击切换背景图片的效果,本文关注的是表单中checkbox背景图片切换的实现.如图,在输入用户名和密码后,用户需要选择是否记住密码 图片背景为白色表示未勾选状态 ,背景为蓝色表示勾选状态 . HTML源码如下: <div class="check"> <input id="checkbox1" class="checkbox" type="checkbox" checked =

随机推荐