`
panfugen
  • 浏览: 26164 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

JS实现图片变换效果

阅读更多

最近一直在写JS+CSS+DIV的东西

下面介绍一下JS比较常用的一个功能

js核心代码:

<script language="javascript">
//键盘监听事件
document.onkeydown = onkey;
//五个按钮循环
var classIndex = 0 ;
var classCount = 5;

isselected = false;
var url = null;
function onkey(e)
{

	ev = window.event ? event : e;
	key = ev.which ? ev.which : ev.keyCode;
	switch(key)
	{
		case 37://左
		 			
			break;
		
		case 39://右
		 		
			break;
	
		case 38: //上
		 			if(classIndex>0){
				classIndex = classIndex -1;
			}else if(classIndex<=0){
				classIndex = classCount - 1;
			}
			changeImgEvt();
			isselected = false;
			break;
		
		case 40://下
		          if(classIndex<classCount-1){
				classIndex += 1;
			}else if(classIndex>=classCount-1){
				classIndex = 0 ;
			}
			changeImgEvt();
			isselected = false;
		    break;
		
		case 13://选中链接地址
			if(url!=null&&url!=''){
				location.href = url;
			}else{
				location.href ="";
			}
			
		 	isselected = false;		
			break;
		      		
		case 340:
			iPanel.back();
			break;
	
		default:
			isselected = false;
			break;
	}
}


function changeImgEvt(){
	var sectFlag = false;
	var c_index = classIndex + 1;
	
	 
	for(var i=0;i<5;i++){
		$('menu'+(i+1)).style.visibility='hidden';
	}
	if(c_index==1){//选中第一个按钮
		$('contextImg').src='换成图片1地址';
	}else if(c_index==2){//选中第二个按钮
		$('contextImg').src='换成图片2地址'';
	}else if(c_index==3){//选中第三个按钮
		$('contextImg').src='换成图片3地址'';
	}else if(c_index==4){//选中第四个按钮
		$('contextImg').src='换成图片4地址'';
	}else if(c_index==5){//个选中第五个按钮
		$('contextImg').src='换成图片5地址'';
	}
	$('menu'+c_index).style.visibility='visible';
	sectFlag = true;
	if(sectFlag){
		goHrefPageEvt(c_index);
	}
	
}


function goHrefPageEvt(c_index){
	 
	if(c_index==1){//跳转
		url ="选中图片1将要跳转的地址";
		 
	}else if(c_index==2){//跳转
		url ="选中图片2将要跳转的地址";
	}else if(c_index==3){//休闲游戏
		url ="选中图片3将要跳转的地址";
	}else if(c_index==4){
		url = "选中图片4将要跳转的地址";
	}else if(c_index==5){
		url ="";		
		 	}
	 }

function $(eleName){
	return document.getElementById(eleName);
}
</script>

 

 

页面核心代码

<div style="align:center;width:1280px;height:720px;border:0px solid red;">
		<div style="width:1280px;height:720px;border:0px solid red;background-image: url('background.jpg');">
			<div style="text-align:left;margin-left:112px;">
			<table style="border:0px solid red;width:1100px;height:720px;">
				<tr>
					<td style="border:0px solid red;width:310px;">
						<div style="margin-top:58px;">
							&ldquo;<img id="menu1" src="1.jpg"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu2" src="2.jpg" style="visibility: hidden;"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu3" src="3.jpg" style="visibility: hidden;"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu4" src="4.jpg" style="visibility: hidden;"/>
						</div>
						<div style="margin-top:17px;">
							<img id="menu5" src="5.jpg" style="visibility: hidden;"/>
						</div>
					</td>
					<td style="border:0px solid red;vertical-align: top;">
						 
						 <div style="margin-left:60px;margin-top:88px;">
						  <marquee  border="0" direction="left"  height="95px" width="660px" scrollDelay="50"  scrollamount="3"  style="padding: 0px;"> 
								  <font size="9px" color="white">滚动文字</font>
                                  </marquee> 
							
						</div>
						<div style="margin-left:60px;margin-top:10px;">
							<img id="contextImg" src="1.jpg" />
						<div>
						 					</td>
				</tr>
			</table>
			</div>
		</div>	
	</div>

 

分享到:
评论

相关推荐

    JS图片变换效果[借鉴].pdf

    JS 图片变换效果实现技术要点 本文主要介绍了 JS 图片变换效果的实现技术要点,涵盖了 HTML、CSS、JavaScript 等多方面的技术要点。 一、HTML 结构 在 HTML 结构中,我们可以看到使用了 XHTML 1.0 Transitional ...

    js实现图片的渐渐变换

    以上就是用JavaScript实现图片渐变变换的基本步骤。你可以根据需求调整CSS的过渡效果,比如改变变换的属性(如`transform`),或者调整过渡时间和动画曲线。同时,也可以结合其他JavaScript库(如jQuery)来简化DOM...

    JS_图片变换效果.

    ### JS 图片变换效果知识点详解 #### 一、概述 在网页设计中,动态效果能够极大地提升用户体验。本文档介绍了一种使用JavaScript实现的图片自动切换功能,这不仅增加了页面的交互性,还提升了视觉吸引力。 #### 二...

    javascript 实现点击超链接变换图片

    例如,可以添加`onerror`事件监听器来处理图片加载失败的情况,或者使用CSS过渡效果使图片变换更加平滑。以上就是使用JavaScript实现点击超链接变换图片的基本原理和实现方式,希望能对你有所帮助。

    图片变换效果图片变换效果图片变换效果图片变换效果

    以下将分别从CSS、HTML和JavaScript的角度详细解释如何实现图片变换效果。 首先,CSS(层叠样式表)是用于描述网页及应用程序用户界面外观和表现的主要样式语言。在CSS中,可以使用多种属性来实现图片变换效果,如`...

    原生js网格图片拖拽位置和大小变换效果

    在本文中,我们将深入探讨如何使用原生JavaScript实现一个功能丰富的网格图片拖拽及大小变换效果。这个功能常用于各种富交互式应用,如在线画板、图片编辑器或者自定义布局的界面设计。我们将围绕以下几个核心知识点...

    JS实现图片翻页效果

    本文将深入探讨如何使用JavaScript实现图片翻页效果,为用户提供更丰富的视觉体验。 图片翻页效果通常应用于电子书籍、画册或者产品展示等场景,它通过模拟真实的物理翻页动作,使用户在浏览时有更直观、真实的感受...

    javascript经典特效---图片变形扭曲脚本.rar

    在这个"图片变形扭曲脚本"中,我们主要探讨的是如何利用JavaScript来实现图片的变形和扭曲效果。 首先,JavaScript的核心在于DOM(Document Object Model)操作。DOM是HTML或XML文档的结构化表示,通过JavaScript,...

    js_图片拖拽位置和大小变换效果.zip

    这个"js_图片拖拽位置和大小变换效果.zip"压缩包文件很可能包含了一个示例项目,演示了如何使用JavaScript技术来实现这些功能。下面将详细解释这些技术点。 1. **图片拖动**:在HTML5中,`draggable`属性可以轻松地...

    JS实现翻书效果图片浏览

    实现JS翻书效果图片浏览主要涉及到HTML结构的构建、CSS3的3D变换以及JavaScript的事件处理和动态更新。通过结合这些技术,可以创建出具有沉浸式体验的数字图书,提供用户友好的图片浏览方式。在实际项目中,还可以...

    纯js实现图片放大效果

    总结,纯JavaScript实现图片放大效果主要涉及到DOM操作、事件监听、CSS变换以及动画效果的创建。通过理解这些基本概念并进行实践,你可以创建出更具交互性的网页应用。在实际项目中,还可以结合现代前端框架如React...

    JS实现图片切换和数字随图片变换

    "JS实现图片切换和数字随图片变换"是一个常见的需求,特别是在展示产品或服务的网站中。这种功能可以让用户通过点击或悬停在数字链接上,轻松地浏览一系列相关的图片。下面我们将详细探讨如何使用JavaScript来实现这...

    js写的图片变换

    以上就是基于JavaScript实现图片变换的基本原理和方法。在实际项目中,你可能需要根据具体需求进行调整,比如增加动画效果、处理多个图片或动态加载图片等。通过熟练掌握这些技巧,你可以为网站或应用创造出更加丰富...

    JS 实现3D立体效果的首页轮播图

    总的来说,使用JavaScript实现3D立体轮播图是一个结合了前端技术、视觉设计和用户体验的综合项目。通过理解并实践这些知识点,开发者不仅可以创造出独特的网页效果,还能提升自己的JavaScript编程和CSS3使用技能。

    js.rar_javascript

    在“js.rar_javascript”这个压缩包中,我们主要探讨的是如何利用JavaScript实现图片变换效果,这种效果通常用于提升用户体验,增加网站的吸引力。 在网页特效中,JavaScript可以用来控制HTML元素,包括图片,使其...

    flash+js 图片变换

    本话题主要探讨的是如何结合Flash和JavaScript技术实现动态的图片变换效果,以创建吸引人的用户界面。Flash以其强大的动画处理能力而闻名,而JavaScript则在网页交互方面表现出色,两者结合可以实现更丰富的用户体验...

    js多种图片展示效果

    以下是一些基于JavaScript实现的图片展示效果的详细解释: 1. **163选项卡效果**:这是一种常见的网页设计技术,通过点击或滑动在多个内容区域之间切换。在图片展示中,它可能表现为一组图片被分组在不同的选项卡下...

    js图片滑动切换效果

    本篇文章将深入探讨如何使用JS实现图片滑动切换效果,并介绍几种常见的特效。 一、基本原理 图片滑动切换效果通常基于时间间隔或用户交互(如点击按钮)来改变显示的图片。JS可以监听这些事件,并更新HTML中的图片...

    html图片变换的源代码

    有很多开源的jQuery插件,如Slick、Bootstrap Carousel等,可以快速实现图片变换效果。 4. **现代库和框架**:如上述的GlideView.html可能就是一个使用现代库实现的例子。现在有许多库,如Swiper、Flickity等,它们...

    js实现的图片切换效果

    仿照常见的那个图片变换flash做的效果,纯js。 有很多切换效果 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除...

Global site tag (gtag.js) - Google Analytics