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 相关文章推荐
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
node.js使用cluster实现多进程
Mar 17 Javascript
举例讲解如何判断JavaScript中对象的类型
Apr 22 Javascript
js中常用的Tab切换效果(推荐)
Aug 30 Javascript
JS实现字符串转驼峰格式的方法
Dec 16 Javascript
jquery ui sortable拖拽后保存位置
Apr 27 jQuery
vue环境搭建简单教程
Nov 07 Javascript
解决VUE中document.body.scrollTop为0的问题
Sep 15 Javascript
JS实现TITLE悬停长久显示效果完整示例
Feb 11 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 Javascript
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
php防止sql注入代码实例
2013/12/18 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
Laravel 5.3 学习笔记之 安装
2016/08/28 PHP
PHP中list方法用法示例
2016/12/01 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
JavaScript的eval JSON object问题
2009/11/15 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
jQuery操作checkbox选择(list/table)
2013/04/07 Javascript
js购物车实现思路及代码(个人感觉不错)
2013/12/23 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
2014/11/20 Javascript
利用jQuery插件imgAreaSelect实现图片上传裁剪(同步显示图像位置信息)
2016/12/02 Javascript
Bootstrap table右键功能实现方法
2017/02/20 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
vue + element-ui的分页问题实现
2018/12/17 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
java实现单链表增删改查的实例代码详解
2019/08/30 Javascript
mpvue实现左侧导航与右侧内容的联动
2019/10/21 Javascript
Python 列表排序方法reverse、sort、sorted详解
2016/01/22 Python
python简单实现刷新智联简历
2016/03/30 Python
Python实现的文本简单可逆加密算法示例
2017/05/18 Python
Python基础之getpass模块详细介绍
2017/08/10 Python
教你学会使用Python正则表达式
2017/09/07 Python
Java及python正则表达式详解
2017/12/27 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
python实现日志按天分割
2019/07/22 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python爬虫实现百度翻译功能过程详解
2020/05/29 Python
python利用google翻译方法实例(翻译字幕文件)
2020/09/21 Python
html5 canvas 画图教程案例分析
2012/11/23 HTML / CSS
中学教师教育感言
2014/02/21 职场文书
2014年学生党支部工作总结
2014/12/20 职场文书
导游词之无锡梅园
2019/11/28 职场文书
Python函数对象与闭包函数
2022/04/13 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python