Gradual Highlight Image Script

最新推荐文章于 2025-09-13 09:06:35 发布

转载最新推荐文章于 2025-09-13 09:06:35 发布 · 67 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/yangbeibei/archive/2006/09/25/514672.html

文章标签：

#javascript #ViewUI

本文介绍了一种使用CSS和JavaScript实现的图像渐显效果。当鼠标悬停在图片上时，图片会逐渐恢复到其原始亮度。该效果适用于为网站菜单图片添加吸引人的鼠标悬停效果。

Author: Dynamic Drive

Note: Script rewritten Dec 3rd, 04' for numerous improvements.

Description: A script that makes any image(s) appear dull before the mouse moves over it; as the mouse moves over it, the image gradually changes to its original appearance. Use it to instantly add stunning onMouseover effects to your menu images, for example.

Demo:

Move your mouse over any of the images:

Directions

Step 1: Insert the below into the <head> section of your page:

Select All
<style type="text/css"> .gradualshine{ filter:alpha(opacity=30); -moz-opacity:0.3; } </style> <script type="text/javascript"> /*********************************************** * Gradual Highlight image script- © Dynamic Drive DHTML code library (www.dynamicdrive.com) * This notice MUST stay intact for legal use * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code ***********************************************/ var baseopacity=30 function slowhigh(which2){ imgobj=which2 browserdetect=which2.filters? "ie" : typeof which2.style.MozOpacity=="string"? "mozilla" : "" instantset(baseopacity) highlighting=setInterval("gradualfade(imgobj)",50) } function slowlow(which2){ cleartimer() instantset(baseopacity) } function instantset(degree){ if (browserdetect=="mozilla") imgobj.style.MozOpacity=degree/100 else if (browserdetect=="ie") imgobj.filters.alpha.opacity=degree } function cleartimer(){ if (window.highlighting) clearInterval(highlighting) } function gradualfade(cur2){ if (browserdetect=="mozilla" && cur2.style.MozOpacity<1) cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.1, 0.99) else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100) cur2.filters.alpha.opacity+=10 else if (window.highlighting) clearInterval(highlighting) } </script>

Step 2: Then, insert the below inside the <img> tag of all of the images you want the effect applied to:

Select All
class="gradualshine" onMouseover="slowhigh(this)" onMouseout="slowlow(this)"

An example would be:

http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm

转载于:https://www.cnblogs.com/yangbeibei/archive/2006/09/25/514672.html