js实现鼠标感应图片展示的方法


Posted in Javascript onFebruary 27, 2015

本文实例讲述了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/xhtml">

<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> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m02.jpg" alt="野花绽放" title="这里是图片标题" /></a>

<h5>野花绽放 By <a href="/" title="访问珊珊影视在线">珊珊影视在线</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m03.jpg" alt="往事如茶" title="这里是图片标题" /></a>

<h5>往事如茶 By <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m04.jpg" alt="油菜花开" title="这里是图片标题" /></a>

<h5>油菜花开 By <a href="/" title="访问七彩影视">七彩影视</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m05.jpg" alt="玫瑰情思" title="这里是图片标题" /></a>

<h5>玫瑰情思 By <a href="/" title="访问代码家园">代码家园</a> 2010.09.23</h5>

</li>

<li class="hovereffect"><a href="/" title="观赏该图片详细信息"><img src="/images/m09.jpg" alt="小雏菊" title="这里是图片标题" /></a>

<h5>小雏菊 By <a href="/" title="访问珊珊影视在线">珊珊影视</a> 2010.09.23</h5>

</li>

</ul>

</div>

</body>

</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
js,jQuery 排序的实现代码,网页标签排序的实现,标签排序
Apr 27 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
Jun 04 Javascript
js匿名函数的调用示例(形式多种多样)
Aug 20 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
Jul 28 Javascript
jquery实现的回旋滚动效果完整实例【附demo源码下载】
Sep 20 Javascript
详谈js使用in和hasOwnProperty获取对象属性的区别
Apr 25 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
原生JS实现动态添加新元素、删除元素方法
May 05 Javascript
layui原生表单验证的实例
Sep 09 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 Javascript
vscode自定义vue模板的实现
Jan 27 Vue.js
JQuery基础语法小结
Feb 27 #Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
Feb 27 #Javascript
分析了一下JQuery中的extend方法实现原理
Feb 27 #Javascript
JS实现在页面随时自定义背景颜色的方法
Feb 27 #Javascript
JQuery中绑定事件(bind())和移除事件(unbind())
Feb 27 #Javascript
Jquery中Event对象属性小结
Feb 27 #Javascript
jQuery中hover方法和toggle方法使用指南
Feb 27 #Javascript
You might like
在线增减.htpasswd内的用户
2006/10/09 PHP
PHP插入排序实现代码
2013/04/04 PHP
Thinkphp使用mongodb数据库实现多条件查询方法
2014/06/26 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
thinkphp制作404跳转页的简单实现方法
2016/09/22 PHP
php获取'/'传参的值简单方法
2017/07/13 PHP
一个简单的JS鼠标悬停特效具体方法
2013/06/17 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JavaScript调用浏览器打印功能实例分析
2015/07/17 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
2015/11/04 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
2015/12/29 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
2016/09/05 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
微信小程序多列选择器range-key使用详解
2020/03/30 Javascript
使用puppeteer爬取网站并抓出404无效链接
2018/12/20 Javascript
详解VUE调用本地json的使用方法
2019/05/15 Javascript
微信小程序之 catalog 切换实现解析
2019/09/12 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
JavaScript中的惰性载入函数及优势
2020/02/18 Javascript
基于JS实现计算24点算法代码实例解析
2020/07/23 Javascript
vue实现列表拖拽排序的功能
2020/11/02 Javascript
python连接池实现示例程序
2013/11/26 Python
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python3实现随机数
2018/06/25 Python
Python实现多线程的两种方式分析
2018/08/29 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python对象与引用的介绍
2019/01/24 Python
欧姆龙医疗保健与医疗产品:Omron Healthcare
2020/02/10 全球购物
宿舍违规检讨书
2014/01/12 职场文书
计算机数据库专业职业生涯规划书
2014/02/08 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
团拜会策划方案
2014/06/07 职场文书
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL
MySql按时,天,周,月进行数据统计
2022/08/14 MySQL