jQuery图片渐变特效的简单实现

jQuery图片渐变特效的简单实现

(document).ready(function() {(document).ready(function() {("div.baba").mouseleave(function()
	{
("span.aaa").stop().animate({opacity: '1'},600);  });("span.aaa").stop().animate({opacity: '1'},600);  });("div.baba").mouseenter(function()
	{
	$("span.aaa").stop().animate({opacity: '0'},600);
	}); 

});

以上就是小编为大家带来的jQuery图片渐变特效的简单实现全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • 基于jquery的direction图片渐变动画效果

    还有一点就是包括滤镜的使用但是有一点必须要说明的是滤镜在firefox下不能识别看不到效果, 下面就开始我们的代码编写吧 html是比较简单的 代码 复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <TITLE>myjquerydirection</TITLE> <META http-equiv

  • jQuery实现的文字hover颜色渐变效果实例

    本文实例讲述了jQuery实现的文字hover颜色渐变效果.分享给大家供大家参考,具体如下: <html> <head> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript" src="jquery-ui-1.8.16.custom.min.j

  • jquery实现模拟百分比进度条渐变效果代码

    jquery实现模拟百分比进度条渐变效果代码

    本文实例讲述了jquery实现模拟百分比进度条渐变效果代码.分享给大家供大家参考,具体如下: 这里为了便于看到加载百分比,对代码进行了处理,实际使用时并不需要这样. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mn-bfb-scroll-cha-style-demo/ 具体代码如下: <html> <head> <title>jquery模拟百分比进度条</title> <script

  • jQuery实现渐变下拉菜单的简单方法

    本文实例讲述了jQuery实现渐变下拉菜单的简单方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript">     $(function(){         $("#nav li").hover(function(){if(!$(this).children("#nav li ul").is(":animated")){$(this).ch

  • jQuery实现的立体文字渐变效果

    先截两个图看看: 效果很不错吧?会不会误以为这些字体是图片?这可不是图片,而是用JS实现的 在线演示 http://demo.jb51.net/js/gradient-test/demo.htm 下面来简单分享下实现过程及原理(网站中使用了jquery这个lib,我们这里就不再自己单独实现了,我们这里分享的也是jquery的实现方法): HTML代码: 复制代码 代码如下: <span class="rainbows">© 2009 Dragon Interactive.

  • jQuery实现鼠标点击弹出渐变层的方法

    jQuery实现鼠标点击弹出渐变层的方法

    弹出层在实际应用中我们经常会碰到大量的弹出层效果,下面我来做一个基于jquery的简单的弹出层效果实例,各位朋友有兴趣可参考. 效果代码如下 在弹出层中下面是核心代码 <script type="text/javascript"> // 渐变弹出层 $(document).ready(function(){ var speed = 600;//动画速度 $("#race a").click(function(event){//绑定事件处理 event.s

  • jQuery实现渐变弹出层和弹出菜单的方法

    本文实例讲述了jQuery实现渐变弹出层和弹出菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!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/xh

  • jquery实现两个图片渐变切换效果的方法

    本文实例讲述了jquery实现两个图片渐变切换效果的方法.分享给大家供大家参考.具体如下: 这段代码演示了jquery如何实现两个图片渐变切换的效果,为id=kitten的div设置一个背景图片,通过jquery对div进行淡入淡出实现两个图片的渐变切换 html代码 <div id="kitten"> <img src="/images/kitten.jpg" alt="Kitten" /> </div> j

  • jQuery实现打开页面渐现效果示例

    本文实例讲述了jQuery实现打开页面渐现效果的方法.分享给大家供大家参考,具体如下: 思路:把页面中所有的标签放到一个div中,然后再在最后添加一个空div标签fadeDiv,用fadeDiv遮挡body使fadeDiv渐现 <head> <title></title> <script src="jquery-1.7.2.min.js" type="text/javascript"></script> &

  • jQuery图片渐变特效的简单实现

    jQuery图片渐变特效的简单实现 (document).ready(function() {(document).ready(function() {("div.baba").mouseleave(function() { ("span.aaa").stop().animate({opacity: '1'},600); });("span.aaa").stop().animate({opacity: '1'},600); });("d

  • 完美JQuery图片切换效果的简单实现

    完美JQuery图片切换效果的简单实现

    效果如下: css: body { font-family:"Microsoft Yahei"; } body,ul,li,img,h3,dl,dd,dt,h1{margin:0px;padding:0px;list-style:none;} img{vertical-align: top;} /***大图切换***/ .scroll_view{margin: 0px auto;overflow:hidden;position: relative;} .photo_view li{po

  • jQuery图片瀑布流的简单实现代码

    简单版的Jquery实现图片瀑布流思路,供大家参考,具体内容如下 注意:本篇文章基于知道每张图片的实际尺寸的情况下 特点:列数自适应,图片宽度固定 已知BUG: 像本案例中的刚好5张图片循环显示且只有5列的情况下会有问题,解决办法就是给予样式的时候不按顺序,而是先将图片放在top值最低的列 1.预备 1.基础html <div id="main"> <div class="img-item"><img src="images/

  • jquery 图片缩放拖动的简单实例

    一.不使用jquery,简单的缩放: 复制代码 代码如下: <HTML> <HEAD> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>onMouseWheel</TITLE> <SCRIPT> var count = 10; function Picture() { count = Coun

  • jquery实现图片渐变切换兼容ie6/Chrome/Firefox

    复制代码 代码如下: <!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=&qu

  • 最佳6款用于移动网站开发的jQuery 图片滑块插件小结

    最佳6款用于移动网站开发的jQuery 图片滑块插件小结

    随着智能手机的普及,越来越多的用户喜欢通过手机中浏览网页.今天这篇文章为大家推荐最佳6款用于移动应用的 jQuery 图片滑块插件,这些插件很好的处理了触屏事件,效果平滑,帮助你构建用户体验良好的移动网站. PhotoSwipe PhotoSwipe 是一款免费的 jQuery 图片库插件,支持 iPhone, iPad, Android, Blackberry 等各种移动设备. Mobile Photo Album Mobile Photo Album 是一款非常易用的相册插件,帮助你在移动网

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • jquery图片轮播特效代码分享

    jquery图片轮播特效代码分享

    本文实例讲述了jquery图片轮播特效.分享给大家供大家参考.具体如下: 这是一款仿淘宝首页jquery轮播焦点图,基于jquery实现仿淘宝网首页正中间小焦点图特效. 运行效果图:         -------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jquery图片轮播特效代码如下 <!DOCTYPE html> <head> <meta http-equiv=

  • jquery制作图片时钟特效

    jquery制作图片时钟特效

    一.生成数字时钟 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> window.onload=function(){ var oBody=document.body; var oP=document.getElementById("time"); setInterval(fnTime,1000); fnTime(); function

  • 超赞的jQuery图片滑块动画特效代码汇总

    超赞的jQuery图片滑块动画特效代码汇总

    在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件将为你节省很多开发时间,而且效果都还不错,一起来欣赏一下吧. 1.jQuery+HTML5实现的超炫全屏焦点图效果源码 这次我们要来分享一款非常绚丽的jQuery焦点图插件,同时这款焦点图也利用了HTML5和CSS3的相关特性,使图片切换效果更加丰富多彩.另外,这款jQuery焦点图插件的特点是全屏

随机推荐