今天我们来完成《jQuery实战》系列的标签页效果。先来看一看效果图
这里有两部分的内容，上面是一个标签页的效果，下面也是一个标签页的效果。在实际应用中也经常会见到标签页的效果，它的作用主要是在页面可视区有限的情况下展示更多的内容。当用户想看其他内容的时候不需要离开页面，只需要把鼠标移动到某一个标签上就可以看到这个标签里面所对应的内容。门户网站的首页，有很多频道都是标签页的最佳案例，如体育、财经、军事等...
每日分享效果，今天分享一个jQuery滑动星星评分效果。
jQuery星星评分制作5颗星星鼠标滑过评分打分效果，可取消评分结果，重新打分。HTML代码：<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><link rel="stylesheet" href="css/css.css"><script src="js/jquery.js"></script>
</head>
<body>
<div ><p ><span><i ></i><i ></i></span><span><i ></i><i ></i></span><span><i ></i><i ></i><...
$(this).hide()-----隐藏当前元素 $("p").hide()------隐藏所有段落 $(".test").hide()--隐藏所有class="test"的元素 $("#test").hide()--隐藏所有id="test"的元素文档就绪函数 $(document).ready(function() { ---------jQuery function go here------------ })jQuery选择器 选择器允许对元素组或单个元素进行操作。学习jQuery选择器的关键是学习jQuery选择器如何准确地选取你希望应用效果的元素 ...
<!doctype html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head> <style>*{padding:0;margin:0;}ul,li{list-style:none;}.nav{height:30px;background:rgba(224,0,0,.5) !important;}.nav li{float:left;padding:0px 20px;line-height:30px;height:30px;cursor:pointer;}.nav li a{color:#fff;text-decoration:none;display: block;}.nav li:hover{ background:red;}.box{position:relative;}.act...
网页上的头部固定，但不随滚动条滚动的效果，在百度贴吧里整理出来的网页特效，最开始的时候，固定条可以随滚动条拖动至网页顶部，但到达网页顶部后，再次拖动滚动条，头部并不滚动，其它的内容可以滚动，貌似在网上见的挺多的效果。 <!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-e...
1. siblings()这个方法，就是要取得调用该方法的节点对象的兄弟节点（查找同级对象）比如：<div id="aaa"><p>1</p><p>2</p><h1>2</h1><h2>22</h2><div>abcdefg</div></div>var curr = $("#aaa h1");curr.siblings(); //包括与p同级的所有元素：p, h1, h2, div如果带参数curr.siblings("p")那就只能取得到两个p2.图片轮流展示的效果function auto(){ i<$div.length-1?i++:i=0; $div.eq(i).show().siblings()...
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3<html xmlns="http://www.w3.org/1999/xhtml"> 4<head> 5<title></title> 6<script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script> 7<script type="text/javascript"> 8 9/*-------------------------------------------*/10var InterValObj; //timer变量，控制时间11var ...
//侧栏随动
var rollStart = $(‘.feed-mail‘), //滚动到此区块的时候开始随动rollSet = $(‘.search,.weibo,.group,.feed-mail,.tags‘); //添加rollStart之前的随动区块rollStart.before(‘<div class="da_rollbox" style="position:fixed;background-color:#fff;width:inherit;"></div>‘);
var offset = rollStart.offset(),objWindow = $(window),rollBox = rollStart.prev();
objWindow.scroll(function() {if (objWindow.s...
jQuery 滑动方法可使元素上下滑动。点击这里，隐藏/显示面板一寸光阴一寸金，因此，我们为您提供快捷易懂的学习内容。在这里，您可以通过一种易懂的便利的模式获得您需要的任何知识。实例jQuery slideDown()演示 jQuery slideDown() 方法。jQuery slideUp()演示 jQuery slideUp() 方法。jQuery slideToggle()演示 jQuery slideToggle() 方法。jQuery 滑动方法通过 jQuery，您可以在元素上创建滑动效果。jQuery 拥有以下滑动方法：s...
参考 http://www.sucaihuo.com/js/74.html <script src="scripts/blocksit.min.js"></script>12345678<div > <div > <!-- content --> </div> <div > <!-- content --> </div></div>$(document).ready(function() {//blocksit define$(window).load( function() {$(‘#container‘).BlocksIt({numOfCol: 5, //一排放的个数offsetX: 0, //横向距离offsetY: 0, //纵向距离blockElement: ‘.grid‘ //瀑布流...
文字上下滚动是经常用到的js效果，这里介绍一种上下渐隐渐出的文字展现效果！代码实现很简单，只需要引入jquery就可以。代码如下：<!DOCTYPE><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>文字滚动</title><style type="text/css">#sidebar{width:200px; height;500px; overflow:hidden; margin:0 auto; background:#f00; color:#fff;}#marquee{width:200px; margin:0;padding:0;}#marquee ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>地图热点效果-鼠标经过弹出提示信息</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
</head>
<script src="/ajaxjs/jquery-1.6.2.min.js" type="text/javascript"></script><!-- 建议用1.7的jquery -->
<script type="text/javascript">var jq = jQuery.noConflict(...
今天给大家带来的是 jQueryMobile 实现一个简单的弹出框效果，有兴趣的童鞋可以试试哦~ ^_^阅读原文： www.gbtags.com 原文：http://www.cnblogs.com/gbin1/p/3994692.html
jQuery 效果函数方法描述animate()对被选元素应用“自定义”的动画clearQueue()对被选元素移除所有排队的函数（仍未运行的）delay()对被选元素的所有排队函数（仍未运行）设置延迟dequeue()运行被选元素的下一个排队函数fadeIn()逐渐改变被选元素的不透明度，从隐藏到可见fadeOut()逐渐改变被选元素的不透明度，从可见到隐藏fadeTo()把被选元素逐渐改变至给定的不透明度hide()隐藏被选的元素queue()显示被选元素的排队函数show()显...
<!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><script src="HTML/js/jquery-1.4.1.min.js" type="text/javascript"></script><script type="text/javascript">var InterValObj; //timer变量，控制时间var count =5; //间隔函数，1秒执行var curCount;//当前剩余秒数function sendMessage() {cur...
这个可与前两个不同了，这个是拖拽到指定的区域内的特效。其实逻辑方式差不多，只不过不同的是 找到目标元素，用appendTo 的方法插入到目标元素。