最近一直在写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;">
“<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 图片变换效果实现技术要点 本文主要介绍了 JS 图片变换效果的实现技术要点,涵盖了 HTML、CSS、JavaScript 等多方面的技术要点。 一、HTML 结构 在 HTML 结构中,我们可以看到使用了 XHTML 1.0 Transitional ...
以上就是用JavaScript实现图片渐变变换的基本步骤。你可以根据需求调整CSS的过渡效果,比如改变变换的属性(如`transform`),或者调整过渡时间和动画曲线。同时,也可以结合其他JavaScript库(如jQuery)来简化DOM...
### JS 图片变换效果知识点详解 #### 一、概述 在网页设计中,动态效果能够极大地提升用户体验。本文档介绍了一种使用JavaScript实现的图片自动切换功能,这不仅增加了页面的交互性,还提升了视觉吸引力。 #### 二...
例如,可以添加`onerror`事件监听器来处理图片加载失败的情况,或者使用CSS过渡效果使图片变换更加平滑。以上就是使用JavaScript实现点击超链接变换图片的基本原理和实现方式,希望能对你有所帮助。
以下将分别从CSS、HTML和JavaScript的角度详细解释如何实现图片变换效果。 首先,CSS(层叠样式表)是用于描述网页及应用程序用户界面外观和表现的主要样式语言。在CSS中,可以使用多种属性来实现图片变换效果,如`...
在本文中,我们将深入探讨如何使用原生JavaScript实现一个功能丰富的网格图片拖拽及大小变换效果。这个功能常用于各种富交互式应用,如在线画板、图片编辑器或者自定义布局的界面设计。我们将围绕以下几个核心知识点...
本文将深入探讨如何使用JavaScript实现图片翻页效果,为用户提供更丰富的视觉体验。 图片翻页效果通常应用于电子书籍、画册或者产品展示等场景,它通过模拟真实的物理翻页动作,使用户在浏览时有更直观、真实的感受...
在这个"图片变形扭曲脚本"中,我们主要探讨的是如何利用JavaScript来实现图片的变形和扭曲效果。 首先,JavaScript的核心在于DOM(Document Object Model)操作。DOM是HTML或XML文档的结构化表示,通过JavaScript,...
这个"js_图片拖拽位置和大小变换效果.zip"压缩包文件很可能包含了一个示例项目,演示了如何使用JavaScript技术来实现这些功能。下面将详细解释这些技术点。 1. **图片拖动**:在HTML5中,`draggable`属性可以轻松地...
实现JS翻书效果图片浏览主要涉及到HTML结构的构建、CSS3的3D变换以及JavaScript的事件处理和动态更新。通过结合这些技术,可以创建出具有沉浸式体验的数字图书,提供用户友好的图片浏览方式。在实际项目中,还可以...
总结,纯JavaScript实现图片放大效果主要涉及到DOM操作、事件监听、CSS变换以及动画效果的创建。通过理解这些基本概念并进行实践,你可以创建出更具交互性的网页应用。在实际项目中,还可以结合现代前端框架如React...
"JS实现图片切换和数字随图片变换"是一个常见的需求,特别是在展示产品或服务的网站中。这种功能可以让用户通过点击或悬停在数字链接上,轻松地浏览一系列相关的图片。下面我们将详细探讨如何使用JavaScript来实现这...
以上就是基于JavaScript实现图片变换的基本原理和方法。在实际项目中,你可能需要根据具体需求进行调整,比如增加动画效果、处理多个图片或动态加载图片等。通过熟练掌握这些技巧,你可以为网站或应用创造出更加丰富...
总的来说,使用JavaScript实现3D立体轮播图是一个结合了前端技术、视觉设计和用户体验的综合项目。通过理解并实践这些知识点,开发者不仅可以创造出独特的网页效果,还能提升自己的JavaScript编程和CSS3使用技能。
在“js.rar_javascript”这个压缩包中,我们主要探讨的是如何利用JavaScript实现图片变换效果,这种效果通常用于提升用户体验,增加网站的吸引力。 在网页特效中,JavaScript可以用来控制HTML元素,包括图片,使其...
本话题主要探讨的是如何结合Flash和JavaScript技术实现动态的图片变换效果,以创建吸引人的用户界面。Flash以其强大的动画处理能力而闻名,而JavaScript则在网页交互方面表现出色,两者结合可以实现更丰富的用户体验...
以下是一些基于JavaScript实现的图片展示效果的详细解释: 1. **163选项卡效果**:这是一种常见的网页设计技术,通过点击或滑动在多个内容区域之间切换。在图片展示中,它可能表现为一组图片被分组在不同的选项卡下...
本篇文章将深入探讨如何使用JS实现图片滑动切换效果,并介绍几种常见的特效。 一、基本原理 图片滑动切换效果通常基于时间间隔或用户交互(如点击按钮)来改变显示的图片。JS可以监听这些事件,并更新HTML中的图片...
有很多开源的jQuery插件,如Slick、Bootstrap Carousel等,可以快速实现图片变换效果。 4. **现代库和框架**:如上述的GlideView.html可能就是一个使用现代库实现的例子。现在有许多库,如Swiper、Flickity等,它们...
仿照常见的那个图片变换flash做的效果,纯js。 有很多切换效果 0 : 矩形收缩转换。 1 : 矩形扩张转换。 2 : 圆形收缩转换。 3 : 圆形扩张转换。 4 : 向上擦除。 5 : 向下擦除。 6 : 向右擦除。 7 : 向左擦除...