js特效--鼠标移动切换内容
我们经常在网页上看到,当鼠标移动到一个小标题,同一个内容框的东西发生了变化,我们移动到图片出现图片信息,移动到新闻,就出现新闻消息。感觉很神奇,接触之后才发现,基本功能的实现还是很简单的。
首先,写一个html页面,并定义两个小标题,就简单的显示‘新闻’和‘图片’
并分别给两个标题定义两个不同的id,这里为了方便定义了一个无序列表
(为了在鼠标放在文字上,有变化,可以加上链接)
<ul> <a href="#" > <li id="a" >新闻</li></a> <a href="#" > <li id="b" >图片</li></a> </ul>
写两个框分别来放新闻内容和图片内容,并分别给他们定义一个id
为了让两个框出现在同一个位置,可以对下面的那个框设置不可见: style="display:none"
display 属性规定元素应该生成的框的类型。none 表示不显示
<div width="300" height="300" id="content" style="display:''">今日新闻</div> <div width="300" height="300" id="content2" style="display:none">图片…</div>
(框的具体放法,看个人喜好,可以给标签加上不同的样式)
简单的效果的图片实例
鼠标移动到“新闻”和“图片”出现不同的内容,为了实现这一效果才,采用javascript写一个方法change()来控制
为了对鼠标停留的标签对象进行操作,必须知道要对哪个框进行操作,还要得到它的id,所以在方法中传入参数,这里为了方便传入了两个参数,操作的标题框对象和对应的内容框的id
效果:当鼠标移到“图片”上,内容框显示图片
当鼠标移到“新闻”上,内容框显示的是今日新闻
//给方法传入参数,传入当前的操作对象和对应的大框的id function change(li,id){ //获得当前列表标签中的对象 var div_li= document.getElementById(id); //如果当前对象不可见 if(div_li.style.display=="none"){ //就改成可见的, div_li.style.display=""; //为了看到明显一点的效果,改变列表项的背景颜色 li.style.background="#ffff00"; //根据id,改变另一个内容框不可见 if(id=="content"){ var div2 = document.getElementById('content2'); div2.style.display='none'; }else{ var div2 = document.getElementById('content'); div2.style.display='none'; } }
最后,在文字列表中用onmouseover(鼠标滑过事件)去调用change方法即可
(记得给参数传入当前对象,和对应的大框的id)
<ul> <a href="#" > <li id="a" onmouseover="change(this,'content')">新闻</li></a> <a href="#" > <li id="b" onmouseover="change(this,'content2')">图片</li></a> </ul>
就这样简单的切换效果就出来了
相关推荐
CSS3鼠标移动视差切换飞机特效.zip
主要介绍了JavaScript实现的开关灯泡点击切换特效,涉及javascript事件响应及页面元素属性动态操作相关实现技巧,需要的朋友可以参考下
封装完整、使用方便,拥有超炫的切换效果,切换倒计时进度条显示,点击图片可以链接到指定url,每张图片下可以显示标题,当标题超过一行时,移动鼠标到标题内会自动展开。 效果图请参考...
实例218 跟随鼠标移动的图片 340 实例219 可以左右拖动的图片 340 实例220 随意拖动图片 342 实例221 当鼠标经过图片时显示图片 344 实例222 改变图片获取焦点时的状态 345 实例223 抖动的图片 346 实例...
1.鼠标悬停图片切换查看器 2.鼠标移动图片放大 3.鼠标移动切换内容 4.贵财下拉菜单案例 5.JS图片放大镜功能-类似淘宝 6.下一页翻页跳转功能 3.di
354个CSS3特效源码合集(HTML+CSS+JavaScript): HTML5跨浏览器纯CSS工具提示特效, 炫酷CSS3鼠标滑过图片动画特效, 移动手机APP滑动手指切换图片特效,2种不可思议的纯CSS3 loading加载动画特效等等。
首页的主要内容是查看最新上架的各类图书、重点关注的图书、近7日网上畅销的图书、书讯快递,以及根据图书分类的方式查看各类图书,首页应实现如下...5、Tab切换特效,使最新上架内容实现Tab切换特效,当鼠标指针移到某
7.11 跟随鼠标移动的星星... 204 7.12 可以用鼠标拖动的文字... 206 7.13 使用鼠标拖动图片... 207 7.14 交换式图片按钮... 209 7.15 显示或隐藏图片... 210 7.16 在鼠标单击处显示图片... 211 7.17 鼠标经过...
实例177 当鼠标移动到超级链接时改变超级链接颜色 277 实例178 改变超级链接背景色 278 6.2 超级链接控制 279 实例179 建立E-mail超级链接 280 实例180 获取页面中的全部超级链接 281 实例181 将网站设为首页 282 ...