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

2014-09-09  来源:本站原创  分类:javascript技巧  人气:3 

这篇文章主要介绍了js实现鼠标感应图片展示的方法,实例分析了javascript鼠标事件及样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下

本文实例讲述了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程序设计有所帮助。

相关文章
  • js实现鼠标感应图片展示的方法 2014-09-09

    这篇文章主要介绍了js实现鼠标感应图片展示的方法,实例分析了javascript鼠标事件及样式的操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标感应图片展示的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt

  • js实现鼠标触发图片抖动效果的方法 2013-10-23

    这篇文章主要介绍了js实现鼠标触发图片抖动效果的方法,通过定时器定时递归调用rattleimage函数实现抖动效果,非常实用,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标触发图片抖动效果的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>鼠标触发图片抖动效果</title> <style> .shakeimage{ position:relative } </style>

  • js实现鼠标悬停图片上时滚动文字说明的方法 2014-08-26

    这篇文章主要介绍了js实现鼠标悬停图片上时滚动文字说明的方法,涉及js操作鼠标事件的使用技巧,需要的朋友可以参考下 本文实例讲述了js实现鼠标悬停图片上时滚动文字说明的方法.分享给大家供大家参考.具体实现方法如下: <html> <title>js实现鼠标悬停图片上时的滚动文字说明</title> <body> <SCRIPT LANGUAGE="JavaScript"> <!-- Begin function show

  • js实现鼠标感应向下滑动隐藏菜单的方法 2015-03-16

    这篇文章主要介绍了js实现鼠标感应向下滑动隐藏菜单的方法,涉及javascript操作鼠标事件的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 { BACKGROUND-COLOR: blue; BORDER-BOTTOM: w

  • js获得鼠标的坐标值的方法 2014-01-02

    js获得鼠标的坐标值的方法,需要的朋友可以参考一下 var x , y; //当需求为获得的坐标值相对于body时,用: function positionBody(event){ event = event||window.event; //获得相对于body定位的横标值: x=event.clientX //获得相对于body定位的纵标值: y=event.clientY } //当需求为获得的坐标值相对于某一对象时,用: function positionObj(event,id){ //

  • js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器 2014-12-18

    js实现鼠标拖动图片做了兼容IE,FF火狐,谷歌等主流浏览器,具体实现代码如下,感兴趣的朋友可以参考下哈,希望对你有所帮助 注意使用preventDefault防止浏览器的默认事件操作发生 <script language="javascript" type="text/javascript"> var isDrag = false; function isIE(){ if(navigator.userAgent.indexOf("MSIE&q

  • js 屏蔽鼠标右键脚本附破解方法 2015-01-21

    用来屏蔽鼠标右键的代码,破解方法也比较简单.比较根本.禁掉js什么也运行不了. 把如下的JS代码加入页面就可以了 [html] <script type="text/javascript"> <!-- var message=""; /////////////////////////////////// function clickIE() {if (document.all) {(message);return false;}} function

  • js实现鼠标经过时图片滚动停止的方法 2013-12-02

    这篇文章主要介绍了js实现鼠标经过时图片滚动停止的方法,可实现js滚动特效中的鼠标悬停停止图片滚动的功能,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标经过时图片滚动停止的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.d

  • js实现鼠标悬浮给图片加边框的方法 2014-10-04

    这篇文章主要介绍了js实现鼠标悬浮给图片加边框的方法,涉及jquery.insetborder.js中borderEffect方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标悬浮给图片加边框的方法.分享给大家供大家参考.具体实现方法如下: html代码: <div class="T-s-l fl"> <a href="" class="a1"> <img src="im

  • js实现鼠标滚轮控制图片缩放效果的方法 2015-01-08

    这篇文章主要介绍了js实现鼠标滚轮控制图片缩放效果的方法,涉及onmousewheel事件及javascript操作图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js实现鼠标滚轮控制图片缩放效果的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-

  • js根据鼠标移动速度背景图片自动旋转的方法 2015-03-15

    这篇文章主要介绍了js根据鼠标移动速度背景图片自动旋转的方法,实例分析了javascript操作鼠标与图片的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了js根据鼠标移动速度背景图片自动旋转的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans

  • JS+CSS实现感应鼠标渐变显示DIV层的方法 2015-04-03

    这篇文章主要介绍了JS+CSS实现感应鼠标渐变显示DIV层的方法,涉及javascript对div层的逐渐显示与隐藏的实现技巧,需要的朋友可以参考下 本文实例讲述了JS+CSS实现感应鼠标渐变显示DIV层的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transit

  • JS鼠标悬停图片翻动展示效果 2014-09-06

    关键词: 鼠标悬停 翻动效果 图片切换 描述: JS鼠标悬停图片翻动展示效果是一款根据鼠标进出图片的方向来控制图片进出的方式,效果超炫.

  • jQuery实现鼠标划过展示大图的方法 2013-10-07

    这篇文章主要介绍了jQuery实现鼠标划过展示大图的方法,实例分析了jQuery操作鼠标事件及图片处理的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了jQuery实现鼠标划过展示大图的方法.分享给大家供大家参考.具体如下: 这里用css和jquery实现鼠标移上元素时大图展示,并且大图不能溢出整个div框 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www

  • jQuery实现的感应鼠标悬停图片色彩渐显效果 2014-10-24

    这篇文章主要介绍了jQuery实现的感应鼠标悬停图片色彩渐显效果,涉及jQuery中hover.find.css等方法的使用技巧,需要的朋友可以参考下 本文实例讲述了jQuery实现的感应鼠标悬停图片色彩渐显效果.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

  • 基于jquery的手风琴图片展示效果实现方法 2014-01-28

    这篇文章主要介绍了基于jquery的手风琴图片展示效果实现方法,涉及jQuery基于事件实现改变css样式的方法,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了基于jquery的手风琴图片展示效果实现方法.分享给大家供大家参考.具体实现方法如下: 代码运行效果如下图所示: index.html页面代码如下: <!DOCTYPE html> <html class=''> <head> <title>一款基于jquery的手风琴图片展示效果demo&l

  • jQuery实现菜单感应鼠标滑动动画效果的方法 2014-02-04

    这篇文章主要介绍了jQuery实现菜单感应鼠标滑动动画效果的方法,实例分析了jQuery中鼠标事件及animate的使用技巧,非常具有实用价值,需要的朋友可以参考下 本文实例讲述了jQuery实现菜单感应鼠标滑动动画效果的方法.分享给大家供大家参考.具体分析如下: 此代码测试环境为IE9 以及GG.FF浏览器,IE8及以下浏览器可能不支持,希望理解. 这款JS鼠标滑动效果使用jQuery实现简单动画的方法,而且也惊喜的发现,jquery有更好的书写方法,可以连写,在animate方法前加上sto

  • JS使用oumousemove和oumouseout动态改变图片显示的方法 2014-08-15

    这篇文章主要介绍了JS使用oumousemove和oumouseout动态改变图片显示的方法,涉及javascript鼠标事件及图片操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS使用oumousemove和oumouseout动态改变图片显示的方法.分享给大家供大家参考.具体如下: 鼠标放到图片上时图片会自动变大,鼠标离开图片还原 <!DOCTYPE html> <html> <head> <script> function big

  • 图片展示效果 鼠标经过变大图,支持FF 2014-11-22

    图片展示效果,鼠标经过变大图,支持FF 类似FLASH一样漂亮 5 Loading... [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • 感应鼠标的图片遮罩动画效果 2015-01-06

    感应鼠标的图片遮罩动画效果,鼠标放上后会动画显示文字提示,有意思哦,有兴趣的朋友运行一下看效果. 感应鼠标的图片遮罩动画效果 如果左下角提示错误,刷新一下就可以了. Visit The Best Designs Visit The Best Designs Visit The Best Designs Visit The Best Designs Visit The Best Designs [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]