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 相关文章推荐
JavaScript 动态将数字金额转化为中文大写金额
May 14 Javascript
理解Javascript_09_Function与Object
Oct 16 Javascript
解决Jquery鼠标经过不停滑动的问题
Mar 03 Javascript
Bootstrap导航条鼠标悬停下拉菜单
Jan 04 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
js实现HTML中Select二级联动的实例
Jan 05 Javascript
mpvue小程序仿qq左滑置顶删除组件
Aug 03 Javascript
深入理解Vue 的钩子函数
Sep 05 Javascript
微信小程序实现提交input信息到后台的方法示例
Jan 19 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
angularjs模态框的使用代码实例
Dec 20 Javascript
基于小程序请求接口wx.request封装的类axios请求
Jul 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开发工具ZendStudio下Xdebug工具使用说明详解
2013/11/11 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
PHP时间相关常用函数用法示例
2020/06/03 PHP
Javascript之文件操作
2007/03/07 Javascript
js css样式操作代码(批量操作)
2009/10/09 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
2010/05/18 Javascript
jquery提升性能最佳实践小结
2010/12/06 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
Jquery UI震动效果实现原理及步骤
2013/02/04 Javascript
JavaScript获取客户端计算机硬件及系统等信息的方法
2014/01/02 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JQuery select(下拉框)操作方法汇总
2015/04/15 Javascript
jQuery实现只允许输入数字和小数点的方法
2016/03/02 Javascript
js实现可键盘控制的简单抽奖程序
2016/07/13 Javascript
基于vuejs+webpack的日期选择插件
2020/05/21 Javascript
微信小程序 弹框和模态框实现代码
2017/03/10 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
AngularJS路由删除#符号解决的办法
2017/09/28 Javascript
vue-cli配置flexible过程详解
2019/07/04 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[02:25]DOTA2英雄基础教程 生死判决瘟疫法师
2013/12/06 DOTA
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
Python实现GIF图倒放
2020/07/16 Python
利用python制作拼图小游戏的全过程
2020/12/04 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
解决python 输出到csv 出现多空行的情况
2021/03/24 Python
模具专业毕业推荐信
2014/03/08 职场文书
学生自我鉴定格式及范文
2014/09/16 职场文书
群众路线教育实践活动个人对照检查材料思想汇报(社区班子)
2014/10/06 职场文书
销售员态度差检讨书
2014/10/26 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书
MySQL 全文索引使用指南
2021/05/25 MySQL
Python集合set()使用的方法详解
2022/03/18 Python
Go并发4种方法简明讲解
2022/04/06 Golang