JS+DIV实现鼠标划过切换层效果的方法
本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法。分享给大家供大家参考。具体实现方法如下:
<html> <head> <title>DIV层切换</title> <script language="JavaScript" type="text/javascript"> /********************************************* 功能: 通用DIV切换函数 参数: divID --当前DIV的ID号;divName --要改变的这一组DIV的命名前缀;zDivCount --这一组DIV的个数-1 BY : JetKing 2007.06 *********************************************/ function ChangeDiv(divId,divName,zDivCount) { for(i=0;i<=zDivCount;i++) { document.getElementById(divName+i).style.display="none"; } document.getElementById(divName+divId).style.display="block"; } </script> </head> <body> 层切换示例:<br>By:JetKing(www.80Boby.Com)<br> <span onMouseMove="JavaScript:ChangeDiv('0','JKDiv_',2)" style="cursor:hand;">内容一</span> <span onMouseMove="JavaScript:ChangeDiv('1','JKDiv_',2)" style="cursor:hand;">内容二</span> <span onMouseMove="JavaScript:ChangeDiv('2','JKDiv_',2)" style="cursor:hand;">内容三</span> <div id="BigDIV" style="border:solid 1px #cccccc;width:460px;margin:10px;"> <div id="JKDiv_0" style="font-size:14px;margin:20px;color:#FF0000;"> 内容部分第一区<br><img src="images/common/watermark.gif"></div> <div id="JKDiv_1" style="display:none;font-size:14px;margin:10px;color:#FF0000;"> 内容部分第二区<br><img src="logo.gif"></div> <div id="JKDiv_2" style="display:none;font-size:14px;margin:10px;color:#FF0000;"> 内容部分第三区</div> </div> </body> </html>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
javascript实现列表切换效果
IE兼容性没处理,确切的说不太会,还望指点一二 思路: 1.js获取要给定点击事件的按钮组对象,如btns=document.xxx(),遍历过程绑定事件之前先取得当前对象的下标eg:btns[i].index=i; 2.匹配index为将要显示的DOM对象 3.点击过程中要切换class,先判断是否含有指定class,有就删除,没有就添加指定class.注:if(!null)为真. 4.onmouseover同理 HTML <!DOCTYPE html> <html lang=&quo
-
js实现简单的可切换选项卡效果
本文实例讲述了js实现简单的可切换选项卡效果的方法.分享给大家供大家参考.具体如下: 如图,最简单的纯粹的选项卡 第一步,当然是先写html代码和css样式 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>无标题文档</title> <style> body,ul,li{margin:0; padding:0; font:12
-
js实现横向百叶窗效果网页切换动画效果的方法
本文实例讲述了js实现横向百叶窗效果网页切换动画效果的方法.分享给大家供大家参考.具体分析如下: 这是一款很简洁但是效果却不错的网页切换效果,点击新网页后,网页会出现蓝白相间的百叶窗线条自动切换,直到网页全部显示完全.代码如下: 复制代码 代码如下: <html> <head> <title>js网页百叶窗动态切换效果</title> <style> <!-- .intro{ position:absolute; left:0; top:0
-
简单纯js实现点击切换TAB标签实例
一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示 源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &
-
js实现点击切换TAB标签实例
本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM
-
JS实现点击颜色块切换指定区域背景颜色的方法
本文实例讲述了JS实现点击颜色块切换指定区域背景颜色的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS实现点击颜色块切换指定区域的背景颜色</title> </head> <body> <div align="center"> <table bgcolor=#F8F8F8 border="0" width=&q
-
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
今天来分享一下鼠标点击按钮,图片进行切换+图片自动切换+点击左右按钮图片进行切换的三种效果的组合代码. 最后的效果如下: Html代码部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <met
-
JS+DIV实现鼠标划过切换层效果的方法
本文实例讲述了JS+DIV实现鼠标划过切换层效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>DIV层切换</title> <script language="JavaScript" type="text/javascript"> /********************************************* 功能: 通用DIV切换函数 参数: d
-
JS+DIV实现鼠标划过切换层效果的实例代码
<style>/*栏目切换样式开始*/.none {display: none;}.block {display: block;}/*头部样式*/.s_c {width:800px;text-align: center;}.s_c ul{clear:both;margin:0;}.s_c li{list-style:none;float:left;position: relative;width: 70px;}/**/.c_0 {background-color: #CCCCCC;} /*隐藏
-
js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
本文实例讲述了js实现的鼠标滚轮滚动切换页面效果的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html> <html> <head> <title>wheel</title> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <script type=
-
js实现使用鼠标拖拽切换图片的方法
本文实例讲述了js实现使用鼠标拖拽切换图片的方法.分享给大家供大家参考.具体实现方法如下: <script type="text/javascript" src="js/jquery.min.js"></script> <style type="text/css"> *{margin:0;padding:0;} .m-slider{width:600px;margin:0 auto 10px !importan
-
JS实现从网页顶部掉下弹出层效果的方法
本文实例讲述了JS实现从网页顶部掉下弹出层效果的方法.分享给大家供大家参考.具体如下: 这里介绍的JavaScript动画背景出层,实现从网页顶部掉下来的感觉,停止时还带有缓冲弹跳的意思,从上到下显示的动画弹出层,带关闭功能,没有怎么美化,喜欢的用时候息动手美化下,觉得不错. 运行效果如下图所示: 具体代码如下: <HTML><HEAD><TITLE>窗口从上掉下来</TITLE> </HEAD> <BODY bgColor=#fef4d9
-
Vue鼠标滚轮滚动切换路由效果的实现方法
一个根路由组件(app下的根路由组件, 需要滚动切换的作为其子组件) 在根路由组件添加鼠标滚动时间监听, 在mounted中调用监听 当跳转到其他路由(跳出这个根路由时), 根路由组件会被销毁, 因此在根路由的destroed钩子函数中清除掉事件监听 Vue路由切换过渡 vue的过渡 <transition :name="transitionName"> <div></div> </transition> 使用transition 包裹需
-
js实现鼠标滚轮控制图片缩放效果的方法
本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xhtm
-
JS+DIV+CSS实现仿表单下拉列表效果
本文实例讲述了JS+DIV+CSS实现仿表单下拉列表效果.分享给大家供大家参考.具体如下: JS+DIV+CSS实现仿表单下拉列表效果,是完全用CSS技术再配合JS实现的效果,用来代替传统的Select下拉框,虽然目前来说,此代码还有些粗糙,但对于美化列表的样式来说,可能以后会更方便,要比Select方便的多. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-div-css-fselect-codes/ 具体代码如下: <!DOCTYPE
-
JS实现消息来时让网页标题闪动效果的方法
本文实例讲述了JS实现消息来时让网页标题闪动效果的方法.分享给大家供大家参考,具体如下: <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>无标题页</title> <script> var g_blinkid = 0; var g_blinkswitch = 0; var g_blinktitle = doc
随机推荐
- PHP高效获取远程图片尺寸和大小的实现方法
- mysql修改表结构方法实例详解
- Java设计模块系列之书店管理系统单机版(一)
- iOS动画案例(1) 类似于qq账号信息里的一个动画效果
- iOS 标签Tag列表的实现代码
- Java concurrency集合之ArrayBlockingQueue_动力节点Java学院整理
- Oracle客户端 NLS_LANG 的设置方法
- python检查指定文件是否存在的方法
- asp.net(C#) Xml操作(增删改查)练习
- Python自动重试HTTP连接装饰器
- PHP安全上传图片的方法
- apache https配置详细步骤讲解
- ubuntu上在androidstudio中启动emulator闪退的解决方法
- 如何辨别二手返修板卡
- Springboot实现阿里云通信短信服务有关短信验证码的发送功能
- c++通过引用实现三个数字求最大值
- php实现分页显示
- Python基于回溯法子集树模板解决马踏棋盘问题示例
- 浅谈Android 的线程和线程池的使用
- 深入解析C++设计模式编程中解释器模式的运用