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 相关文章推荐
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
jQuery的Ajax的自动完成功能控件简要说明
Feb 22 Javascript
JavaScript中prototype为对象添加属性的误区介绍
Oct 15 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
vue2.0 父组件给子组件传递数据的方法
Jan 15 Javascript
动态加载权限管理模块中的Vue组件
Jan 16 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
原生JS进行前后端同构
Apr 22 Javascript
bootstrap-table formatter 使用vue组件的方法
May 09 Javascript
vue实现几秒后跳转新页面代码
Sep 09 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函数http_build_query使用详解
2014/08/20 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php访问数组最后一个元素的函数end()用法
2015/03/18 PHP
php文件扩展名判断及获取文件扩展名的N种方法
2015/09/12 PHP
CodeIgniter配置之routes.php用法实例分析
2016/01/19 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
Textarea根据内容自适应高度
2013/10/28 Javascript
jQuery中slideUp 和 slideDown 的点击事件
2015/02/26 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
Extjs 点击复选框在表格中增加相关信息行
2016/07/12 Javascript
纯原生js实现贪吃蛇游戏
2020/04/16 Javascript
微信小程序wx.getImageInfo()如何获取图片信息
2018/01/26 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
一些手写JavaScript常用的函数汇总
2019/04/16 Javascript
Vue设置长时间未操作登录自动到期返回登录页
2020/01/22 Javascript
分享一款超好用的JavaScript 打包压缩工具
2020/04/26 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
使用Python操作excel文件的实例代码
2017/10/15 Python
django解决跨域请求的问题详解
2019/01/20 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
Python生态圈图像格式转换问题(推荐)
2019/12/02 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
pandas.DataFrame.drop_duplicates 用法介绍
2020/07/06 Python
如何使用python自带IDLE的几种方法
2020/10/10 Python
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
英国景点门票网站:attractiontix
2019/08/27 全球购物
移动通信专业自荐信范文
2013/11/12 职场文书
二手书店创业计划书
2014/01/16 职场文书
2014年母亲节演讲稿范文
2014/05/07 职场文书
2016年万圣节活动个人总结
2016/04/05 职场文书
标准发言稿结尾
2019/07/18 职场文书
劳务派遣管理制度(样本)
2019/08/23 职场文书
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android