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 相关文章推荐
Jquery阻止事件冒泡 event.stopPropagation
Dec 11 Javascript
通过action传过来的值在option获取进行验证的方法
Nov 14 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery+ajax实现无刷新级联菜单示例
May 21 Javascript
Bootstrap入门书籍之(零)Bootstrap简介
Feb 17 Javascript
js控制文本框禁止输入特殊字符详解
Apr 07 Javascript
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
Dec 23 Javascript
微信小程序自定义组件的实现方法及自定义组件与页面间的数据传递问题
Oct 09 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
JS实现长图上下滚动效果
Mar 19 Javascript
javascript实现贪吃蛇经典游戏
Apr 10 Javascript
react 项目中引入图片的几种方式
Jun 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
基于initPHP的框架介绍
2013/04/18 PHP
jquery获取多个checkbox的值异步提交给php的方法
2015/06/24 PHP
ajax+php控制所有后台函数调用
2015/07/15 PHP
php实现的http请求封装示例
2016/11/08 PHP
javascript闭包的理解和实例
2010/08/12 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
2012/08/29 Javascript
关于jQuery新的事件绑定机制on()的使用技巧
2013/04/26 Javascript
js中的时间转换—毫秒转换成日期时间的示例代码
2014/01/26 Javascript
javascript实现文本域写入字符时限定字数
2014/02/12 Javascript
JS实现图片产生波纹一样flash效果的方法
2015/02/27 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
javascript实现手机震动API代码
2015/08/05 Javascript
js正则表达式验证密码强度【推荐】
2017/03/03 Javascript
轻松玩转BootstrapTable(后端使用SpringMVC+Hibernate)
2017/09/06 Javascript
详解vue-router 路由元信息
2017/09/13 Javascript
zTree节点文字过多的处理方法
2017/11/24 Javascript
Node.js 使用jade模板引擎的示例
2018/05/11 Javascript
jQuery轮播图实例详解
2018/08/15 jQuery
在 Vue.js中优雅地使用全局事件的方法
2019/02/01 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
微信小程序 高德地图路线规划实现过程详解
2019/08/05 Javascript
nodejs dgram模块广播+组播的实现示例
2019/11/04 NodeJs
[02:37]2018DOTA2亚洲邀请赛赛前采访-EG篇
2018/04/03 DOTA
Python抓取京东图书评论数据
2014/08/31 Python
Python中属性和描述符的正确使用
2016/08/23 Python
windows系统下Python环境搭建教程
2017/03/28 Python
对python 读取线的shp文件实例详解
2018/12/22 Python
python自动化测试无法启动谷歌浏览器问题
2019/10/10 Python
使用TensorFlow-Slim进行图像分类的实现
2019/12/31 Python
利用Python脚本实现自动刷网课
2020/02/03 Python
招商经理岗位职责
2013/11/16 职场文书
八项规定整改方案
2014/02/21 职场文书
《满井游记》教学反思
2014/02/26 职场文书
廉政承诺书
2015/01/19 职场文书
读《人生的智慧》有感:闲暇是人生的精华
2019/12/25 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL