本文实例讲述了jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果。分享给大家供大家参考。具体如下： 这里演示基于jquery实现的动画菜单，内含四种效果的网站菜单，第一种是不带效果的传统导航菜单，第二种是带有图形滚动背景的菜单，第三种是由右向左背景滚动的菜单，第四种则是背景色渐变的网站菜单，每一种都很精彩，喜欢Js菜单的可模仿借鉴一下。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/...
本文实例讲述了jQuery实现响应鼠标背景变化的动态菜单效果代码。分享给大家供大家参考。具体如下： 这是一款jQuery响应鼠标背景变化的动态菜单，菜单的背景在鼠标放上后有所变化，这款菜单的实现主要是使用了图片，修改菜单的时候要修改图片，有些麻烦，不过效果不错，引入的jquery插件是1.7版本，高版本jQuery未测试，应该也可以啦。 运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic...
本文实例讲述了jQuery实现热气球动画背景登录框。分享给大家供大家参考。具体如下： jQuery热气球动画背景登录框是一款动态半透明背景的后台登录界面样式效果代码。页面效果简洁大方，是一款非常实用的特效代码，值得大家学习。 运行效果图：-------------------查看效果 下载源码-------------------小提示：浏览器中如果不能正常运行，可以尝试切换浏览模式。 为大家分享的jQuery实现热气球动画背景登录框代码如下jQuery热气球动...
这篇文章主要介绍了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码,涉及jQuery鼠标事件结合animate动画实现背景翻转效果的技巧,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码。分享给大家供大家参考。具体如下：这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会...
效果展示如下：查看演示 下载源码 HTML结构 Apple TV是由苹果公司继 Airport Express 之后推出的一款高清电视机顶盒产品。如果你曾经使用过，一定会被其中的炫酷电影海报视觉差特效所吸引。 该视觉差特效的HTML结构使用一个作为容器，在它里面的每一个都是一个“层”。是用于制作流光效果的图层。CSS样式 为了使包裹元素.poster制作出3D旋转效果，它的父元素需要设置透视和transform-style。body {background: linear-gradient...
现在WEB页面设计比较流行使用大背景图，那么您知道如何使用一张大背景图进行拉伸效果呢？也就是说使用一张固定尺寸的背景图片，让它在页面中随着浏览器尺寸进行拉伸，就像我们的电脑桌面壁纸效果。本文将带您一起使用jQuery和CSS实现背景图片拉伸效果。将背景图片拉伸，而不是平铺，注意平铺效果我们可以使用CSS的background-repeat来实行背景图片的平铺效果，本文讨论的是背景图片的拉伸效果。这种效果在一些前卫的页面设计中已经...
本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码，分享给大家供大家参考。具体如下： 运行效果截图如下：具体代码如下左边跟随鼠标滑动导航/*---------重置---------*/ html {font-size: 100%;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%; *overflow:auto;_overflow-x:hidden; } body {margin:0; } p, ul, ol, form, dl, h1, h2, h3, h4, h5, h6 {margin-top:0;margin-bottom:0; } dl, dd {margin-...
定义和用法 toggleClass() 方法对添加和移除被选元素的一个或多个类进行切换。 该方法检查每个元素中指定的类。如果不存在则添加类，如果已设置则删除之。这就是所谓的切换效果。 然而，通过使用 "switch" 参数，您能够规定只删除或只添加类。 语法 $(selector).toggleClass(classname,function(index,currentclass),switch) 参数描述classname必需。规定添加或移除的一个或多个类名。如需规定若干个类，请使用空格分隔类名。funct...
做项目的时候遇到这个问题，，按理说只要是会套模板的，就不该出现这种低级问题。然后我的后台并没有模板，，并且我的js,jquery水平是小学水平，所以这个也困扰了我将近一下午。在此总结一下，分享给大家。分享使我快乐！！！ 一、请看代码，容我分析一下1、首先，menu代表我的菜单列表，a标签即是点击的链接。大致思路是先获取a链接的对象，然后进行循环，先取得a链接的href的值。 2、获取跳转后，该页面的url的值。进行比较即可 ...
废话不多说，直接上代码吧 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF-8"><title>JqueryTest</title><script src="js/jquery-1.8.3.min.js"></script><script>$(document).ready(function () {$(input).click(function(e){e.stopPropagation();var parent = $(this).parent();$(this).is(:checked) ? parent.css(background-color,#CCC) : parent.css(background-color,#FFF);});$(div).click(function(){$(this)...
本文实例讲述了jQuery实现的背景颜色渐变动画效果。分享给大家供大家参考，具体如下： 完整实例代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>背景颜色渐变</title> <script type="text/javascript" src="jquery-1.7.2.min.js"></script> </head> <body> <inpu...
本文实例讲述了jQuery animate()实现背景色渐变效果的处理方法。分享给大家供大家参考，具体如下： jquery animate函数不能处理背景色渐变，需要使用jquery.color插件 核心代码： $(function(){$("#cdiv").animate({backgroundColor:#FF0000},1000) })完整代码如下： <!DOCTYPE html> <html> <head> <meta charset=utf-8> <title>背景色渐变效果</title> </head> <body><script language="javascript" type="text/javascript" src=...
做表格的时候，经常要让奇偶行显示不同背景色，一来使表格显得更美观，二来使同行数据查找更快捷方便。通常我们是怎么实现的呢？就是在每个tr标签上加css样式。 代码如下所示： <html> <style type="text/css"> .odd {background-color:yellow; }.even {background-color:red; } </style><body> <table border="1"><tr class="odd"><td>No.1</td><td>0001</td></tr><tr class="even"><td>No.2</td><td>0002</td></tr><tr class="o...
本文实例讲述了jQuery动态移除和添加背景图片的方法。分享给大家供大家参考，具体如下： 利用jQuery移除和添加图片 1、样式 <style type="text/css">.changeImage{background:url(images/right.png) no-repeat center;} </style>2、JS （1）在改变标签的样式，需要移除之前添加的样式 $("#tab tr").find("td").removeClass("changeImage");（2）添加样式 $("#tab tr").find("td").addClass("changeImage");附：完整示例demo： <!DO...
话不多说，直接附上源码，仅供大家参考 <div class="menu"><ul id="menu"><li><a href="#">JavaScript</a></li><li value="1"><a href="#">Graphic Design</a></li><li><a href="#">HTML</a></li><li><a href="#">User Interface</a></li><li><a href="#">CSS</a></li></ul><div id="slide"></div> </div> * {margin:0; padding:0} body {font:14px Helvetica, sans-serif; font-weight:bold; background:#FFF} .menu {position:re...