本文实例讲述了淡入淡出的js图片轮播效果代码。分享给大家供大家参考。具体如下： 运行效果图：----------------------查看效果-----------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的js图片轮播效果代码如下<html> <head> <title>js图片轮播效果代码</title> <style type="text/css"> table img:hover{cursor:pointer;} </style> </head><body> <div align="center"> <SCRIPT> var roll_...
本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果。分享给大家供大家参考。具体如下： 这是一款核心基于jquery的多级导航菜单特效，横向向右依次展开菜单项，当然本菜单并不是完美的，因此没有怎么美化，另外包括子菜单的上级菜单中缺少一个菜单标记，这样用户有时候不知道哪个菜单中含有下级子菜单。不过添加这样一个标记似乎挺简单，你可以自己动手添加吧。 运行效果截图如下：在线演示地址如下： http://de...
本文实例讲述了JavaScript淡入淡出渐变的实现方法。分享给大家供大家参考。具体如下： 这里介绍JavaScript淡入淡出的文字渐变例子，用js来控制div标签元素实现渐变显示，渐变隐藏，只要在那个标签里的内容，都可以淡入淡出，代码简单，便于修改完善，前端设计者必备的网页特效。 运行效果如下图所示：具体代码如下： <!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js代码...
本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下： 这里演示当当网的品牌店铺首页效果，演示地址为：http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示：需求： 1. 绿色区域要求在图片上方，半透明显示 2. 当鼠标移动到红色区域，切换相应的图片 3. 首页的三张大图轮转 HTML： <div id="carousel"> <div id="carouselimg" class="content_top"> <div id="imgcontai...
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下：代码如下:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JS实现文字链接感应鼠标淡入淡出改变颜色</TITLE> </HEAD> <BODY> <script language="javascript" type="text/javascript"> startColor = "#671700"; // 定义链接颜色 endColor = "#D8D1C5"; // 定义要渐变到最后的颜色 st...
本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法。分享给大家供大家参考。具体实现方法如下：代码如下: <html> <head> <title>jQuery实现DIV层淡入淡出的拖动效果)</title> <style type="text/css"> #div2 { position:absolute; width:400px; height:300px; border:1px solid #333333; background-color:#777788; text-align:center; line-height:400%; font-size:13px; left:80px; ...
本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法。分享给大家供大家参考。具体分析如下： jQuery是一个JavaScript 库，也就是对JavaScript的扩展，用来满足各种日益增加的不同特效需求。其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ。 一、基本目标 网页中有如下三个按钮，一个只能隐藏文本，一个只能显示文本，一个同时能隐藏与显示文本，点击一下显示，再点击一下隐藏，无限循环。如下图所示：二、制作过...
1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行。 3、运行环境 IE6 IE7 IE8及以上 Firefox 和...
jQuery是一个JavaScript 库，也就是对JavaScript的扩展，用来满足各种日益增加的不同特效需求。其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ。 一、基本目标 网页中有如下三个按钮，一个只能隐藏文本，一个只能显示文本，一个同时能隐藏与显示文本，点击一下显示，再点击一下隐藏，无限循环。二、制作过程 1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹。这个支持文件是jQuery1.11，可以到jQuery官网中...
为了达到更为生动的效果，可以把一个元素淡出或淡入，在任何一种情况下，都只是随着时间来改变元素的透明度。jQuery提供了3个和淡入淡出相关的函数： fadeIn()使得一个隐藏的元素淡入视野。首先，元素占据的空间出现在页面上(这可能意味着页面上的其他元素要移走)；然后，元素逐渐地变得可见。如果元素在页面上已经可见，则这个函数没有任何效果。如果没有提供一个速度值，元素使用“常规”设置来淡入(400毫秒)。 fadeOut()通过使得...
js里面设置DOM节点透明度的函数属性：filter= "alpha(opacity=" + value+ ")"（兼容ie）和opacity=value/100（兼容FF和GG）。 先来看看设置透明度的兼容性代码： 代码如下:function setOpacity(ele, opacity) { if (ele.style.opacity != undefined) { ///兼容FF和GG和新版本IE ele.style.opacity = opacity / 100; } else { ///兼容老版本ie ele.style.filter = "alpha(opacity=" + opacity + ")"; } } 关于有的小伙伴这样写： ...
代码如下:<!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> <script type="text/javascript" language="javascript" src="../../jquery-1.7.1.min.js"> </script> <script language="j...
相对来说可以让初学者看一下，并不太实用，可能jquery4条语句就能解决，但是原生相对有参照性，了解最终原理才是关键。 代码如下:<!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> <style ty...
代码如下:<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><font face="Verdana, Geneva, sans-serif"></font><style type="text/css"> #div1{width:100px;height:100px;background:#ccc;position:absolute;top:0px;left:0px;} #div2{width:100px;height:100px;background:#ccc;position:absolute;left:0px;top:110px;} #div3{width:100...
往带有png图的类里加红色字的部分代码如下:background-image:url(******.png)!important;background-image:url(../images/space.gif);/*space.gif 是一个透明的图片文件*/filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src="******.png", enabled=true, sizingMethod=scale);