相对来说可以让初学者看一下,并不太实用,可能jquery4条语句就能解决,但是原生相对有参照性,了解最终原理才是关键。 代码如下: 无标题文档 body {margin:0;padding:0;color:#000000;} #div_test { width: 100%; height: 100%; background-color: #000000; position:absolute; filter:Alpha(Opacity=0) } var i = 100; function $(id) {return document.getElementById(id);} function chang_display() { i--; var div =...
内部使用 代码如下: info alert hide $("#tooltipContainer").tooltip(); //初始化 function tg1() { $("#tooltipContainer").tooltip("info", "据你的使用和需求的不同..."); } function tg2() { $("#tooltipContainer").tooltip("alert", "据你的使用和需求的不同..."); } function tg3() { $("#tooltipContainer").tooltip(...
样式: 代码如下: #win { width: 98%; position: absolute; display: none; float:left; } /*控制关闭按钮的位置*/ #close { margin-left: 155px; cursor: pointer; }JS代码: 代码如下: function showwin() { $("#win").fadeIn("slow"); } function hide() { $("#win").fadeOut("slow...
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 + ")"; } } 关于有的小伙伴这样写:...
代码如下: //鼠标移上去效果 $(".jq_btn").hover(function(){ $(this).find("div").stop().fadeIn(); },function(){ $(this).find("div").stop().fadeOut(); }); 原理很简单 a标签背景设置正常状态 div背景设置鼠标hover的背景 只要给元素加上 代码如下: class="jq_btn" 都自动有效果
jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求。其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ。 一、基本目标 网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环。二、制作过程 1.首先你要到JQ官网中下载一个JQ支持文件放入你的站点文件夹。这个支持文件是jQuery1.11,可以到jQuery官网中...
1、效果及功能说明 仿新浪微博图片文字列表上下淡进淡出间歇上下滚动 2、实现原理 首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行。 3、运行环境 IE6 IE7 IE8及以上 Firefox 和...
本文实例讲述了基于jQuery实现最基本的淡入淡出效果的方法。分享给大家供大家参考。具体分析如下: jQuery是一个JavaScript 库,也就是对JavaScript的扩展,用来满足各种日益增加的不同特效需求。其实质就是JavaScript 下面来编写一个最基本的JQ程序来说明JQ。 一、基本目标 网页中有如下三个按钮,一个只能隐藏文本,一个只能显示文本,一个同时能隐藏与显示文本,点击一下显示,再点击一下隐藏,无限循环。如下图所示:二、制作过...
本文实例讲述了jQuery实现DIV层淡入淡出拖动特效的方法。分享给大家供大家参考。具体实现方法如下:代码如下:jQuery实现DIV层淡入淡出的拖动效果)#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;top:20px; }var _move=false;//移动标记 var _x,_y;//鼠标离控件左上角的相对位置 $(document).ready(function(...
本文实例讲述了JS实现文字链接感应鼠标淡入淡出改变颜色的方法。分享给大家供大家参考。具体实现方法如下:代码如下:JS实现文字链接感应鼠标淡入淡出改变颜色startColor = "#671700"; // 定义链接颜色 endColor = "#D8D1C5"; // 定义要渐变到最后的颜色 stepIn = 17; stepOut = 23; /* 定义是否让所有的文本链接自动渐变,true为是,false为否 */ autoFade = true; /* 在这里定义css样式里的类class:fade,如果为true,那么你...
图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成js使用,其实也就是用js原生模拟出这些用法。 但不管怎样,构造一个最基本的表现层是必须的简单的图片轮播一般由几个部分构成。 对于淡入淡出式 1.首先是个外围部分(其实也就是最外边的整体wrapper) 2.接着就是你设置图片轮播的地方(也就是一个banner吧) 3.然后是一个图片组(可以用新的d...
本文实例讲述了jQuery实现首页图片淡入淡出效果的方法。分享给大家供大家参考。具体分析如下: 这里演示当当网的品牌店铺首页效果,演示地址为:http://static.dangdang.com/gm/topic/2270_181320.shtml 效果图如下所示:需求: 1. 绿色区域要求在图片上方,半透明显示 2. 当鼠标移动到红色区域,切换相应的图片 3. 首页的三张大图轮转 HTML:联想 lenovo 爱国者 aigo 倩碧 CLINIQUE CSS:*{ padding:0; margin:0; } #carouse...
本文实例讲述了JavaScript淡入淡出渐变的实现方法。分享给大家供大家参考。具体如下: 这里介绍JavaScript淡入淡出的文字渐变例子,用js来控制div标签元素实现渐变显示,渐变隐藏,只要在那个标签里的内容,都可以淡入淡出,代码简单,便于修改完善,前端设计者必备的网页特效。 运行效果如下图所示:具体代码如下:js代码控制元素简单的淡入淡出效果* {margin:0; padding:0} body {font:12px Verdana,Arial; color:#777; backgrou...
本文实例讲述了jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果。分享给大家供大家参考。具体如下: 这是一款核心基于jquery的多级导航菜单特效,横向向右依次展开菜单项,当然本菜单并不是完美的,因此没有怎么美化,另外包括子菜单的上级菜单中缺少一个菜单标记,这样用户有时候不知道哪个菜单中含有下级子菜单。不过添加这样一个标记似乎挺简单,你可以自己动手添加吧。 运行效果截图如下:在线演示地址如下: http://de...
本文实例讲述了jquery实现的淡入淡出下拉菜单效果。分享给大家供大家参考。具体如下: 这是一款jQuery带有淡入淡出效果的下拉菜单,可作为一个下拉导航菜单的模板,移动鼠标到一级主菜单上看一看,在有包括二级子菜单的菜单项上悬停时,二级菜单渐变显示出来,兼容性也是很不错的,希望大家喜欢哈。 运行效果截图如下:在线演示地址如下: http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/ 具体代码如下:jQuer...