菜单

js达成鼠标感应图片展示的章程,js达成鼠标感应展示

2019年8月31日 - Json

js完毕鼠标感应图片体现的方式

 那篇小说首要介绍了js达成鼠标感应图片展现的主意,实例深入分析了javascript鼠标事件及体制的操作技术,具备一定参谋借鉴价值,须求的朋友能够参照他事他说加以考察下

 

 

本文实例陈诉了js达成鼠标感应图片体现的方法。分享给大家供大家参照他事他说加以考察。具体贯彻格局如下:

 

代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>鼠标感应的图纸展现效果</title>
<!–[if lte IE 6]>
<script language=”Javascript”>
var W3CDOM = (document.createElement() &&
document.getElementsByTagName());
window.onload = pinballEffect;
function pinballEffect()
{
if (!W3CDOM) return;
var allElements = document.getElementsByTagName(‘*’);
var originalBackgrounds=new Array();
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf(‘hovereffect’) >= 0)
{
allElements[i].onmouseover = mouseGoesOver;
allElements[i].onmouseout = mouseGoesOut;
}
}
}
function mouseGoesOver()
{
originalClassNameString = this.className;
this.className += ” lay-on”;
}
function mouseGoesOut()
{
this.className = originalClassNameString;
}
pinballEffect();
</script>
<![endif]–>
<style type=”text/css”>
body {
background:#fff;
font:small/1.5 “宋体”, SimSun, serif;
_font-size:medium;
}
a img {
border:none;
}
ul,
li,
h5 {
list-style:none inside;
margin:0;
padding:0;
}
.recomm {
background:#999;
border:1px solid #666;
width:600px;
height:170px;
overflow:hidden;
padding:10px;
margin:0 auto;
position:relative;
}
.recomm ul {
border:1px solid #fff;
border-left:none;
height:168px;
width:599px;
overflow:hidden;
*position:absolute; /* 化解IE中overflow:hidden无法准确掩盖成分的标题
*/
}
.recomm li {
float:left;
position:relative;
margin-right:-179px;
height:100%;
overflow:hidden;
white-space:nowrap;
text-align:center;
}
.recomm li img {
display:block;
border-left:1px solid #fff;
width:248px;
height:168px;
}
.recomm li h5 {
position:absolute;
bottom:0;
left:0;
height:20px;
width:239px;
line-height:20px;
background:url(../images/1_211621.png) no-repeat;
display:none;
text-align:right;
padding-right:10px;
font-size:1em;
font-weight:normal;
}
.recomm li:hover, .recomm .lay-on {
width:249px;
margin-right:0;
}
.recomm li:hover h5, .recomm .lay-on h5 {
display:block;
}
</style>
</head>
<body>
<div class=”recomm”>
<ul>
<li class=”hovereffect”><a href=”/”
title=”观赏该图形详细消息”><img src=”/images/m01.jpg”
alt=”红叶传情” title=”这里是图表标题” /></a>
<h5>红叶传情 By <a href=”/”
title=”访谈代码家园”>代码家园</a> 二〇〇九.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图片详细音讯”><img src=”/images/m02.jpg”
alt=”野花盛放” title=”这里是图形题目” /></a>
<h5>野花盛放 By <a href=”/”
title=”访谈珊珊影视在线”>珊珊影视在线</a>
二零零六.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图形详细音讯”><img src=”/images/m03.jpg”
alt=”过往的事如茶” title=”这里是图片标题” /></a>
<h5>以往的事情如茶 By <a href=”/”
title=”访谈代码家园”>代码家园</a> 二〇一〇.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图片详细音讯”><img src=”/images/m04.jpg”
alt=”油花菜开” title=”这里是图表标题” /></a>
<h5>油青花菜开 By <a href=”/”
title=”访谈七彩色摄影视”>七彩色摄影视</a> 二零零六.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图片详细新闻”><img src=”/images/m05.jpg”
alt=”玫瑰情思” title=”这里是图形标题” /></a>
<h5>玫瑰情思 By <a href=”/”
title=”访问代码家园”>代码家园</a> 二零一零.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图形详细消息”><img src=”/images/m09.jpg” alt=”小雏菊”
title=”这里是图片题目” /></a>
<h5>小雏菊 By <a href=”/”
title=”访问珊珊电影和电视在线”>珊珊影视</a> 二〇〇八.09.23</h5>
</li>
</ul>
</div>
</body>
</html>

 

指望本文所述对大家的javascript程序设计有着协理。

http://www.bkjia.com/Javascript/961774.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/961774.htmlTechArticlejs实现鼠标感应图片展示的方法
那篇作品重要介绍了js完结鼠标感应图片突显的不二秘诀,实例剖析了javascript鼠标事件及体制的操作本事,具备一…

js达成鼠标感应图片彰显的点子,js完结鼠标感应彰显

本文实例陈说了js落成鼠标感应图片体现的措施。分享给大家供我们仿效。具体落到实处方式如下:

复制代码 代码如下:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns=”http://www.w3.org/1999/xhtml"&gt;
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>鼠标感应的图片展现效果</title>
<!–[if lte IE 6]>
<script language=”Javascript”>
var W3CDOM = (document.createElement() &&
document.getElementsByTagName());
window.onload = pinballEffect;
function pinballEffect()
{
if (!W3CDOM) return;
var allElements = document.getElementsByTagName(‘*’);
var originalBackgrounds=new Array();
for (var i=0; i<allElements.length; i++)
{
if (allElements[i].className.indexOf(‘hovereffect’) >= 0)
{
allElements[i].onmouseover = mouseGoesOver;
allElements[i].onmouseout = mouseGoesOut;
}
}
}
function mouseGoesOver()
{
originalClassNameString = this.className;
this.className += ” lay-on”;
}
function mouseGoesOut()
{
this.className = originalClassNameString;
}
pinballEffect();
</script>
<![endif]–>
<style type=”text/css”>
body {
background:#fff;
font:small/1.5 “宋体”, SimSun, serif;
_font-size:medium;
}
a img {
border:none;
}
ul,
li,
h5 {
list-style:none inside;
margin:0;
padding:0;
}
.recomm {
background:#999;
border:1px solid #666;
width:600px;
height:170px;
overflow:hidden;
padding:10px;
margin:0 auto;
position:relative;
}
.recomm ul {
border:1px solid #fff;
border-left:none;
height:168px;
width:599px;
overflow:hidden;
*position:absolute;  /* 化解IE中overflow:hidden不能够准确掩盖成分的题材
*/
}
.recomm li {
float:left;
position:relative;
margin-right:-179px;
height:100%;
overflow:hidden;
white-space:nowrap;
text-align:center;
}
.recomm li img {
display:block;
border-left:1px solid #fff;
width:248px;
height:168px;
}
.recomm li h5 {
position:absolute;
bottom:0;
left:0;
height:20px;
width:239px;
line-height:20px;
background:url(../images/1_211621.png) no-repeat;
display:none;
text-align:right;
padding-right:10px;
font-size:1em;
font-weight:normal;
}
.recomm li:hover, .recomm .lay-on {
width:249px;
margin-right:0;
}
.recomm li:hover h5, .recomm .lay-on h5 {
display:block;
}
</style>
</head>
<body>
<div class=”recomm”>
<ul>
<li class=”hovereffect”><a href=”/”
title=”观赏该图形详细信息”><img src=”/images/m01.jpg”
alt=”红叶传情” title=”这里是图形标题” /></a>
<h5>红叶传情 By <a href=”/”
title=”访谈代码家园”>代码家园</a> 二零零六.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图形详细消息”><img src=”/images/m02.jpg”
alt=”野花绽开” title=”这里是图片标题” /></a>
<h5>野花吐放 By <a href=”/”
title=”访谈珊珊影视在线”>珊珊影视在线</a>
二〇〇八.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图片详细音讯”><img src=”/images/m03.jpg”
alt=”以往的事情如茶” title=”这里是图形标题” /></a>
<h5>以往的事情如茶 By <a href=”/”
title=”访谈代码家园”>代码家园</a> 贰零壹零.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图片详细消息”><img src=”/images/m04.jpg”
alt=”油花菜开” title=”这里是图表标题” /></a>
<h5>油青花菜开 By <a href=”/”
title=”访谈七彩色摄影视”>七电视影和电视</a> 二零零六.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图片详细音信”><img src=”/images/m05.jpg”
alt=”玫瑰情思” title=”这里是图形标题” /></a>
<h5>玫瑰情思 By <a href=”/”
title=”访谈代码家园”>代码家园</a> 二〇〇九.09.23</h5>
</li>
<li class=”hovereffect”><a href=”/”
title=”观赏该图形详细音信”><img src=”/images/m09.jpg” alt=”小雏菊”
title=”这里是图片标题” /></a>
<h5>小雏菊 By <a href=”/”
title=”访谈珊珊影视在线”>珊珊影视</a> 二〇一〇.09.23</h5>
</li>
</ul>
</div>
</body>
</html>

梦想本文所述对大家的javascript程序设计有着帮衬。

http://www.bkjia.com/Javascript/961392.htmlwww.bkjia.comtruehttp://www.bkjia.com/Javascript/961392.htmlTechArticlejs实现鼠标感应图片展示的方法,js实现鼠标感应展示
本文实例陈述了js达成鼠标感应图片呈现的议程。分享给咱们供我们参谋。具体贯彻方…

有关文章

连锁搜索:

后天看什么

探求技能库

回去首页

连带频道:
HTML/CSS  HTML5  Javascript  jQuery  AJax教程  前面二个代码  正则表明式  Flex教程  WEB前端教程  

帮客争持

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图