[JS代码库]

最新推荐文章于 2022-04-26 18:39:45 发布

xjwolaile

最新推荐文章于 2022-04-26 18:39:45 发布

阅读量1.2k

点赞数

分类专栏：前端技术代码库 jQuery javascript 文章标签： animate find remove

本文链接：https://blog.csdn.net/xjwolaile/article/details/84441852

版权

前端技术同时被 3 个专栏收录

188 篇文章 0 订阅

订阅专栏

jQuery

63 篇文章 0 订阅

订阅专栏

javascript

4 篇文章 0 订阅

订阅专栏

所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合所有的图片下面都可以找到

将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果

[javascript]
1、操作：javascript轮播

2、功能：可以讲多张图片按照自己规定的时间循环的播放出来里面有序号当要看第几张图片的时候就可以直接让那张图片播放出来

3、效果：在各大网站的首页上面都有一个轮播的广告的效果在上面一般都是在正中间主要的作用是一些活动和最新的咨询工作最直接的方法展示给用户看

下面是效果图片

[img]http://dl2.iteye.com/upload/attachment/0085/7251/88d29412-acd8-3ac9-b31b-97d4e6f8bcc9.jpg[/img]

下面是实现的代码分三个部分一个是html5 css 和 javascript


<!DOCTYPE html>
<head>
    <link href="css/slideshow.css" rel="stylesheet" />
    <script src="js/slideshow.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="comiis_wrapad" id="slideContainer">
        <div id="frameHlicAe" class="frame cl">
            <div class="block">
                <div class="cl">
                    <ul class="slideshow" id="slidesImgs">
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/1.jpg" width="960" height="230" alt="" /></a><span class="title">第1张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/2.jpg" width="960" height="230" alt="" /></a><span class="title">第2张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/3.jpg" width="960" height="230" alt="" /></a><span class="title">第3张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/4.jpg" width="960" height="230" alt="" /></a><span class="title">第4张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/5.jpg" width="960" height="230" alt="" /></a><span class="title">第5张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/6.jpg" width="960" height="230" alt="" /></a><span class="title">第6张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/7.jpg" width="960" height="230" alt="" /></a><span class="title">第7张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/8.jpg" width="960" height="230" alt="" /></a><span class="title">第8张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/9.jpg" width="960" height="230" alt="" /></a><span class="title">第9张图的描述信息</span></li>
                        <li><a href="http://www.lanrentuku.com/" target="_blank">
                            <img src="images/10.jpg" width="960" height="230" alt="" /></a><span class="title">第10张图的描述信息</span></li>
                    </ul>
                </div>
                <div class="slidebar" id="slideBar">
                    <ul>
                        <li class="on">1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                        <li>6</li>
                        <li>7</li>
                        <li>8</li>
                        <li>9</li>
                        <li>10</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        SlideShow(1000);
    </script>
</body>
</html>


* { word-wrap: break-word; }
body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; }
body, ul, li { margin: 0; padding: 0; }
    ul li { list-style: none; }
a { color: #000; text-decoration: none; }
    a:hover { text-decoration: underline; }
    a img { border: none; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }

.frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; }
.title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; }

.block { margin: 10px 10px 0; }

.temp { margin: 1px; }

.slideshow { clear: both; }
    .slideshow li { position: relative; overflow: hidden; }
    .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; }
.slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; }
    .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; }


ul, li { list-style: none; }
a:hover { text-decoration: underline; color: #a50001; }

.frame { background: none; border: 0px solid #fff; margin-bottom: 0px; }
.temp { margin: 0; }
.slidebar { position: absolute; top: 5px; left: 4px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; }
        .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #ff0; font-weight: 700; }

.slideshow SPAN.title { text-indent: 0px; }
.block { margin: 0;position: relative; }
#frameHlicAe { margin: 0px !important; border: 0px !important; }
.comiis_wrap960, .comiis_wrapad { margin: 0 auto; width: 960px; }
.comiis_wrapad { margin-top: 10px; }
.comiis_wrapad { overflow: hidden; }
    .comiis_wrapad img { float: left; margin-top: 0px; }

#slidesImgs li { width: 960px; height: 230px; display: none; }


function SlideShow(c) {
    var a = document.getElementById("slideContainer"), 
    	f = document.getElementById("slidesImgs").getElementsByTagName("li"), 
    	h = document.getElementById("slideBar"), 
    	n = h.getElementsByTagName("li"), 
    	d = f.length, 
    	e = lastI = 0, 
    	j, 
    	m;
    function b() {
        m = setInterval(function () {
            e = e + 1 >= d ? e + 1 - d : e + 1;
            g(1)
        }, c)
    }
    function k() {
        clearInterval(m)
    }
    function g() {
        f[lastI].style.display = "none";
        n[lastI].className = "";
        f[e].style.display = "block";
        n[e].className = "on";
        lastI = e
    }
    f[e].style.display = "block";
    a.onmouseover = k;
    a.onmouseout = b;
    h.onmouseover = function (i) {
        j = i ? i.target : window.event.srcElement;
        if (j.nodeName === "LI") {
            e = parseInt(j.innerHTML,10) - 1;
            g()
        }
    };
    b()
}
;

[jQuery]

1、操作:jQuery hide() 方法

2、功能:隐藏显示的元素这个就是 'hide()' 的无动画版。如果选择的元素是隐藏的，这个方法将不会改变任何东西。

3、效果:hide() 方法在默认的情况下是瞬间就会完成隐藏的这个视觉效果但是要是在hide(5000)方法里面添加数字的话就可以减缓效果的过程数字越大减缓的效果就越大隐藏是把整个元素隐藏起来那么其他元素就会占据隐藏掉的元素的位置个跟定位没有关系要是不定位的会一样会占据

[img]http://dl2.iteye.com/upload/attachment/0085/6758/55b1f258-32cb-335d-a052-7dd61ec34fcf.jpg[/img]
这个是点击前的效果

[img]http://dl2.iteye.com/upload/attachment/0085/6760/0735a9ff-1bce-358d-b9a1-625cb235f4a7.jpg[/img]
点击完成后的效果点击了第一行


<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});
</script>
</head>
<body>
<p>如果您点击我，我会消失。</p>
<p>点击我，我会消失。</p>
<p>也要点击我哦。</p>
</body>
</html>

2、操作：jQuery图片鼠标悬停效果

1、效果及功能说明
鼠标悬停图片放大滑动显示标题

2、实现原理
首先是鼠标触及图片后对图片的进行放大多少的设置在将要花多少时间来方法设定好后定义图片不会因为放大而改变位置始终保持居中状态的放大和div不会因为图片的放大和标题的出现而变形后是标题的设置一个显示的动画结合上图片放大的时间还有就是在鼠标移开后设置图片回复原状的时间和标题消失的动画时间的吻合

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/0367/51083d6a-e125-37e2-ba1f-6e0a9989f8a8.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!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" />
<script type="text/javascript" src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script type="text/javascript">
$(window).load(function(){
	//设置和获取一些变量
	var thumbnail = {
		imgIncrease : 100, /* 增加图像像素（变焦） */
		effectDuration : 500, /* 效果的持续时间（变焦和标题） */
		/* 
		获取的图像的宽度和高度。要使用这些
		2件事:
		列表项大小相同
		得到的图像缩放后恢复正常
		*/
		imgWidth : $('.thumbnailWrapper ul li').find('img').width(), 
		imgHeight : $('.thumbnailWrapper ul li').find('img').height()
	};

	//列表项相同的大小作为图像
	$('.thumbnailWrapper ul li').css({ 
		'width' : thumbnail.imgWidth, 
		'height' : thumbnail.imgHeight 
	});

	//当鼠标移到列表项...
	$('.thumbnailWrapper ul li').hover(function(){
		$(this).find('img').stop().animate({
			/* 变焦效果，提高图像的宽度 */
			width: parseInt(thumbnail.imgWidth) + thumbnail.imgIncrease,
			/* 我们需要改变的左侧和顶部的位置，才能有放大效应，因此我们将它们移动到一个负占据一半的img增加 */
			left: thumbnail.imgIncrease/2*(-1),
			top: thumbnail.imgIncrease/2*(-1)
		},{ 
			"duration": thumbnail.effectDuration,
			"queue": false
		});

		//使用slideDown事件显示的标题
		$(this).find('.caption:not(:animated)').slideDown(thumbnail.effectDuration);

		//当鼠标离开...
	}, function(){

		//发现图像和动画...
		$(this).find('img').animate({
			/* 回原来的尺寸（缩小） */
			width: thumbnail.imgWidth,
			/* 左侧和顶部位置恢复正常 */
			left: 0,
			top: 0

		}, thumbnail.effectDuration);

		//隐藏使用滑块事件的标题
		$(this).find('.caption').slideUp(thumbnail.effectDuration);

	});

});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#FFCC00;}
.clear{clear:both;}
body{background-color:#292929;color:#ffffff;text-align:center;font-family:'georgia';font-size: 13px;}
/* thumbnailWrapper */
.thumbnailWrapper{width:600px;margin:40px auto 0 auto;}
.thumbnailWrapper ul li{float:left;position:relative;overflow:hidden;}
.thumbnailWrapper ul li a img{width:200px;position:relative;border:none;}
.caption{position:absolute;bottom:0px;left:0px;width:100%;display:none;background:#0c4b62;color:#ffffff;opacity:0.9;}
.caption .captionInside{padding:10px;margin:0px;}
</style>
</head>
<body>

	<div class='thumbnailWrapper'>
		<ul>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/1.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>CofeeNerd</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/2.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>musiKings</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/3.png' /></a>
				<div class='caption'>
					<p class='captionInside'>The Caribbean Energy Conference 2010</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/4.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Coffee</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/5.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Quantum</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/6.png' /></a>
				<div class='caption'>
					<p class='captionInside'>Infinite Love</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/7.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Fathom</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/9.PNG' /></a>
				<div class='caption'>
					<p class='captionInside'>Mixed Pome</p>
				</div>
			</li>
			<li>
				<a href="http://www.17sucai.com/"><img src='images/10.jpg' /></a>
				<div class='caption'>
					<p class='captionInside'>Golf Lessons Online</p>
				</div>
			</li>
		</ul>

		<div class='clear'></div><!-- clear the float -->

	</div>

</body>
</html>

3、操作：jquery仿新浪微博图片文字列表间歇上下滚动淡进淡出滚动

（1、效果及功能说明
仿新浪微博图片文字列表上下淡进淡出间歇上下滚动

2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/0969/de64625e-7845-37be-b9ab-7a72278a582d.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:500px;margin:30px auto 0 auto;}
.demo h2{font-size:16px;color:#333;height:52px;line-height:24px;}
/* sidebar */
#sidebar{color:#AFB0B1;background:#0D171A;float:left;margin:0 0 24px;padding:15px 10px 10px;width:300px;}
#sidebar li{height:90px;overflow:hidden;}
#sidebar li h5{color:#A5A9AB;font-size:1em;margin-bottom:0.5em;}
#sidebar li h5 a{color:#fff;text-decoration:none;}
#sidebar li img{float:left;border:solid 3px #fff;margin-right:8px;display:inline;}
#sidebar li .info{color:#B1B1B1;font-size:1em;}
#sidebar .spyWrapper{height:100%;overflow:hidden;position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){ 
	$.fn.simpleSpy = function (limit, interval){
		limit = limit || 4;
		interval = interval || 4000;

		return this.each(function(){
			var $list = $(this),

			items = [], 

			currentItem = limit,
			total = 0, 

			height = $list.find('> li:first').height();

			$list.find('> li').each(function(){

				items.push('<li>' + $(this).html() + '</li>');

			});

			total = items.length;


			$list.wrap('<div class="spyWrapper" />').parent().css({height : height * limit});


			$list.find('> li').filter(':gt(' + (limit - 1) + ')').remove();


			function spy(){

				var $insert = $(items[currentItem]).css({height : 0,opacity : 0,display : 'none'}).prependTo($list);


				$list.find('> li:last').animate({ opacity : 0}, 1000, function(){

					$insert.animate({ height : height }, 1000).animate({ opacity : 1 }, 1000);

					$(this).remove();	

				});

				currentItem++;

				if(currentItem >= total){

					currentItem = 0;

				}
				setTimeout(spy, interval)

			}

			spy();

		});
	};   
})(jQuery);
</script>

<script type="text/javascript">
$(document).ready(function(){
	$('ul.spy').simpleSpy();
});
</script>

</head>
<body>

<div class="demo">

	<h2>jquery仿新浪微博图片文字列表间隙滚动淡进淡出滚动</h2>

	<div id="sidebar">
		<ul class="spy">
			<li>
				<a href="http://www.17sucai.com/" title="View round"><img width="70" height="70" src="images/1.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View round">round</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View reflet"><img width="70" height="70" src="images/2.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View reflet">reflet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet"><img width="70" height="70" src="images/3.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Kate Moross Little Big Planet">Kate Moross Little Big Planet</a></h5>
				<p class="info">Nov 29th 2008 by neue</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Untitled"><img width="70" height="70" src="images/4.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Untitled">Untitled</a></h5>
				<p class="info">Nov 29th 2008 by mike1052</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View My Tutorial's Library"><img width="70" height="70" src="images/5.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View My Tutorial's Library">My Tutorial's Library</a></h5>
				<p class="info">Nov 29th 2008 by FrancescoOnAir</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/6.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in"><img width="70" height="70" src="images/7.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant - Log in">Sandy — your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant"><img width="70" height="70" src="images/8.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Sandy — your free personal email assistant">Sandy — your free</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
			<li>
				<a href="http://www.17sucai.com/" title="View Values of n Blog"><img width="70" height="70" src="images/9.png" title="" /></a>
				<h5><a href="http://www.17sucai.com/" title="View Values of n Blog">Values of n Blog</a></h5>
				<p class="info">Nov 29th 2008 by John Doe</p>
			</li>
		</ul>
	</div>

</div>

</body>
</html>

4、操作：jquery图片冒泡插件鼠标悬停图片冒泡动画展示

1、效果及功能说明
图片冒泡插件鼠标悬停图片冒泡动画展示

2、实现原理
首先要设定div内只能显示4个图片那么多出来的图片会自动隐藏然后在给图片添加一个动画的事件让他们可以滚动的播放出来上下滚动效果播放就是li标签里面的内容图片和文字把每一个li看成一个整体在滚动播放的时候进入div内的显示出来在最后离开div的时候隐藏在给整个动画效果设定一个时间就可以完整的运行

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/1082/1d6f44af-8216-363a-b224-cb78aa00e663.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]

代码


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
<script type="text/javascript" src="js/jquery.bubbleup.js"></script>
<script type="text/javascript">
$(function(){
    $("ul#menu li img").bubbleup({tooltip: true, scale:96});
});
</script>
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{margin:50px auto 0 auto;width:400px;}

ul#menu li{float:left;position:relative;width:48px;height:48px;padding:0 5px;}
ul#menu li img{position:absolute;width:48px;top:0px;left:0px;overflow:hidden;}
</style>


<div class="demo">
	<ul id="menu">
		<li><a href="http://www.17sucai.com/"><img src="images/feed.png" alt="Full RSS Feed"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/email.png" alt="E-Mail Delivery"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/twitter.png" alt="Follow us on Twitter"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/facebook.png" alt="I'm on FaceBook"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/delicious.png" alt="Save it!"/></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/technorati.png" alt="Favorite this blog"/></a></li>
	</ul>
</div>

<div style="clear: both;"></div>


</body>
</html>


(function($){
	$.fn.bubbleup = function(options) {
		var opt = $.extend({}, $.fn.bubbleup.defaults, options),tip = null;

		return this.each(function() {
			var w=$(this).width();
			$(this).mouseover(function(){
				if(opt.tooltip) {
					tip = $('<div>' + $(this).attr('alt') + '</div>').css({
						fontFamily: opt.fontFamily,
						color: opt.color, 
						fontSize: opt.fontSize, 
						fontWeight: opt.fontWeight, 
						position: 'absolute', 
						zIndex: 100000
					}).remove().css({top:0,left: 0,visibility:'hidden',display:'block'}).appendTo(document.body);
					var position = $.extend({},$(this).offset(),{width:this.offsetWidth,height:this.offsetHeight}),tipWidth = tip[0].offsetWidth, tipHeight = tip[0].offsetHeight;
					tip.stop().css({
						top: position.top - tipHeight, 
						left: position.left + position.width / 2 - tipWidth / 2,
						visibility: 'visible'
					}).animate({top:'-='+(opt.scale/2-w/2)},opt.inSpeed); 
				}

				$(this).closest('li').css({'z-index':100000});

				$(this).stop().css({'z-index':100000,'top':0,'left':0,'width':w}).animate({
					left:-opt.scale/2+w/2,
					top:-opt.scale/2+w/2,
					width:opt.scale
				},opt.inSpeed);
			}).mouseout(function(){

				$(this).closest('li').css({'z-index':100});
				$(this).closest('li').next().css({'z-index':0});
				$(this).closest('li').next().css({'z-index':0});
				$(this).closest('li').next().children('img').css({'z-index':0});

				if(opt.tooltip){tip.remove()}
				$(this).stop().animate({left:0,top:0,width:w},opt.outSpeed,function(){
					$(this).css({'z-index':0});

				});
			})
		})
	}
	$.fn.bubbleup.defaults = {
		tooltip: false,
		scale:96,
		fontFamily:'Helvetica, Arial, sans-serif',
		color:'#333333',
		fontSize:12,
		fontWeight:'bold',
		inSpeed:'fast',
		outSpeed:'fast'
	}
})(jQuery);

5、操作：jquery图片九宫格样式布局图片切换

1、效果及功能说明
图片九宫格样式布局通过鼠标滑过缩略图进行大小图片切换展示

2、实现原理
通过伪类方法来触发鼠标触及效果触及效果包括，当鼠标移动到小图片上会让背景颜色变亮来告诉用户当前的触及的图片是那张后，当鼠标触及到小图片后触发将触及到的小图片移动到大的div里面并且获得本张图片的路径，做一个放大的效果让图片适应新div的大小的事件后显示出来

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/1857/8653f074-da30-3d70-9e29-12e07c4f46ad.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
</head>  
<body>  

<style type="text/css">  
*{margin:0;padding:0;list-style-type:none;}  
a,img{border:0;}  
body{font:12px/180% Arial, Helvetica, sans-serif ,"新宋体";}  
/* image_show */  
.image_show{width:948px;padding:3px 0 0 3px;border:1px solid #d9d9d9;margin:30px auto}  
.image_show .img{padding:0 3px 3px 0;position:relative;}  
.image_show .img, .image_show .img img{float:left;}  
.col_left{width:191px;float:left;overflow:hidden;}  
.col_right{float:left;width:450px;overflow:hidden;}  
#bigImg{position:relative;width:304px;height:382px;}  
#bigImg .img_mask{position:absolute;left:0;top:340px;width:304px;height:42px;background:#000;opacity:0.6;filter:alpha(opacity=60);}  
#bigImg p{position:absolute;left:0;top:340px;width:304px;height:42px;line-height:42px;font-size:16px;text-align:center;color:#fff;}  
#bigImg p a, #bigImg p a:visited{color:#fff;}  
.mask{position:absolute;left:0;top:0;background:#000;opacity:0.4;filter:alpha(opacity=40);}  
.clear{height:0;clear:both;line-height:0;font-size:0;overflow:hidden;}  
</style>  

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script type="text/javascript">  
$(function(){  

    $('#smallImg img').mouseover(function(){  

        $('#bigImg img').attr('src',$(this).attr('rel'));  

        $('#bigImg p > a').text($(this).attr('alt'));  

        $('#bigImg a').attr('href',$(this).parent().attr('href'));  

    });  

    $('#smallImg .img').hover(function(){  

        $('.mask').fadeIn();  

        $(this).children('.mask').hide();  

    },function(){  
        $('.mask').fadeIn();  

    });  

});  
</script>  

<div class="image_show">  

    <div class="img" id="bigImg">  
        <a href="http://www.17sucai.com"><img height="382" width="304" alt="量变到质变：寻找你的健康Style" src="images/photo/tk3.jpg"></a>  
        <div class="img_mask"></div>  
        <p><a href="http://www.17sucai.com">量变到质变：寻找你的健康Style</a></p>  
    </div>  

    <div id="smallImg">  
        <div class="col_left">  
            <div class="img">  
                <a href="http://www.17sucai.com"><img height="125" width="189" alt="Steinway and Sons Piano Bag 把钢琴背走 " src="images/tk1-1.jpg" rel="images/photo/tk1.jpg"></a>  
                <div class="mask" style="width:189px;height:125px;display:block;"></div>  
            </div>  
            <div class="img">  
                <a href="http://www.17sucai.com"><img height="125" width="189" alt="插花老师教你 DIY婚礼花带" src="images/tk2-2.jpg" rel="images/photo/tk2.jpg"></a>  
                <div class="mask" style="width:189px;height:125px;display:block;"></div>  
            </div>  
            <div class="img">  
                <a href="http://www.17sucai.com"><img height="125" width="189" alt="量变到质变：寻找你的健康Style" src="images/tk3-3.jpg" rel="images/photo/tk3.jpg"></a>  
                <div class="mask" style="width:189px;height:125px;display:none;"></div>  
            </div>  
        </div>  

        <div class="col_right">  
            <div class="r_top">  
                <div class="img">  
                    <a href="http://www.17sucai.com"><img height="172" width="274" alt="圣诞派对 “鞋”能HOLD住" src="images/tk4-4.jpg" rel="images/photo/tk4.jpg"></a>  
                    <div class="mask" style="width:274px;height:172px;display:block;"></div>  
                </div>  
                <div class="img">  
                    <a href="http://www.17sucai.com"><img height="171" width="169" alt="北海道的风土滋味：北京日料" src="images/tk5-5.jpg" rel="images/photo/tk5.jpg"></a>  
                    <div class="mask" style="width:169px;height:171px;display:block;"></div>  
                </div>  
            </div>  

            <div class="clear"></div>  

            <div class="r_bottom">  
                <div class="img">  
                    <a href="http://www.17sucai.com"><img height="208" width="147" alt="汪星人来袭 你准备了吗" src="images/tk6-6.jpg" rel="images/photo/tk6.jpg"></a>  
                    <div class="mask" style="width:147px;height:208px;display:blcok;"></div>  
                </div>  
                <div class="img">  
                    <a href="http://www.17sucai.com"><img height="208" width="147" alt="穿针器：懒人刺绣有保证" src="images/tk7-7.jpg" rel="images/photo/tk7.jpg"></a>  
                    <div class="mask" style="width:147px;height:208px;display:block;"></div>  
                </div>  
                <div class="img">  
                    <a href="http://www.17sucai.com"><img height="208" width="147" alt="可爱的圣诞铃铛教你折一个" src="images/tk8-8.jpg" rel="images/photo/tk8.jpg"></a>  
                    <div class="mask" style="width:147px;height:208px;display:block;"></div>  
                </div>  
            </div>  
        </div>  

    </div>  

    <div class="clear"></div>  

</div>  

</body>  
</html>

6、操作：jquery 图片切换显示图片并且有左右按钮

1、效果及功能说明
图片切换显示隐藏show/hide带左右按钮与分页索引按钮控制图片显示隐藏

2、实现原理
首先是让图片在一个带有实现事件的div内显示出来，让其他图片进行隐藏，定义一个轮播的滚动效果结合时间上的控制，让图片在规定的时间里进行轮换，轮换掉的图片进行隐藏，定义按钮的点击事件让按钮点击后改变背景颜色或者是轮播完的按钮消除背景颜色，让按钮编号分别对应三张图片让点击几号按钮是显示哪张图片，在设定当鼠标没有点击和触碰图片或者按钮下多少秒后回复正常播放，在显示的div两侧的左右按钮上在定义一个点击事件，让这个事件带有可以马上轮播掉当前的图片，替换的图片是按照当前图片的左右来计算，在点击任何按钮后轮播停止，在过去3秒后从新开始轮播效果

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/2230/7ca6ebaf-df36-35cc-8038-cee5eae54e54.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial;}
a{font-size:12px;color:#ff6600;text-decoration:none;}
a:hover{color:#3366cc;}
/* dlyL */
.dlyL{width:690px;height:415px;position:relative;margin:20px auto;}
.dlyL b{background:url(images/icons-arrow.gif) no-repeat;}
.dlyL b{width:10px;height:15px;display:block;position:absolute;top:35px;cursor:pointer;}
.dlyL b.prev{left:13px;top:110px;background-position:0 0;}
.dlyL b.next{right:13px;top:110px;background-position:-9px 0;}
.dlyL div{width:620px;height:340px;margin:0 auto 9px;overflow:hidden;border:solid 1px #ddd;}
.dlyL span{display:block;text-align:center;}
.dlyL span i{padding:2px 5px;background-color:#cbcbcb;color:#fff;margin:auto 1px;cursor:pointer;}
.dlyL span i.current{background-color:#ef7000;}
.dlyL h4{font-weight:normal;text-align:center;padding-top:8px;}
</style>
</head>

<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
	var $index = 0;
	var $nav = $(".dlyL span i");
	var $text = $(".dlyL h4 a");
	var $pics = $(".dlyL div a");


	$(".dlyL span i").click(function(){	

		var $self = $(this);
		var $index = $nav.index($self);
		showMzin($index);

		$(".dlyL b.next").click(function(){

			if($index<3){
				$index++
			}

			else if($index==3){ 
				$index=0
			}

			showMzin($index);
			/*启动效果*/
		});

		$(".dlyL b.prev").click(function(){

			if($index>0){
				$index--
			}

			else if($index==0){
				$index=3 
			}

			showMzin($index);

		});

	}).eq(0).trigger("click");

	function showMzin(i){

		$pics.hide(),

		$pics.eq(i).show(),

		$text.hide(),

		$text.eq(i).show(),

		$nav.removeClass("current"),

		$nav.eq(i).addClass("current");

	}

	DLYTime =setInterval(function(){
		$(".dlyL b.next").trigger("click");
	 }, 3000);

	$(".dlyL").mouseover(function(){
		if(DLYTime){clearInterval(DLYTime);}
	});

	$(".dlyL").mouseout(function(){
		DLYTime =setInterval(function(){
			$(".dlyL b.next").trigger("click");
	 	},3000);

	});

});
</script>
<div class="dlyL">
	<b class="prev"></b>
	<b class="next"></b>
	<div>
		<a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化" src="images/965e7aec8b1d0d112be431a8f54df0cb.jpg" /></a>
		<a href="http://www.17sucai.com/"><img width="620" height="340" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" src="images/6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg" /></a>
		<a href="http://www.17sucai.com/"><img width="620" height="340" alt="用div+css制作一个CSS3的泡泡动画按钮非常漂亮" src="images/df8440960f45b0ad68fe4d1c684e2acc.jpg" /></a>
	</div>
	<span>
		<i>1</i><i>2</i><i>3</i>
	</span>
	<h4>
		<a href="http://www.17sucai.com/">jquery colorpicker 插件颜色选择器 点击颜色选择颜色值与颜色相应变化</a>
		<a href="http://www.17sucai.com/">jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3</a>
		<a href="http://www.17sucai.com/">用div+css制作一个CSS3的泡泡动画按钮非常漂亮</a>
	</h4>
</div><!--dlyL end-->
</body>
</html>

7、操作：jquery 图像幻灯片上下滑动图片切换

1、效果及功能说明
图像幻灯片制作鼠标滑过缩略图显示相应的大图，让大图上下滑动切换，默认下图像幻灯片自动轮播

2、实现原理
自动切换小图片让大div获得切换小图片的路径让切换到的小图片能在大div里显示出来让图片定义一个2秒的动画效果让小图片通过动画的效果切换切换的小图片会有一个边框的样式改变来让用户知道现在是哪一张然后通过伪类来定义个鼠标触及的效果让鼠标触及到小图片动画停止大div里显示鼠标触及的小图片的放大版在鼠标离开小图片和大图片以后的2秒动画效果自动进行按照鼠标触及的小图片的位置继续往后切换图片

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/2695/2b113f09-3a7b-3632-bcf4-e59612cfedbe.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>


<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";background:#2a0504;}
/* acttabbox */
.acttabbox{width:990px;height:300px;overflow:hidden;padding:4px;border:solid 1px #690501;background:#541410;margin:40px auto;}
.tabcon{float:left;width:702px;height:300px;overflow:hidden;margin-right:-2px;} 
.tabcon li{width:702px;height:300px;}
.tabcon li img{width:702px;height:300px;float:left}
.tabnav{float:right;width:290px;}
.tabnav li{float:left;position:relative;margin:-1px 0 0 0;height:99px;border:1px solid #000;overflow:hidden;}
.tabnav .cur{border:1px solid #fff;z-index:9;}
</style>

<div class="acttabbox">
	<ul class="tabcon">
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1XXb8XjtXXXak1cjj-702-300.jpg" alt="敢死队2" /></a></li>
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1MdL7Xg4cXXak1cjj-702-300.jpg" alt="活埋" /></a></li>
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="702" height="300" src="images/T1STrHXlVqXXak1cjj-702-300.jpg" alt="复仇者联盟" /></a></li>
	</ul>
	<ul class="tabnav">
		<li class="cur"><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T111L6Xe8gXXbCOp6D-288-99.jpg" alt="敢死队2" /></a></li>
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T1xYL6XX4gXXbCOp6D-288-99.jpg" alt="活埋" /></a></li>	
		<li><a href="http://www.17sucai.com/" target="_blank"><img width="288" height="99" src="images/T1gd2NXd0cXXbCOp6D-288-99.jpg" alt="复仇者联盟" /></a></li>
	</ul> 
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){    

	var index=0,len=$('.tabnav li').length,_timer=null;  
	/*0 分页的数量 len里面放有tabnav里面所有的li的长度 还有超链接的打开方式*/
	function showTab(index){	
	/*定义个方法里面放有index*/		
		$('.tabnav li').eq(index).addClass('cur').siblings().removeClass('cur');
		/*右边有三个小容器 当鼠标移动到三个小容器的任意一个的时候会有一个白色外框的效果*/				 
		$('.tabcon li').eq(index).stop(true,true).slideDown('slow').siblings().slideUp('slow');
		/*根据右边的三个小容器的不管是鼠标触及还是自动切换都那一个都在左边的大容器里面显示出相对的图片*/
	}

	function auto(){
	/*定于一个auto方法*/
		timer=setTimeout(function(){
		/*在timer里面附加一个setTimeout方法*/
			index=(index+1)%len;
			/*自动切换图片*/
			showTab(index);
			/*启动效果*/
			timer=setTimeout(arguments.callee,3500);
			/*在自动切换的时候的时间3.5秒*/
		},1000)	
		/*切换大图所用的时间1秒*/
	}

	auto(); 
	/*实现方法*/
	$('').mouseenter(function(){
	/*改变.tabnav li背景颜色*/
		var index=$(this).index(); 
		/*鼠标触及以后显示出哪一张图片*/
		showTab(index);	 
		/*启动效果*/
	});

	$('.acttabbox').hover(function(){
	/*创建一个伪类*/
		clearTimeout(timer);
		/*是将timer放入整个运行的过程不放全部的运行时间就会变成1秒*/
	},function(){
		auto();
		/*启动效果*/
	});

});
</script>
</body>
</html>

8、操作：jquery 高仿2012淘宝商城多格子焦点图滚动切换

1、效果及功能说明
图片滚动切换特效，高仿2012淘宝商城首页多格子焦点图切换，鼠标滑过焦点图片各个格子区域聚光灯效果展示

2、实现原理
在显示div的下面有一个按钮条在鼠标触及到按钮的时候会改变那妞的背景颜色作为辨识，后给按钮定义一个点击事件，让点击按钮后显示出相对应的图片，在没有点击的图片的情况下自动运行滚动的动画效果，每张图片的切换时间是3秒在点击按钮或者鼠标触及到图片上动画停止当鼠标移开后3秒后启动动画每个图片有可以链接到不同的地址在其中还给包含多个图片在一个div里显示出来他们不是一体的只是在一个块级容器里，最后给图片定义个伪类当鼠标触及到图片后会改变图片的背景颜色来让用户更好的辨认

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/3111/b2bfd48f-cfbb-3c14-9b38-550e807d0e91.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";color:#333;background:#f0f0f0;}
a,img{border:0;}
/* demo */
.demo{width:780px;margin:0 auto;}
.demo h2{height:70px;line-height:50px;font-size:22px;font-weight:normal;font-family:"Microsoft YaHei",SimHei;text-align:center;}
/* focus */
#focus{position:relative;width:780px;height:420px;overflow:hidden;}
#focus ul{height:420px;position:absolute;}
#focus ul li{float:left;width:780px;height:420px;overflow:hidden;position:relative;background:#000;}
#focus ul li div{position:absolute;overflow:hidden;}
#focus .btnBg{position:absolute;width:780px;height:40px;left:0;bottom:0;background:#000;}
#focus .btn{position:absolute;height:30px;left:10px;bottom:4px;}
#focus .btn span{
	float:left;display:inline-block;width:30px;height:30px;line-height:30px;text-align:center;font-size:16px;margin-right:10px;cursor:pointer;background:#716564;color:#ffffff;
	border-radius:15px;
	-moz-border-radius:15px;
	-webkit-border-radius:15px;
}
#focus .btn span.on{background:#B91919;color:#ffffff;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
	var sWidth = $("#focus").width(); 
	var len = $("#focus ul li").length; 
	var index = 0;
	var picTimer;

	var btn = "<div class='btnBg'></div><div class='btn'>";
	for(var i=0; i < len; i++){
		btn += "<span>" + (i+1) + "</span>";
	}
	btn += "</div>"
	$("#focus").append(btn);
	$("#focus .btnBg").css("opacity",0.3);


	$("#focus .btn span").mouseenter(function(){
		index = $("#focus .btn span").index(this);
		showPics(index);
	}).eq(0).trigger("mouseenter");


	$("#focus ul").css("width",sWidth * (len + 1));


	$("#focus ul li div").hover(function(){
		$(this).siblings().css("opacity",0.7);
	},function() {
		$("#focus ul li div").css("opacity",1);
	});


	$("#focus").hover(function(){
		clearInterval(picTimer);
	},function(){
		picTimer = setInterval(function(){
			if(index == len){ 
				showFirPic();
				index = 0;
			}else{ 
				showPics(index);
			}
			index++;
		},3000); 
	}).trigger("mouseleave");


	function showPics(index){  
		var nowLeft = -index*sWidth;
		$("#focus ul").stop(true,false).animate({"left":nowLeft},500); 
		$("#focus .btn span").removeClass("on").eq(index).addClass("on"); 
	}

	function showFirPic(){ 
		$("#focus ul").append($("#focus ul li:first").clone());
		var nowLeft = -len*sWidth; 
		$("#focus ul").stop(true,false).animate({"left":nowLeft},500,function(){

			$("#focus ul").css("left","0");
			$("#focus ul li:last").remove();
		}); 
		$("#focus .btn span").removeClass("on").eq(0).addClass("on"); 
	}

});
</script>
</head>

<body>


<div class="demo">
	<h2>jquery高仿2012淘宝商城多格焦点图滚动切换</h2>
	<div id="focus">
		<ul>
			<li>
				<div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="780" height="420" src="images/5364.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>

			</li>
			<li>
				<div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="560" height="420" src="images/5152.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;top:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="images/234rwe.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;top:140px;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="images/54325.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;bottom:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="images/as124.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
			</li>
			<li>
				<div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="260" height="210" src="images/12as.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="left:260px;top:0;"><a href="http://www.17sucai.com/"><img width="260" height="210" src="images/12wf.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="left:0;top:210px;"><a href="http://www.17sucai.com/"><img width="520" height="210" src="images/adf13.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;top:0;"><a href="http://www.17sucai.com/"><img width="260" height="420" src="images/1235.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
			</li>
			<li>
				<div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="560" height="420" src="images/5243.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;top:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="images/3246.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;top:140px;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="images/536.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
				<div style="right:0;bottom:0;"><a href="http://www.17sucai.com/"><img width="220" height="140" src="images/56dsfa.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
			</li>
			<li>
				<div style="left:0;top:0;"><a href="http://www.17sucai.com/"><img width="780" height="420" src="images/52525.jpg" alt="2012淘宝商城最新多格焦点图源代码" /></a></div>
			</li>
		</ul>
	</div>
</div>

</body>
</html>

9、操作：jquery scroll图片滚动菜单鼠标移动图片滚动

1、效果及功能说明
scroll图片滚动菜单通过鼠标移动在图片上左右移动来控制左右图片滚动或左后图片滚动

2、实现原理
定义好显示div的高度和宽度将全部图片放进div里计算整体图片的宽度定义mousemove方法获得鼠标指针在页面中的位置，通过计算鼠标移动的位置和方法来让图片进行左右的移动当图片移动时多出div的图片将会被隐藏

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/3356/039ff21e-06d9-3295-8d93-dafd3d39a123.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.demo{width:240px;text-align:center;margin:40px auto 0 auto;}
.demo a{font-weight:800;font-size:18px;}
/* sc_menu */
div.sc_menu{position:relative;height:145px;width:500px;overflow:auto;margin:40px auto 0 auto;}
ul.sc_menu{display:block;height:110px;width:1500px;padding:15px 0 0 15px;background:url('images/navigati.png') repeat-x;}
.sc_menu li{display:block;float:left;padding:0 4px;}
.sc_menu a{display:block;text-decoration:none;}
.sc_menu span{display:none;margin-top:3px;text-align:center;font-size:12px;color:#fff;}
.sc_menu a:hover span{display:block;}
.sc_menu img{
	border:3px #fff solid;
    -webkit-border-radius:3px;
    -moz-border-radius:3px;
}
.sc_menu a:hover img{filter:alpha(opacity=50);opacity:0.5;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){


	var div = $('div.sc_menu'), ul = $('ul.sc_menu'), ulPadding = 15;


	var divWidth = div.width();



	div.css({overflow: 'hidden'});



	var lastLi = ul.find('li:last-child');



	div.mousemove(function(e){


		var ulWidth = lastLi[0].offsetLeft + lastLi.outerWidth() + ulPadding;	

		var left = (e.pageX - div.offset().left) * (ulWidth-divWidth) / divWidth;

		div.scrollLeft(left);

	});

});
</script>

</head>
<body>
	<div class="sc_menu">
		<ul class="sc_menu">
			<li><a href="http://www.17sucai.com/"><img src="images/1.jpg" alt="Menu"/><span>Menu</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="Javascript"/><span>jQuery</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="CSS"/><span>Scroll</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="Horizontal"/><span>Horizontal</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/6.jpg" alt="jQuery"/><span>jQuery</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/1.jpg" alt="Menu"/><span>Menu</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/2.jpg" alt="Navigation"/><span>Navigation</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/3.jpg" alt="Graceful"/><span>Graceful</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/4.jpg" alt="Degradation"/><span>Degradation</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/5.jpg" alt="Progressive"/><span>Progressive</span></a></li>
			<li><a href="http://www.17sucai.com/"><img src="images/6.jpg" alt="Enhancement"/><span>Enhancement</span></a></li>	
		</ul>
	</div>

</body>
</html>

10、操作：jquery hover图片列表上下滚动显示图片详细内容

1、效果及功能说明

hover鼠标滑过案例或产品图片列表，图片向上滚动显示图片详细内容，鼠标离开图片内容向下滚动显示案例或产品图片

2、实现原理

设定原图的消失时间和后来图片的出现时间在定义一个伪类来触发这两个切换的效果在定义装有图片的div在div里的图片才能显示切换掉的图片会隐藏起来当鼠标移动开后原图回来原图移动时间是0.226秒切换图的显示时间是0.2秒

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/3498/db96ebe1-4f3b-3fe8-8806-a9796213288c.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>


<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif ,"宋体";}
/* caselist */
.caselist{width:474px;margin:30px auto;}
.caselist li{width:227px;height:227px;float:left;margin:0 10px 15px 0;position:relative;overflow:hidden;}
.tagImg1{width:226px;height:226px;display:block; position:absolute; left:0px; top:0px;}
.tagImg1 img{width:226px;height:226px;}
.tagImg2{width:59px;height:59px;display:block;float:left;margin:0 10px 0 0;}
.tagImg2 img{width:59px;height:59px;}
.tagDiv1{background:#F4F4F4;border:1px solid #E7E7E7;padding:10px;width:205px;height:205px;position:absolute;left:0px;top:226px;z-index:2;}
.tagDiv1 h3{margin:0px;font-size:12px;color:#000;line-height:16px;}
.tagP1{margin:5px 0 0;color:#666;}
.tagP2{line-height:22px;clear:both;color:#666;padding:5px 0 0;height:115px;overflow:hidden;}
.tagP3{height:25px;}
.tagP3 a{background:url("images/jz_sprite-btn.png") no-repeat;color:#2A5077;display:inline-block;height:25px;line-height:25px;margin-left:10px;text-align:center;width:89px;text-decoration:none;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){
	var moveHeight = 226,
		moveTime = 200,
		curMove = null;
	$('.caselist li').hover(function (e){
		var curLi = $(this);
		curMove = setTimeout(function (){
			curLi.children('a.tagImg1').animate({ top: '-' + moveHeight + 'px' }, moveTime);
			curLi.children('div.tagDiv1').animate({ top: '0px' }, moveTime);
		}, 200);
	},function(e){
		clearTimeout(curMove);
		$(this).children('a.tagImg1').animate({ top: '0px' }, moveTime);
		$(this).children('div.tagDiv1').animate({ top: moveHeight + 'px' }, moveTime);
	});
});
</script>

<ul class="caselist">
	<li>
		<a href="http://www.17sucai.com" class="tagImg1" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
		<div class="tagDiv1">
			<a href="http://www.17sucai.com" class="tagImg2" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
			<h3>全聚德</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">全聚德通过网站很好的宣传了企业品牌。利用图片展示菜系，通过照片和描述介绍了用餐环境，留下完整的地点电话等,方便客户提前了解菜谱和用餐环境。</p>
			<p class="tagP3"><a href="http://www.17sucai.com" target="_blank">查看该产品</a><a href="http://www.17sucai.com" target="_blank">查看案例</a></p>
		</div>
	</li>
	<li>
		<a target="_blank" class="tagImg1" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
		<div class="tagDiv1">
			<a target="_blank" class="tagImg2" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
			<h3>佳思特</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">佳思特很好的利用自己的官网，将公司业务领域和特色等清晰明确的写明。同时在公司介绍里展示自己的资质和实力，通过列举客户案例的方式也会提升企业竞争力。</p>
			<p class="tagP3"><a target="_blank" href="http://www.17sucai.com">查看该产品</a><a target="_blank" href="http://www.17sucai.com">查看案例</a></p>
		</div>
	</li>
	<li>
		<a target="_blank" class="tagImg1" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
		<div class="tagDiv1">
			<a target="_blank" class="tagImg2" href="http://www.17sucai.com"><img alt="深圳市佳思特企业管理咨询有限公司" src="images/bzImg004.jpg"></a>
			<h3>佳思特</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">佳思特很好的利用自己的官网，将公司业务领域和特色等清晰明确的写明。同时在公司介绍里展示自己的资质和实力，通过列举客户案例的方式也会提升企业竞争力。</p>
			<p class="tagP3"><a target="_blank" href="http://www.17sucai.com">查看该产品</a><a target="_blank" href="http://www.17sucai.com">查看案例</a></p>
		</div>
	</li>
	<li>
		<a href="http://www.17sucai.com" class="tagImg1" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
		<div class="tagDiv1">
			<a href="http://www.17sucai.com" class="tagImg2" target="_blank"><img src="images/bzImg001.jpg" alt="全聚德" /></a>
			<h3>全聚德</h3>
			<p class="tagP1">类型：标准网站</p>
			<p class="tagP2">全聚德通过网站很好的宣传了企业品牌。利用图片展示菜系，通过照片和描述介绍了用餐环境，留下完整的地点电话等,方便客户提前了解菜谱和用餐环境。</p>
			<p class="tagP3"><a href="http://www.17sucai.com" target="_blank">查看该产品</a><a href="http://www.17sucai.com" target="_blank">查看案例</a></p>
		</div>
	</li>
</ul><!--caselist end-->

</body>
</html>

11、操作：jquery 仿麦包包商城图片滑动伸缩图片广告代码

1、效果及功能说明
仿麦包包商城网站首页全屏图片上下滑动伸缩图片广告代码，设置固定时间图片滑动伸缩的图片广告代码

2、实现原理

先获得显示div的宽度高度自由在将两个图片放到div里显示每次只显示一张图片隐藏时间为1秒下一张显示时间为1秒全部显示和隐藏的动画用时2.5秒内完成显示的div会跟着图片的大小来调节div的高度，所以高度是自由的没有显示出来的图片是处于隐藏的一个状态

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/4005/56c35322-ef1b-3140-9918-11d4001619a8.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.advpic{width:960px;margin:0 auto;}
</style>

<div class="advpic" style="display:block;" id="js_ads_banner_top">
	<a href="http://www.17sucai.com/" target="_blank"><img alt="图片滑动广告" src="images/banner_s.jpg" width="960" height="70" /></a>
</div>

<div class="advpic" style="display:none;" id="js_ads_banner_top_slide">
	<a href="http://www.17sucai.com/" target="_blank"><img alt="图片滑动广告" src="images/banner_b.jpg" width="960" height="400" /></a> 
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	if($("#js_ads_banner_top_slide").length){
		var $slidebannertop = $("#js_ads_banner_top_slide"),$bannertop = $("#js_ads_banner_top");
		setTimeout(function(){
			$bannertop.slideUp(1000);
			$slidebannertop.slideDown(1000);
		},2500);
		setTimeout(function(){
			$slidebannertop.slideUp(1000,function(){
				$bannertop.slideDown(1000);
			});
		},8500);
	}
});
</script>
</body>
</html>

12、操作：jquery 广告图片各大商城首页流行通栏广告图片

1、效果及功能说明
广告图片制作各大商城首页顶部通栏广告图片，默认下滑动展开广告图片大图，之后滑动收起展开广告小图

2、实现原理

定义图片隐藏图片和显示图片的时间1.5秒，在图片右上角的按钮上定义一定点击效果让点击了按钮后实现隐藏效果并在完全隐藏后显示原来图片的缩小版缩小版全部显示出来后显示出另外一个按钮就是重播在重播按钮上在定义一个点击效果这个效果是显示图片的效果当点击后原来的小图片会隐藏大图片会显示然后重播按钮隐藏，关闭按钮重新显示出来

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/4409/a1473672-7c40-3da6-8f84-7641db72d95b.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
/* advbox */
.advbox{width:990px;margin:0 auto;}
.advbox .dt_small{width:990px;}
.advbox .dt_big{width:990px;}
.advbox .dt_toBig{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_showTL_1201.png");cursor:pointer;}
.advbox .dt_toSmall{position:absolute;left:50%;margin:5px 0px 0px 440px;width:49px;height:21px;background:url("images/public_closeTL_1201.png");cursor:pointer;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>			

<div class="advbox">

	<div class="dt_small" style="display:none;">
		<div class="dt_toBig" style="display:none;"></div>
		<a href="http://www.17sucai.com/" target="_blank"><img src="images/1325.jpg" width="990" height="60" alt="jquery广告图片缩略图" /></a>
	</div>

	<div class="dt_big">
		<div class="dt_toSmall"></div>
		<a href="http://www.17sucai.com/" target="_blank"><img id="actionimg" src="images/sa11.jpg" width="990" height="500" alt="jquery广告图片大图" /></a>
	</div>

</div>

<script type="text/javascript">
function AdvClick(){
	var a=1500;
	var b=3*1000;
	$(".dt_toSmall").click(function(){
		$(".dt_small").delay(a).slideDown(a);
		$(".dt_big").stop().slideUp(a);
		$(".dt_toSmall").stop().fadeOut(0);
		$(".dt_toBig").delay(a*2).fadeIn(0)
	});$
	(".dt_toBig").click(function(){
		$(".dt_big").delay(a).slideDown(a);
		$(".dt_small").stop().slideUp(a);
		$(".dt_toBig").stop().fadeOut(0);
		$(".dt_toSmall").delay(a*2).fadeIn(0)
	})
}

function AdvAuto(){
	if($(".dt_big").length>0){
		var a=1500;
		var b=3*1000;
		$(".dt_big").delay(b).slideUp(a,function(){
			$(".dt_small").slideDown(a);
			$(".dt_toBig").delay(a).fadeIn(0)
		});
		$(".dt_toSmall").delay(b).fadeOut(0)
	}
}
</script>

<script type="text/javascript">
$(document).ready(function(){
	AdvClick();
});
//顶部通览可展开收起效果
if($("#actionimg").length>0){	
	$("#actionimg").onload=AdvAuto();
}
</script>				

</body>
</html>

13、操作：jquery 广告制作jQuery侧面浮动图片广告或滚屏图片广告

1、效果及功能说明
图片广告制作一个侧面浮动图片广告特效，类似滚屏效果的图片广告

2、实现原理

是先后获得页面的高度然后在获得装有图片的块级元素的高度计算页面的高度除于2在块级元素高度除于2把最后获得高度值赋值给块级容器让块级容器始终保持页面高度居中的效果在滚动页面时候通过定义一个动画的效果让广告在0.4秒内移动到当前页面高度的中间

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/4828/2ef8bc05-6220-346a-9ba6-337914e2d624.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.fixediv{position:fixed;top:140px;z-index:9999;width:140px;height:216px;background:#ddd;}
.fixediv img{float:left;}
.fixediv a.close{display:block;height:30px;line-height:30px;background:#fff;font-size:14px;padding:0 10px;color:#5e5e5e;text-decoration:none;text-align:center;}
.leftadv{left:0px;}
.rightadv{right:0px;}
</style>

<div class="fixediv leftadv">
	<a href="http://www.17sucai.com/"><img src="images/180.jpg" width="140" height="186" alt="性感美女" /></a>
	<a class="close" href="javascript:void(0);">关闭广告</a>
</div>

<div class="fixediv rightadv">
	<a href="http://www.17sucai.com/"><img src="images/280.jpg" width="140" height="186" alt="清纯美女" /></a>
	<a class="close" href="javascript:void(0);">关闭广告</a>
</div>

<div style="height:1200px;"></div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<script type="text/javascript">
$(document).ready(function(){

	$(".fixediv a").click(function(){

		$(".fixediv").fadeOut(400);

	});

	$(".fixediv").floatadv();

});

jQuery.fn.floatadv = function(loaded) {
	var obj = this;
	body_height = parseInt($(window).height());
	block_height = parseInt(obj.height());

	top_position = parseInt((body_height/2) - (block_height/2) + $(window).scrollTop());
	if (body_height<block_height) { top_position = 0 + $(window).scrollTop(); };

	if(!loaded) {
		obj.css({'position': 'absolute'});
		obj.css({ 'top': top_position });
		$(window).bind('resize', function() { 
			obj.floatadv(!loaded);
		});
		$(window).bind('scroll', function() { 
			obj.floatadv(!loaded);
		});
	} else {
		obj.stop();
		obj.css({'position': 'absolute'});
		obj.animate({ 'top': top_position }, 400, 'linear');
	}
}
</script>

</body>
</html>

14、操作：jquery 右侧边固定层导航菜单依次动画滑动显示菜单展开

1、效果及功能说明
右侧边固定层导航菜单，鼠标滑过浮动层导航菜单依次动画滑动显示菜单内容展开，鼠标离开后菜单收缩

2、实现原理

展开是通过计算鼠标触及装有a标签的div开始从0号a标签开始展开每个展开是0.2秒每一个之间的这个效果不轮用户是从上面触及还是从下面触及都是从上面的0号开始展开到最后的
间隔是50*200 每个全部展开的时间是0.3秒

回收也是鼠标只要移动开会从最上面的a标签开始回收到最后

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/5258/363f835e-941d-37b3-90b6-2ddc30182221.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";background:#DCDCDC;}
/* rightNav */
.rightNav{position:fixed;top:0;right:0;z-index:9999;width:140px;cursor:pointer;margin:100px 0 0 0;}
*html,*html body /* 修正IE6振动bug */{background-image:url(about:blank);background-attachment:fixed;}
*html .rightNav{position:absolute;top:expression(eval(document.documentElement.scrollTop));}
.rightNav a{display:block;position:relative;height:30px;line-height:30px;margin-bottom:2px;background:#fff;padding-right:10px;width:130px;overflow:hidden;cursor:pointer;right:-110px;}
.rightNav a:hover{text-decoration:none;color:#1974A1;}
.rightNav a:hover em{background:#00b700}
.rightNav a em{display:block;float:left;width:30px;background:#1974A1;color:#fff;font-size:16px;text-align:center;margin-right:10px;font-style:normal;}
</style>

</head>
<body>
<!-- 右侧导航 -->
<div class="rightNav">
	<a href="http://www.17sucai.com/"><em>0</em>站长素材</a>
	<a href="http://www.17sucai.com/"><em>1</em>书签切换</a>
	<a href="http://www.17sucai.com/"><em>2</em>幻灯片</a>
	<a href="http://www.17sucai.com/"><em>3</em>图片滚动-左</a>
	<a href="http://www.17sucai.com/"><em>4</em>图片滚动-上</a>
	<a href="http://www.17sucai.com/"><em>5</em>图片无缝滚动-左</a>
	<a href="http://www.17sucai.com/"><em>6</em>图片无缝滚动-上</a>
	<a href="http://www.17sucai.com/"><em>7</em>文字滚动-左</a>
	<a href="http://www.17sucai.com/"><em>8</em>文字滚动-上</a>
	<a href="http://www.17sucai.com/"><em>9</em>文字无缝滚动-左</a>
	<a href="http://www.17sucai.com/"><em>10</em>文字无缝滚动-上</a>
	<a href="http://www.17sucai.com/"><em>11</em>其它基础效果</a>
</div>
<script type="text/javascript">
var btb=$(".rightNav");
var tempS;
$(".rightNav").hover(function(){
	var thisObj = $(this);
	tempS = setTimeout(function(){
		thisObj.find("a").each(function(i){
			var tA=$(this);
			setTimeout(function(){
				tA.animate({right:"0"},300);
			},50*i);
		});
	},200);
},function(){
	if(tempS){
		clearTimeout(tempS);
	}
	$(this).find("a").each(function(i){
		var tA=$(this);
		setTimeout(function(){
			tA.animate({right:"-110"},300,function(){
			});
		},50*i);
	});
});
</script>

<div style="height:1000px;"></div>

</body>
</html>

15、操作：jquery 左侧列表导航条鼠标滑过flash动画导航条

1、效果及功能说明
导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录

2、实现原理

先通过遍历匹配到每一个元素，这个是为了让所有的导航栏都可以获得显出相对因下拉框的效果，定义一个伪类事件让鼠标触及到导航栏后触发相对因的下拉框在给下拉框一个类这个类定义好了下拉框的样式，下拉框的出现是同意一个动画的效果来实现，时间为0.4秒内完成然后在定义一个方法在鼠标移开导航栏后下拉框在就直接清楚jquery给的类让下拉框消失这个也是一个动画效果来完成时间为0.3秒

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/5664/f1a4ee90-405e-3889-9a99-d16916509702.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#1d1d1d;font:12px/180% "Lucida Grande", Verdana, sans-serif;}
.navbox{margin:30px auto;position:relative;width:340px;}
.navbox .mask{position:absolute;top:30px;left:-190px;}
.navbox h2{color:#ffff66;margin:0 0 0 13px;height:40px;font-size:14px;}
/* sliderNav */
#sliderNav{font-size:14px;margin:30px 0 0 0;}
#sliderNav li.sliderTag h3,#sliderNav li.sliderTag a{display:block;width:180px;padding:5px 18px;margin:0 0 5px 0;}
#sliderNav li.sliderTag h3{color:#000;background:#eee;font-weight:normal;font-size:14px;}
#sliderNav li.sliderTag a{color:#999;background:#4B4B4B;border:1px solid #1a1a1a;text-decoration:none;}
#sliderNav li.sliderTag a:hover{color:#ffff66;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	slide("#sliderNav", 25, 15, 180, .8);
});

function slide(navigation_id, pad_out, pad_in, time, multiplier){

	var list_elements = navigation_id + " li.sliderTag";
	var link_elements = list_elements + " a";

	var timer = 0;

	$(list_elements).each(function(i){
		$(this).css("margin-left","-210px");
		// 更新计时器
		timer = (timer*multiplier + time);
		$(this).animate({ marginLeft: "0" }, timer);
		$(this).animate({ marginLeft: "15px" }, timer);
		$(this).animate({ marginLeft: "0" }, timer);
	});

	$(link_elements).each(function(i){
		$(this).hover(function(){
			$(this).animate({ paddingLeft: pad_out }, 180);
		},function(){
			$(this).animate({ paddingLeft: pad_in }, 180);
		});
	});

}
</script>

<div class="navbox">
	<img width="190" height="317" src="images/background.jpg" class="mask" />
	<h2>jquery导航条悬停效果</h2>
	<ul id="sliderNav">
		<li class="sliderTag"><h3>jquery flash动画导航条</h3></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">网站首页</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">jquery 特效</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">javascript特效</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">flash特效</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">div+css教程</a></li>
		<li class="sliderTag"><a href="http://www.17sucai.com/">html5教程</a></li>
	</ul>
</div><!--navbox end-->

</body>
</html>

16、操作：jquery 导航菜单二级菜单slide滑动渐隐显示

1、效果及功能说明
导航菜单制作一个二级菜单导航条，鼠标滑过导航条二级菜单slide滑动展示且带有渐隐效果展示比较柔和的二级菜单目录

2、实现原理

先通过遍历匹配到每一个元素，这个是为了让所有的导航栏都可以获得显出相对因下拉框的效果，定义一个伪类事件让鼠标触及到导航栏后触发相对因的下拉框在给下拉框一个类这个类定义好了下拉框的样式，下拉框的出现是同意一个动画的效果来实现，时间为0.4秒内完成然后在定义一个方法在鼠标移开导航栏后下拉框在就直接清楚jquery给的类让下拉框消失这个也是一个动画效果来完成时间为0.3秒

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/6108/9efe2bd1-dcf8-3899-9a0b-80dbe82a9c9d.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#333;text-decoration:underline;}
body{font:12px/180% Arial,Lucida,Verdana,"宋体",Helvetica,sans-serif;color:#333;background:#fff;}
/* navbox */
.navbox,.nav li,.nav li.current a,.nav li.selected a span,.nav li a.selected,.nav li a.selected span{background:url(images/headerbg.png) no-repeat;}
.navbox{height:39px;background-position:0 -138px;background-repeat:repeat-x;position:relative;z-index:9;}
.nav{width:960px;margin:0 auto;}
.nav li{float:left;height:39px;background-position:100% -99px;padding:0 3px 0 2px;position:relative;}
.nav li.last{background:none;}
.nav li a{float:left;display:block;padding:0 0 0 4px;height:39px;overflow:hidden;}
.nav li a span{float:left;display:block;padding:0 4px 0 0;line-height:39px;font-size:14px;color:#fff;font-weight:800;cursor:pointer;width:142px;text-align:center;}
.nav li.selected a,.nav li a.selected{background-position:0 -60px;text-decoration:none;}
.nav li.selected a span,.nav li a.selected span{background-position:100% -60px;color:#ff7e00;}
.nav li.selected .submenu{display:block;}
.nav li .submenu{display:none;position:absolute;top:39px;left:6px;}
.nav li .submenu{border-style:solid;border-width:0px 1px 1px 1px;border-color:#ddd;padding:0 5px 5px 5px;width:132px;background:#fff;}
.nav li .submenu{-moz-border-radius:0 0 3px 3px;-webkit-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;-moz-box-shadow:0 5px 5px #D3D3D3;-webkit-box-shadow:0 5px 5px #D3D3D3;box-shadow:0 5px 5px #D3D3D3;}
.nav li .submenu li{float:none;padding:0;background:none;height:auto;border-bottom:dotted 1px #BEBEBE;}
.nav li .submenu li.last{border:none;}
.nav li .submenu li a{float:none;padding:0;text-align:center;height:28px;line-height:28px;background:none;}
.nav li .submenu li a:hover{background:#ddd;font-weight:800;}
</style>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function dropMenu(obj){
	$(obj).each(function(){
		var theSpan = $(this);
		var theMenu = theSpan.find(".submenu");
		var tarHeight = theMenu.height();
		theMenu.css({height:0,opacity:0});
		theSpan.hover(
			function(){
				$(this).addClass("selected");
				theMenu.stop().show().animate({height:tarHeight,opacity:1},400);
			},
			function(){
				$(this).removeClass("selected");
				theMenu.stop().animate({height:0,opacity:0},400,function(){
					$(this).css({display:"none"});
				});
			}
		);
	});
}

$(document).ready(function(){

	dropMenu(".drop-menu-effect");

});
</script> 


<div class="navbox">
	<div class="nav">
		<ul class="clearfix">
			<li><a class="selected" target="_blank" href="http://www.17sucai.com/"><span>网站首页</span></a></li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery代码</span></a>
				<ul class="submenu">
					<li><a href="http://www.17sucai.com/">jquery图片特效</a></li>
					<li><a href="http://www.17sucai.com/">jquery导航菜单</a></li>
					<li><a href="http://www.17sucai.com/">jquery选项卡特效</a></li>
					<li><a href="http://www.17sucai.com/">jquery文字特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery图片特效</span></a>	
				<ul class="submenu">
					<li><a href="http://www.17sucai.com/">jquery图片切换</a></li>
					<li><a href="http://www.17sucai.com/">jquery幻灯片</a></li>
					<li><a href="http://www.17sucai.com/">jquery图片滚动</a></li>
					<li><a href="http://www.17sucai.com/">jquery图片放大镜</a></li>
					<li><a href="http://www.17sucai.com/">jquery广告</a></li>
					<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery导航菜单</span></a>	
				<ul class="submenu">
					<li><a href="http://www.17sucai.com/">jquery动画菜单</a></li>
					<li><a href="http://www.17sucai.com/">jquery树形菜单</a></li>
					<li><a href="http://www.17sucai.com/">jquery下拉菜单</a></li>
					<li><a href="http://www.17sucai.com/">jquery右键菜单</a></li>
					<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery选项卡特效</span></a>
				<ul class="submenu">
					<li><a href="http://www.17sucai.com/">jquery选项卡切换</a></li>
					<li><a href="http://www.17sucai.com/">jquery滑动选项卡</a></li>
					<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
				</ul>
			</li>
			<li class="drop-menu-effect">
				<a target="_blank" href="http://www.17sucai.com/"><span>jquery文字特效</span></a>	
				<ul class="submenu">
					<li><a href="http://www.17sucai.com/">jquery文字滚动</a></li>
					<li><a href="http://www.17sucai.com/">jquery文字闪烁</a></li>
					<li><a href="http://www.17sucai.com/">jquery文字切换</a></li>
					<li><a href="http://www.17sucai.com/">jquery文字数量</a></li>
					<li><a href="http://www.17sucai.com/">jquery文字改变</a></li>
					<li><a href="http://www.17sucai.com/">jquery更多特效</a></li>
				</ul>
			</li>
		</ul>
	</div>
</div>

</body>
</html>

17、操作：jquery 左侧列表导航条鼠标滑过flash动画导航条

1、效果及功能说明

导航菜单插件制作当鼠标滑过显示二级下拉菜单目录子内容，这是一款轻量级的jquery菜单插件非常实用

2、实现原理

首先这个是一个个体的下拉框的效果实现，首先要定义出两个伪类来第一个是在鼠标触及到外面的a标签以后触发一个伪类这个伪类的方法里面包含有显示出下拉框的方法然后当鼠标移开外面的a标签时将会触发第二个伪类方法里面的删除类的方法，这样就实现了一个下拉框的展现和隐藏。

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/6495/ca642748-7826-35e3-9a9f-24c781c3ca61.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery导航菜单插件制作常用的jquery 二级下拉菜单子内容</title>
</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function(a){
	a.fn.hoverClass=function(b){
		var a=this;
		//定义参数
		a.each(function(c){
			a.eq(c).hover(function(){
				$(this).addClass(b)
			},function(){
				$(this).removeClass(b)
			})
		});
		return a
	};
})(jQuery);

$(function(){
	$("#navbox").hoverClass("current");

});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#333;text-decoration:none;}
a:hover{color:#3366cc;text-decoration:underline;}
body{font:12px/180% "宋体";}
/* menu */
.menu{height:26px;width:110px;margin:20px auto;background:#fff;position:relative;}
.menu a{display:block;height:24px;line-height:24px;padding:0 0 0 10px;border:solid 1px #ddd;}
.menu a.tit{background:url(images/arrow.gif) no-repeat;background-position:94px 9px;}
#navbox.current a.tit{background-position:94px -15px;color:#3366cc;font-weight:800;border-bottom:solid 1px #fff;position:relative;z-index:9;}
.menu .subnav{display:none;background:#fff;position:absolute;top:25px;left:0px;width:140px;border-style:solid;border-color:#ddd;border-width:1px;}
#navbox.current .subnav{display:block;}
.menu .subnav a{border:none;}
.menu .subnav a:hover{background:#eee;border-left:solid 1px #fff;border-right:solid 1px #fff;font-weight:800;}
</style>

<div id="navbox" class="menu">
	<a class="tit" href="http://www.17sucai.com/">jquery特效</a>
	<ul class="subnav">
		<li><a href="http://www.17sucai.com/">jquery图片特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery导航菜单</a></li>
		<li><a href="http://www.17sucai.com/">jquery选项卡特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery文字特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery表单特效</a></li>
		<li><a href="http://www.17sucai.com/">jquery表格特效</a></li>
	</ul>
</div><!--navbox end-->

</body>
</html>

18、操作：jquery 无缝滚动插件支持图片无缝滚动或文字无缝滚动

1、效果及功能说明

上下无缝滚动插件，可以任意配置图片上下无缝滚动和文字上下无缝滚动，当容器里面的高度未满时，图片或文字不进行无缝滚动

2、实现原理

首先是设定文字滚动的速度，然后设定每一行文字的高度，接下来来定义文字的自动滚动和当滚动完成一轮后新的文字从最下方出来最上的文字消失每次从下方出现设定为一条文字并且控制文字是从想下往上的滚动方式，最后在定义一个伪类当鼠标触及到文字时所有滚动效果停止，当鼠标离开文字后重新计算新的滚动时间并开始重新滚动的效果

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/6855/f65ea160-49f0-3d25-b76e-f1e8cd100a3a.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
(function($){

	$.fn.myScroll = function(options){
	var defaults = {
		speed:40,  
		rowHeight:24 
	};

	var opts = $.extend({}, defaults, options),intId = [];
	function marquee(obj, step){
		obj.find("ul").animate({
			marginTop: '-=1'
		},0,function(){
				var s = Math.abs(parseInt($(this).css("margin-top")));
				if(s >= step){
					$(this).find("li").slice(0, 1).appendTo($(this));
					$(this).css("margin-top", 0);
				}
			});
		}

		this.each(function(i){
			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
			intId[i] = setInterval(function(){
				if(_this.find("ul").height()<=_this.height()){
					clearInterval(intId[i]);
				}else{
					marquee(_this, sh);
				}
			}, speed);

			_this.hover(function(){
				clearInterval(intId[i]);
			},function(){
				intId[i] = setInterval(function(){
					if(_this.find("ul").height()<=_this.height()){
						clearInterval(intId[i]);
					}else{
						marquee(_this, sh);
					}
				}, speed);
			});

		});

	}

})(jQuery);

$(function(){

	$("div.ranklist").myScroll({
		speed:40,
		rowHeight:24
	});

});
</script>	

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a,a:visited{color:#5e5e5e; text-decoration:none;}
a:hover{color:#b52725;text-decoration:underline;}
.clear{display:block;overflow:hidden;clear:both;height:0;line-height:0;font-size:0;}
body{font:12px/180% Arial, Helvetica, sans-serif;}
.demo{width:600px;margin:20px auto;border:solid 1px #ddd;padding:0 10px;}
.demo h2{font-size:14px;color:#333;height:30px;line-height:30px;padding:15px 0;color:#3366cc;}
/* ranklist */
.ranklist{height:200px;overflow:hidden;}
.ranklist li{height:16px;line-height:16px;overflow:hidden;position:relative;padding:0 70px 0 30px;margin:0 0 10px 0;}
.ranklist li em{background:url(images/mun.gif) no-repeat;width:20px;height:16px;overflow:hidden;display:block;position:absolute;left:0;top:0;text-align:center;font-style:normal;color:#333;}
.ranklist li em{background-position:0 -16px;}
.ranklist li.top em{background-position:0 0;color:#fff;}
.ranklist li .num{position:absolute;right:0;top:0;color:#999;}
</style>

<div class="demo">
	<h2>jquery上下无缝滚动插件 列表溢出高度时 自动上下无缝滚动</h2>
	<div class="ranklist">
		<ul>
			<li class="top">
				<em>01</em><p><a href="http://www.17sucai.com/" target="_blank">js图片左右无缝滚动用鼠标控制图片滚动</a></p><span class="num">32万下载</span>
			</li>
			<li class="top">
				<em>02</em><p><a href="http://www.17sucai.com/" target="_blank">js无缝滚动制作js文字无缝滚动和js图片无缝滚动</a></p><span class="num">32万下载</span>
			</li>
			<li class="top">
				<em>03</em><p><a href="http://www.17sucai.com/" target="_blank">jquery 滚动 kxbdSuperMarquee插件支持图片与文字无缝滚动 图片翻滚 焦点图左右切换 banner广告制作</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>04</em><p><a href="http://www.17sucai.com/" target="_blank">javascript滚动图片插件支持单排图片上下滚动、图片无缝滚动</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>05</em><p><a href="http://www.17sucai.com/" target="_blank"> javascript滚动图片带按钮控制上下左右自动无缝滚动</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>06</em><p><a href="http://www.17sucai.com/" target="_blank">jquery hover图片插件制作鼠标滑过标题单个展开图片效果</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>07</em><p><a href="http://www.17sucai.com/" target="_blank">flash图片特效3D立体动画焦点图片切换带左右按钮控制滚动</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>08</em><p><a href="http://www.17sucai.com/" target="_blank">js lazyload实现网页图片延迟加载特效</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>09</em><p><a href="http://www.17sucai.com/" target="_blank">FlippingBook电子杂志书去版权,翻页图片全部外调 站长珍藏版</a></p><span class="num">32万下载</span>
			</li>
			<li>
				<em>10</em><p><a href="http://www.17sucai.com/" target="_blank">门户网站jquery广告控制flash或图片顶部广告显示隐藏</a></p><span class="num">32万下载</span>
			</li>
		</ul>
	</div>
</div>

</body>
</html>

19、操作：jquery 3D动画文字滚动标签云,鼠标光标定位上下文字滚动

1、效果及功能说明

3D动画文字滚动特效带标签云上下文字滚动，鼠标光标定位时上下文字滚动感应

2、实现原理

首先将在div定义一个可以辨识鼠标位置的方法比且获得鼠标的位置然后定义方法通过辨别鼠标的位置让里面的文字或向上滚动或向下滚动，定义滚动的速度和滚动的平率速度慢滚动就慢平率慢画面就会给用户一种很卡的感觉，在控制文字的层级关系让显示在最前面的文字保持最高层级和文字在滚动中的尺寸大小最前面的最大最后面的最小，还可以通过移动鼠标让滚动效果停止

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/7429/c115a6ce-b195-3ae8-a775-6cacf7e57098.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!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>jquery 3D动画文字滚动标签云,鼠标光标定位上下文字滚动</title>
<meta name="description" content="jquery 3D动画文字滚动特效带标签云上下文字滚动，鼠标光标定位时上下文字滚动感应。" />

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{font-family:Arial, "MS Trebuchet", sans-serif;background-color:#111;}
#list{margin:0 auto;height:600px;width:600px;overflow:hidden;position:relative;background-color:#000;}
#list a{position:absolute;text-decoration:none;color:#666;}
#list a:hover{color:#ccc;}
</style>

</head>
<body>

	<div id="list">
		<ul>
			<li><a href="http://www.17sucai.com/">PhP</a></li>
			<li><a href="http://www.17sucai.com/">jQuery</a></li>
			<li><a href="http://www.17sucai.com/">Magento</a></li>
			<li><a href="http://www.17sucai.com/">MySql</a></li>
			<li><a href="http://www.17sucai.com/">Js</a></li>
			<li><a href="http://www.17sucai.com/">HTML</a></li>
			<li><a href="http://www.17sucai.com/">CSS</a></li>
			<li><a href="http://www.17sucai.com/">Ajax</a></li>
			<li><a href="http://www.17sucai.com/">ThinkPHP</a></li>
			<li><a href="http://www.17sucai.com/">Apache</a></li>
			<li><a href="http://www.17sucai.com/">Linux</a></li>
			<li><a href="http://www.17sucai.com/">Python</a></li>
			<li><a href="http://www.17sucai.com/">web</a></li>
			<li><a href="http://www.17sucai.com/">xhtml</a></li>
		</ul>
	</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	var element = $('#list a');
	var offset = 1; 
	var stepping = 0.03;
	var list = $('#list');
	var $list = $(list)
	$list.mousemove(function(e){
		var topOfList = $list.eq(0).offset().top
		var listHeight = $list.height()
		stepping = (e.clientY - topOfList) /  listHeight * 0.2 - 0.1;
	});

	for (var i = element.length - 1; i >= 0; i--){
		element[i].elemAngle = i * Math.PI * 2 / element.length; 
	}

	setInterval(render, 20);
	function render(){
		for (var i = element.length - 1; i >= 0; i--){
			var angle = element[i].elemAngle + offset;
			x = 120 + Math.sin(angle) * 30;			
			y = 45 + Math.cos(angle) * 40;

			size = Math.round(40 - Math.sin(angle) * 40);

			var elementCenter = $(element[i]).width() / 2;

			var leftValue = (($list.width()/2) * x / 100 - elementCenter) + "px"

			$(element[i]).css("fontSize", size + "pt");
			$(element[i]).css("opacity",size/100);
			$(element[i]).css("zIndex" ,size);
			$(element[i]).css("left" ,leftValue);
			$(element[i]).css("top", y + "%");
		}
		offset += stepping;
	}

});
</script>
</body>
</html>

20、操作：jquery 霓虹灯文字效果

1、效果及功能说明

使用jQuery和CSS | jsfoot脚本特效演示

2、实现原理

首先定义个计算毫秒的周期方法这个方法可以自行就行循环然后就开始判断因为在div里面有两个span标签图片有是同时放进两个里面在设完他们的层级关系以后，将第二个先进行隐藏，通过判断让第二个和第一个不断的进行互相的切换，第二张图也一直保持的距左以后其实我们看见的都是第二张图片不停的变化位置而带来的颜色的变化我们看到的外形都是第一张看见的颜色变换都是第二张图片的在相同的位置不断变化着自己的位置来带第一张图片字体颜色的变化

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/7915/2b5f0cb7-280c-32e9-8806-453063458810.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<h1 id="neonText">
	Neon Text Effect With jQuery & CSS.
	<span class="textVersion" id="version1"></span>
    <span class="textVersion" id="version2"></span>
</h1>


<link rel="stylesheet" type="text/css" href="styles.css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</body>
</html>

6、[css]


*{
	margin:0;
	padding:0;
}

body{
	font-size:14px;
	color:#ccc;
	background-color:#141414;
	font-family:Arial, Helvetica, sans-serif;
}

#neonText span{
	width:700px;
	height:150px;
	position:absolute;
	left:0;
	top:0;

	background:url('img/text.jpg') no-repeat left top;
}

span#version1{
	z-index:100;
}

span#version2{
	background-position:left bottom;
	z-index:99;
}


#neonText{
	height:150px;
	margin:180px auto 0;
	position:relative;
	width:650px;
	text-indent:-9999px;
}

7、[jquery]


$(document).ready(function(){
//定义个在页面加载完成后可激活所有函数的方法
	setInterval(function(){
	//定义以毫秒为计算单位的周期方法
		var versions = $('.textVersion:visible');
		//定义参数将textVersion选定中每个可见的元素
		if(versions.length<2){
		//判断versions的长度大于2
			$('.textVersion').fadeIn(800);
			//那么textVersion的淡入效果为800
		}
		else{
		//否则
			versions.eq(0).fadeOut(800);
			//就调用遍历设定淡出效果为800
		}
	},1000);
	//整体的一轮的效果变化时间为1000毫秒就是1秒钟
});

21、操作：jquery 文字特效制作文字鼠标滑过多彩色变色显示

1、效果及功能说明

文字特效制作文字鼠标滑过变色多彩色效果显示，颜色随机匹配变色显示，酷炫效果

先设定好需要变化的几种颜色然后通过改变背景颜色的方法将不同的颜色匹配到不同的文字上去在创建一个伪类让得触发这个变化字体颜色的方法和取消

主要的方法


.bind("mouseleave", function()  
就是修改背景颜色告诉要修改是什么  

$(".colorize2").hover(function()  
这段就是如何触发修改通过一个伪类来触发  

var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]  
这就是告诉用户触发什么样的效果，7种颜色都用数组装好了  

var index = Math.floor(Math.random()*7)  
让文字可以随机获得里面的颜色每一个文字获得一种会出现重复  

color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]  
        colorized = colorized + '<span style="color: '+color+' !important">' + text.charAt(i) + '</span>'  
当鼠标来回以后在两组字之间是，每个字都会发生变化

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/8396/8b2d4d19-df48-3336-be2b-a5ded9812d19.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

(无图片)

5、代码[html5]


<!DOCTYPE html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<style type="text/css">  
body, div{margin:0;padding:0;}  
html{font-size:62.5%;height:100%;background-color:#111;}  
body{background-color:#111;color:#eee;font:normal 1.25em/1.75em Helvetica, Arial, Verdana, sans-serif;padding:0;margin:50px auto;width:70em;}  
strong{font-weight:bold;}  
a:link, a:visited{color:#fff;text-decoration:none;}  
a:hover{color:#999; text-decoration:underline}  
.clear{clear:both}  
/* demo */  
.demo{width:960px;margin:0 auto;}  
.demo h1.title{font-weight:normal;font-size:2.6em;border-bottom:2px solid #333;color:#fff;line-height:1.25em;height:54px;}  
.demo .link{font-weight:bold;font-size:2em;background:#0a0a0a;padding:1em;display:inline-block;cursor:pointer;_display:inline;zoom:1;/*fuck IE6*/}  
.demo .link:hover{text-decoration:none;}  
</style>  

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>  
<script type="text/javascript">  
$(document).ready(function() {   
    $(".colorize").bind("mouseenter", function(){  
        $(this).data("text", $(this).text());   
        $(this).html(colorize($(this).text()));   
    }).bind("mouseleave", function(){   
        $(this).html($(this).data("text"));   
    });  
     $(".colorize2").hover(function(){  
        $(this).data("text", $(this).text());  
        $(this).html(colorize($(this).text()));   
    }, function(){  
    //定义方法  
        $(this).html($(this).data("text"));   
    });  

})  

var colors = ["#ff2e99", "#ff8a2d", "#ffe12a", "#caff2a", "#1fb5ff", "#5931ff", "#b848ff"]    

function colorize(text) {   
    var colorized = ""   
    var bracket_color = ""   
    for (i = 0; i < text.length; i++) {   
        var index = Math.floor(Math.random()*7)  

        if (text[i] == "(")  
        //text里面放入i   
            bracket_color = colors[index]  


        color = (bracket_color.length && (text[i] == "(" || text[i] == ")")) ? bracket_color : colors[index]  
        colorized = colorized + '<span style="color: '+color+' !important">' + text.charAt(i) + '</span>'  
    }  
    return colorized  
}  
</script>  
</head>  
<body>  

<div class="demo">  

    <h1 class="title"><a href="http://www.17sucai.com/" title="点击标题查看教程">jQuery链接变色演示</a></h1>  


    <a class="link colorize" href="http://www.17sucai.com/" title="鼠标放上来也会变色哦">前端观察</a>  

    <div class="link colorize2" onClick="location.href='http://www.17sucai.com/'">鼠标放上去会变色，嘿嘿！</div>  

</div>  

</body>  
</html>

22、操作：jquery 段落文字内容高亮显示提示

1、效果及功能说明

段落文字内容高亮显示一段主要文字内容提示。通过设置鼠标滑过段落标签，高亮显示此标签的内容含义信息

主要的方法

先定义三个伪类事件的触发，然后定义触发伪类的后需要的效果，在把这些效果分别设定当相印的触发条件里面去，效果是让不是主体的文字透明多少，在给主体的文字加上背景颜色和字体颜色的加深让用户更好知道字段文章的主要要说的是什么

主要的方法


maskSource.animate({opacity:0.7},1).fadeIn('750');   
var sample1 = $('span.d1');  
var sample2 = $('span.d2');  
var sample3 = $('span.d3');  
在定义出三个需要这样效果类  

$('a.d1').hover(function(){  
sample1.addClass('show');  
},function(){  
sample1.removeClass('show');  
    });  
这个方法就是说当鼠标触及后触发效果，鼠标移开后回复原状

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/9597/7e504911-cd9e-3d09-b439-166b7b468f1c.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
a{color:#900;text-decoration:none;background:#fff0f0;}
a,.entity-source span{padding:0 2px;margin:0 -2px;}
a:hover{background:#ffd8d8;}
body{font:12px/180% helvetica,arial,sans-serif, "新宋体";background:#eee;color:#333;}
/* wrapper */
.wrapper{background:#fff;}
.wrapper,.content img{border:1px solid #ccc;border-left-color:#aaa;border-bottom-color:#aaa;}
.wrapper{width:520px;margin:60px auto;padding:25px 0 10px;}
/* content */
.content{width:360px;margin:0 0 0 20px;}
.content h2{font-size:21px;margin:0 0 10px}
.content p{margin:0 0 15px;line-height:18px}
.content img{float:left;padding:2px;margin:4px 10px 0 0;}
/* entity-results */
.entity-results{float:right;margin:0 -10px 0 0;}
.entity-results li{margin-bottom:2px;}
.entity-results a{background:#900;color:#eee;line-height:28px;width:120px;padding-left:7px;display:block;}
.entity-results a:hover{background:#5c0000;}
/* entity-source */
.entity-source .mask{display:none;position:absolute;top:0;left:0;height:100%;width:100%;z-index:1;background:#fff;}
.entity-source span{z-index:2;}
.entity-source span.show{background:#ffc;color:#000;}
.entity-source,.entity-source span.show{position:relative;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function($) {

	var maskSource = $('.mask');


	$('.entity-results').hover(function(){

		maskSource.animate({opacity:0.7},1).fadeIn('750');

	},function(){

		maskSource.fadeOut('1000');

	});

	var sample1 = $('span.d1');

	var sample2 = $('span.d2');

	var sample3 = $('span.d3');


	$('a.d1').hover(function(){

		sample1.addClass('show');

	},function(){

		sample1.removeClass('show');

	});

	$('a.d2').hover(function(){

		sample2.addClass('show');

	},function(){

		sample2.removeClass('show');

	});

	$('a.d3').hover(function(){

		sample3.addClass('show');

	},function(){

		sample3.removeClass('show');

	});

});
</script>
</head>
<body>

	<div class="wrapper">

		<ul class="entity-results">
			<li><a class="d1" href="#">总结</a></li>
			<li><a class="d2" href="#">阿凡达</a></li>
			<li><a class="d3" href="#">格式</a></li>
		</ul>

		<div class="content">
			<h2>“阿凡达”Avatar（2009年电影）</h2>
			<div class="entity-source">
				<img src="images/avatar.jpg" alt="Avatar poster"/>
				<p>“阿凡达”詹姆斯·卡梅隆的阿凡达，也被称为是美国的3-D科幻史诗电影编剧和导演詹姆斯·卡梅隆（James Cameron）由20世纪福克斯公司，并于2009年12月16日发布。这部电影是联合制作的Lightstorm娱乐, 和 <span class="d1">集中在一个史诗般的潘多拉星球上的冲突</span>,有人居住的地球大小的月亮的波吕斐摩斯，三个虚构的气态巨行星轨道的半人马座阿尔法星A的潘多拉，人类殖民者和众生的人形原居民，纳美人（潘多拉）之一，从事的战争在地球上的资源，而后者则继续存在。 这部电影的标题指的是 <span class="d2">阿凡达, 表示在虚拟世界中的一个真正的人</span>.</p>

				<p><span class="d3">在2D和3D格式的影片上映</span>, 随着IMAX 3D版本在选定的剧院。这部影片被吹捧为电影制作技术方面取得突破性进展，其开发的三维可视摄像头，专为电影的制作和立体电影制作。</p>
				<div class="mask"></div>
			</div>
		</div>

	</div><!--wrapper end-->

</body>
</html>

23、操作：jquery checkbox 选中取消

1、效果及功能说明

checkbox多选框点击事件控制显示隐藏

主要的方法

点击打勾点击填写内容信息，会触发添加一个类，这个类能让下面的用户名和密码的输入框填写当没有打勾的时候就会把这个类给删除掉让用户名和密码没办法填写

主要的方法


$("#findform li .inputext").removeClass("grayinput");
删除类，不能填写
$("#findform li .inputext").addClass("grayinput");
点击以后添加这个类，变得可以填写

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/9039/39195e14-2b0a-3543-a513-415a8e96ec11.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>

<body>
<style type="text/css">
*{margin:0;margin:0;list-style-type:none;}
a,img{border:0;}
img{vertical-align:middle;}
label{cursor:pointer;}
address,caption,cite,code,dfn,em,strong,th,var,optgroup{font-style:normal;font-weight:normal}
input,button,textarea,select,optgroup,option{font-family:inherit;font-size:inherit;font-style:inherit;font-weight:inherit}
input,button,textarea,select{*font-size:100%}
body{font:12px/180% Arial,"宋体";color:#333;}

.formbox{width:400px;border:solid 1px #ddd;padding:10px 20px 20px 20px;margin:0 auto;}
.findfive{height:20px;overflow:hidden;padding:5px 0 0 20px;}
/* findform */
#findform{padding:0 0 0 20px;}
#findform li .inputext{width:360px;height:20px;line-height:20px;padding:0 0 0 3px;background:url(images/inputbg.png) no-repeat;border:solid 1px #c6c6c6;}
#findform li .inputext input{border:none;font-family:Arial;background:none;width:97%;margin:3px 0 0 0;}
#findform li .grayinput{background:url(images/inputgraybg.png) no-repeat;}
</style>

<div class="formbox">
	<div class="findfive"><input type="checkbox" name="" id="five" /> <label for="five">点击填写内容信息</label></div>
	<ul id="findform" class="clearfix">
		<li><span class="f-l">姓名：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
		<li><span class="f-l">身份证号：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
		<li><span class="f-l">手机（选填）：</span><div class="f-l inputext grayinput"><input type="text" name="" value="" id="" disabled="disabled" /></div></li>
	</ul>
</div><!--formbox end-->

<script type="text/javascript">
$(document).ready(function(){
	$("#five").click(function(){
		if($(this).attr("checked")){

			$("#findform li input").removeAttr("disabled",""); 
			$("#findform li .inputext").removeClass("grayinput");
		}else{
			$("#findform li input").attr("disabled","disabled");
			$("#findform li .inputext").addClass("grayinput");
		}
	})
});
</script>
</body>
</html>

24、操作：jquery 鼠标悬停到图片时浮动高亮透明层滑动到当前图片高亮

1、效果及功能说明

鼠标悬停到图片时，浮动高亮透明层随着鼠标悬停的图片相应滑动到当前图片高亮显示

主要的方法

先定义好给图片加透明层的效果但后先去掉，当鼠标移动到图片的上面立即触动一个方法让给透明层的通过一个动画进入到用户的视野里，从高度和宽度都是设定的图片的两倍后在开始缩小直接到和原图片一样大小位置，随着鼠标移动到那张图片而移动

主要的方法


$('.box').bind('mouseover',function()
//隐藏掉鼠标的上的改变背景颜色的效果

$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})
当鼠标触及到图片后开始显示这个效果

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/9256/8cbf77e9-d6de-342d-97ee-65cdab7ad8a9.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{background:#eee;font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.demo{width:490px;margin:30px auto;}
.box{float:left;width:100px;height:100px;border:1px solid white;background:#EEE;margin:10px;position:relative;display:inline;}
.box a{display:block;width:100px;height:100px;overflow:hidden;position:absolute;left:0;top:0;z-index:9;}
.boxBor{
	position:absolute;left:0;top:0;display:none;border:1px solid white;z-index:4;
	background:#fff;
	background:-moz-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
	background:-webkit-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
	background:-o-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
	background:-ms-linear-gradient(top,rgba(255,255,255,0.25),rgba(255,255,255,0.77));
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

<div class="boxBor"></div>

<div class="demo">
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl3.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl4.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl5.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl3.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl4.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl5.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl.jpg" alt="" /></div>
	<div class="box"><a href="http://www.17sucai.com/"></a><img width="100" height="100" src="images/girl2.jpg" alt="" /></div>
	<div style="clear:both;"></div>
</div>


<script type="text/javascript">
$(function(){
	$('.box').bind('mouseover',function(){

		var oPosition=$(this).position();

		var oThis=$(this);	

		$('.boxBor').queue('fnHide');	

		if($(".boxBor").attr('deta-switch')!=='true'){

			$(".boxBor").attr('deta-switch','true');

			$(".boxBor").css({
				width:'100%',
				height:$(window).height(),
				left:'0px',
				top:'0px',
				opacity:0,
				display:'block'
			})

		}
		$(".boxBor").stop(false,false).animate({

			opacity:0.8,

			left:oPosition.left+10,

			top:oPosition.top+10,

			width:oThis.width(),

			height:oThis.height()
		},250)
	});
})
</script>


</body>
</html>

25、操作：jquery hover事件鼠标滑过图片半透明标题文字滑动显示隐藏

1、效果及功能说明

hover事件制作产品图片鼠标滑过图片半透明，标题文字从左到右滑动动画移动显示隐藏

主要的方法

首先把效果都隐藏，然后定义一个伪类来触发所有的效果，接下来当触发伪类后会有一个遍历停止所有的效果，从新触发效果就是标题的从左边淡出和背景颜色的变化，当鼠标离开图片后触发一个遍历，停止所有动画标题回到原处不见，背景颜色变回原样

主要的方法


$(".section	 ul li").hover(function()
//伪类的触发

$(this).find(".rsp").stop().fadeTo(500,0.5)
$(this).find(".text").stop().animate({left:'0'}, {duration: 500})
//这两段就是标题的淡出和背景颜色的改变

$(this).find(".rsp").stop().fadeTo(500,0)
$(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})
$(this).find(".text").animate({left:'-318'}, {duration: 0})
//这三段就让标题回放到原来的位置上去，让背景颜色回到原样

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0086/9594/509a05b5-ea3b-318b-b03e-26f7f4fbf0c5.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
/* section */
.section{width:981px;margin:40px auto 0 auto;overflow:hidden;}
.section ul{width:996px;}
.section ul li{float:left;margin-right:14px;margin-bottom:13px;display:inline;width:318px;height:343px;overflow:hidden;position:relative;}
.section ul li .photo{width:318px;height:343px;overflow:hidden;}
.section .rsp{width:318px;height:343px;overflow:hidden;position: absolute;background:#000;top:0px;left:0px;}
.section .text{position:absolute;width:318px;height:343px;left:-318px;top:0px;overflow:hidden;}
.section .text h3{width:318px;margin-top:130px;height:55px;line-height:55px;text-align:center;color:#FFFFFF;background:#000000;font-family:"microsoft yahei";font-size:26px;}
</style>

<div class="section">
	<ul class="clearfix">
		<li>
			<div class="photo"><img src="images/index_28.jpg" width="318" height="343" /></div>
			<div class="rsp"></div>
			<div class="text"><a href="http://www.17sucai.com/"><h3>布品展示</h3></a></div>
		</li>
		<li>
			<div class="photo"><img src="images/index_30.jpg" width="318" height="343" /></div>
			<div class="rsp"></div>
			<div class="text"><a href="http://www.17sucai.com/"><h3>新品纵览</h3></a></div>
		</li>
		<li>
			<div class="photo"><img src="images/index_32.jpg" width="318" height="343" /></div>
			<div class="rsp"></div>
			<div class="text"><a href="http://www.17sucai.com/"><h3>灵感街拍</h3></a></div>
		</li>
		<li>
			<div class="photo"><img src="images/index_36.jpg" width="318" height="343" /></div>
			<div class="rsp"></div>
			<div class="text"><a href="about.asp"><h3>公司故事</h3></a></div>
		</li>
		<li>
			<div class="photo"><img src="images/index_29.jpg" width="318" height="343" /></div>
			<div class="rsp"></div>
			<div class="text"><a href="http://www.17sucai.com/"><h3>留言</h3></a> </div>
		</li>
		<li>
			<div class="photo"><img src="images/index_38.jpg" width="318" height="343" /></div>
			<div class="rsp"></div>
			<div class="text"><a href="http://www.17sucai.com/"><h3>联系我们</h3></a></div>
		</li>
	</ul>
	<div class="clear"></div>
</div>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){


	$(".section ul li .rsp").hide();


	$(".section	 ul li").hover(function(){

		$(this).find(".rsp").stop().fadeTo(500,0.5)

		$(this).find(".text").stop().animate({left:'0'}, {duration: 500})

	},function(){
		$(this).find(".rsp").stop().fadeTo(500,0)
		$(this).find(".text").stop().animate({left:'318'}, {duration: "fast"})

		$(this).find(".text").animate({left:'-318'}, {duration: 0})
	});

});
</script>

</body>
</html>

26、操作：jquery hover鼠标悬停品牌图片旋转动画展示

1、效果及功能说明

hover鼠标悬停图片特效，品牌图片列表通过鼠标滑过品牌图片旋转动画展示，鼠标离开品牌图片旋转回来

主要的方法

利用图片上下开始减少px知道变成一条直线后，让黑色背景的第二章图片通过动画效果从最下面出现后来把原本第一条直线替代成第二章图片的黑线在增加黑线的上下px，和现在白色的字体给用户带来旋转的效果

主要的方法


$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function()
//就是让原本图变成一条居中的直线
$(this).find('b').animate({'height':0,'top':'35px'},d,function()
//就是让第二章背景黑色图片变成一条直线

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/0297/0c5c3eb0-f8af-3d1c-9243-6bcf4a83c87d.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* allbrand */
.allbrand .brand{width:390px;height:225px;overflow:hidden;margin:40px auto 0 auto;}
.allbrand .brand a{display:inline;position:relative;float:left;width:120px;height:70px;line-height:70px;text-align:center;color:#fff;font-size:14px;margin:0 6px 5px 0;}
.allbrand .brand a img{position:absolute;left:10px;width:118px;height:68px;border:1px solid #e9e8e8;}
.allbrand .brand a b{display:none;position:absolute;top:36px;left:10px;width:118px;height:0;background:#000;border:1px solid #e9e8e8;cursor:pointer;overflow:hidden;}
</style>

<div class="allbrand">
	<div class="brand">
		<a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
	<div class="brand">
		<a target="_blank" href="http://www.17sucai.com/"><img alt="兰芝" src="images/20121119104931.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="丝塔芙" src="images/20121015052055.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="高丝" src="images/20121210102224.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="美宝莲" src="images/20121220100203.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="水之密语" src="images/20130106112242.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="曼秀雷敦" src="images/20121220100514.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="JUST BB" src="images/20130106112655.jpg" /></a>
		<a target="_blank" href="http://www.17sucai.com/"><img alt="玉兰油" src="images/20121123030707.jpg" /></a>
	</div>
</div>


<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
var allBrandAnimate = function(t,d){
	if(t.find('.brand b').length != 0){
		return false;
	}
	t.find('.brand a').each(function(){
		$(this).append('<b>' + $(this).find('img').attr('alt') + '</b>')
	});
	t.find('.brand a').hover(function(){
		$(this).find('img').stop().animate({'height':0,'top':'35px'},d,function(){
			$(this).hide().next().show();
			$(this).next().animate({
				'height':'70px',
				'top':'0'
				//高度变成0
			},d);
		});
	},function(){
	//定义方法
		$(this).find('b').animate({'height':0,'top':'35px'},d,function(){
			$(this).hide().prev().show();
			$(this).prev().animate({
				'height':'70px',
				'top':'0'
			},d);
		});
	});
}
allBrandAnimate($('.allbrand'),80);
</script>

</body>
</html>

27、操作：jquery 鼠标滑过产品图片背景高亮闪烁显示

1、效果及功能说明

鼠标滑过悬停特效，div css制作产品列表图片布局通过鼠标滑过产品图片背景高亮闪烁显示，产品标题滑动显示或隐藏

主要的方法

首先定义好一个重复实现效果的方法，然后定义光带出现速度和从什么位置出现，在定义当鼠标触及到图片后标题出什么位置出现到什么为位置停止，中间要花多少时间，最后在定义当鼠标离开图片后标题缩回去到那里和用的时间

主要的方法


$(this).find(".shine").css("background-position","-160px 0");
//定义重复的动画效果

$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);
//定义光带的动画效果和用时

$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});
//鼠标触及后的标图出现的到那里停止和用时

$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200})
//鼠标离开后标题的回缩到哪里和用时

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/0874/b0e0dae3-5eca-305b-8294-1a1758b1df00.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* brands-list */
.brands-list{width:480px;height:460px;overflow:hidden;margin:20px auto 0 auto;}
.brands-list li{float:left;width:155px;margin:0 4px 7px 0;display:inline;}
.brands-list li a{position:relative;height:104px;display:block;overflow:hidden;cursor:pointer;}
.brands-list li a .title{z-index:2;position:absolute;bottom:10px;left:-160px;width:150px;height:20px;padding:0 0 0 10px;color:#f1e8eb;line-height:17px;background:url(images/img_caption_bg.png) no-repeat;}
.brands-list li a .shine{z-index:3;position:absolute;top:0;left:0;width:160px;height:104px;background:url(images/shine_brands.png) no-repeat -160px 0;}

.brands-list li a .title{_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='images/img_caption_bg.png');}
.brands-list li a .shine{_background:none;}
</style>

<div class="brands-list">
	<ul>
		<li><a href="http://www.17sucai.com/"><img src="images/01.jpg" alt="Prada"/><span class="title">Prada</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/02.jpg" alt="Dolce&Gabbana"/><span class="title">Dolce&Gabbana</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/03.jpg" alt="Etro"/><span class="title">Etro</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/04.jpg" alt="Fendi"/><span class="title">Fendi</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/05.jpg" alt="Michael Kors"/><span class="title">Michael Kors</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/06.jpg" alt="Neil Barrett"/><span class="title">Neil Barrett</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/07.jpg" alt="Moncler"/><span class="title">Moncler</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/09.jpg" alt="Parosh"/><span class="title">Parosh</span><span class="shine"> </span></a></li>
		<li><a href="http://www.17sucai.com/"><img src="images/04.jpg" alt="Fendi"/><span class="title">Fendi</span><span class="shine"> </span></a></li>
	</ul>
</div><!--brands-list end-->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".brands-list li a").hover(function(){
		$(this).find(".shine").stop();
		$(this).find(".shine").css("background-position","-160px 0");
		$(this).find(".shine").animate({backgroundPosition: '160px 0'},500);

						$(this).find(".title").stop().animate({left:'0px'},{queue:false,duration:450});

	},function(){
		$(this).find(".title").stop().animate({left:'-160px'},{queue:false,duration:200});

	});
});
</script>
</body>
</html>

28、操作：jquery animate或css3制作查看原图按钮收缩隐藏

1、效果及功能说明

制作两种查看原图按钮收缩展开，隐藏关闭

主要的方法

定义好伪类让后让伪类来控制显示原图片的标志出现和隐藏，通过css来定义图标出现的位置和多少时间内完成动画的效果，在分别定义鼠标在图片的左右变成左右箭头的鼠标告诉用户往那边滚动

主要的方法


$("#pin-jsbox").mouseenter(function(){
//控制容器里面的按钮收缩隐藏
$(this).find("#zoomr_show").animate({width:"32",height:"32"},100);	
//控制查看原图的标志出现的地方		   
}).mouseleave(function(){
$(this).find("#zoomr_show").animate({width:"0",height:"0"},100);
//当鼠标离开图片后显示原图的标志消失

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/1392/945144fb-3b73-34e2-ba33-be2ec66771d5.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){


	$("#pin_cssbox").hover(function(){

		$(this).addClass("hover");

	},function(){
		$(this).removeClass("hover");

	});


	$("#pin-jsbox").mouseenter(function(){

		$(this).find("#zoomr_show").animate({width:"32",height:"32"},100);		   
	}).mouseleave(function(){
		$(this).find("#zoomr_show").animate({width:"0",height:"0"},100);
	});

});

</script>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
.demo{width:700px;margin:40px auto;}
.thead{height:40px;line-height:30px;}
.thead h2{font-size:14px;margin:0 20px;display:inline;color:#3366cc;}

.box{height:315px;width:320px;position:relative;overflow:hidden;border:solid 1px #ddd;float:left;margin:0 10px;display:inline;}
#zoomr_show{

	z-index:9999;position:absolute;display:block;_background:#000;background-image:url(zoomr_in.png);cursor:pointer;

	-webkit-transition:right .15s ease-in-out,top .15s ease-in-out;
	-moz-transition:right .15s ease-in-out,top .15s ease-in-out;
	-ms-transition:right .15s ease-in-out,top .15s ease-in-out;
	-o-transition:right .15s ease-in-out,top .15s ease-in-out;
	transition:right .15s ease-in-out,top .15s ease-in-out
}
#zoomr_show:hover{background-position:left -32px}
#zoomr_show:active{background-position:left -64px}

#pin_cssbox #zoomr_show{top:-50px;right:-50px;width:32px;height:32px;}
#pin_cssbox.hover #zoomr_show,#pin_cssbox:hover #zoomr_show{top:0;right:0;}

#pin-jsbox #zoomr_show{top:0;right:0;width:0;height:0;}

.box .prevbtn,.box .nextbtn{position:absolute;top:0;width:50%;height:100%;display:block;z-index:100;background:url(spacer.gif);}
.box .prevbtn{cursor:url("http://www.17sucai.com/static/images/prev.cur"), auto;left:0;}
.box .nextbtn{cursor:url("http://www.17sucai.com/static/images/next.cur"), auto;right:0;}
</style>

<div class="demo">

	<div class="thead">
		<h2 style="float:left;">css3 控制查看原图按钮动画收缩隐藏</h2>
		<h2 style="float:right;">jQuery animate控制查看原图按钮动画收缩隐藏</h2>
	</div>

	<div class="box" id="pin_cssbox">
		<img src="images/1235.jpg" width="320" height="315" alt="刘诗诗" />
		<a href="http://www.17sucai.com/" title="上一篇" class="prevbtn"></a>
		<a href="http://www.17sucai.com/" title="上一篇" class="nextbtn"></a>
		<a target="_blank" href="images/2345.jpg" title="查看原图" id="zoomr_show"></a>
	</div>


	<div class="box" id="pin-jsbox">
		<img src="images/645.jpg" width="320" height="315" alt="刘诗诗" />
		<a href="http://www.17sucai.com/" title="上一篇" class="prevbtn"></a>
		<a href="http://www.17sucai.com/" title="上一篇" class="nextbtn"></a>
		<a target="_blank" href="images/534.jpg" title="查看原图" id="zoomr_show"></a>
	</div>

</div>

</body>
</html>

28、操作：jquery 图片聚光灯特效制作社交图标聚光灯特效

1、效果及功能说明

打造一种图片聚光灯特效，当鼠标滑过单组中的单个社交图标时，当前高亮，其它图标变暗的这种类似图片聚光灯特效

主要的方法

首先先让鼠标触及到当前图片后，让其他图片全部透明化，然后显示出当前的提示语，当鼠标移开以后隐藏当前的提示语，让所有的背景颜色的透明度变回正常。

主要的方法


$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);
//定义鼠标触及图片背景颜色其他图片透明度的修改

$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);
//让当前的提示语出现和定义出现的地方

$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);
//当鼠标移开之后，背景颜色的透明度回复正常	

$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);
//让后鼠标离开图片后提示语恢复到原始的地方消失不见

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/1835/5c96f33d-151d-3d2a-8bbd-5095c4f803e9.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE htm>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){


	$("#jquery li").each(function(){

		$("a strong", this).css("opacity", "0");

	});

	$("#jquery li").hover(function(){ 

		$(this).stop().fadeTo(500,1).siblings().stop().fadeTo(500,0.2);

		$("a strong", this).stop().animate({opacity:1,top:"-10px"},300);

	},function(){ 
		$(this).stop().fadeTo(500, 1).siblings().stop().fadeTo(500,1);	
		$("a strong", this).stop().animate({opacity:0,top:"-1px"},300);

	});

});
</script>
</head>
<body>

	<div id="wrapper">
		<h1>社交图标显示</h1>
		<h3>jQuery</h3>
		<ul class="social" id="jquery">
			<li class="delicious">
				<a href="http://www.17sucai.com/"><strong>Delicious</strong></a>
			</li>
			<li class="digg">
				<a href="http://www.17sucai.com/"><strong>Digg</strong></a>
			</li>
			<li class="facebook">
				<a href="http://www.17sucai.com/"><strong>Facebook</strong></a>
			</li>
			<li class="flickr">
				<a href="http://www.17sucai.com/"><strong>Flickr</strong></a>
			</li>
			<li class="linkedin">
				<a href="http://www.17sucai.com/"><strong>LinkedIn</strong></a>
			</li>
			<li class="reddit">
				<a href="http://www.17sucai.com/"><strong>Reddit</strong></a>
			</li>
			<li class="rss">
				<a href="http://www.17sucai.com/"><strong>RSS</strong></a>
			</li>
			<li class="twitter">
				<a href="http://www.17sucai.com/"><strong>Twitter</strong></a>
			</li>
		</ul><!--social end-->
	</div>

</body>
</html>

29、操作：jquery 表单提交衣服尺寸选择勾选获取value值

1、效果及功能说明

表单提交制作各大商城衣服尺寸选择勾选效果，点击购物车提交勾选尺寸value值。一款简单实用的衣服尺寸选择勾选效果

主要的方法

通过查询当前的图片的id然后通过对应id找到在通过遍历后面说有尺码，找到相对应的尺码通过点击时间来触发，和当点击了以后添加一个类让点击以后出现在尺码的图标和其他的图标有明显的不一样让用户更好的知道自己选择了什么，在点击购物车的时候将有添加类的图片信息放进购物车内

主要的方法


var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();
//通过点击事件获得尺码的信息

thisToggle.addClass('current');
//添加这个类让图片不一样

return false;
在所有图片添加类里只能一次执行一次

$(".choosetext span").html(text)
//对比收索以后的所有元素获得尺码
$("#" + id).find(".choosetext span.value").html()
//放入购物车

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/2208/0c3bc3cc-3648-3691-8af5-f32991a341ab.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
body{background:#fff;font-size:12px;font-family:Helvetica,Arial,sans-serif,"宋体";color:#333;}
.clear{display:block; clear:both;}
.clearfix:after{content:"."; display:block; height:0; clear:both;visibility:hidden;}
*html .clearfix{height:1%;}
*+html .clearfix{height:1%;}
a{color:#333;text-decoration:none;}
a:hover{color:#990000;text-decoration:underline;}
/* choose */
.choose{width:260px;margin:100px auto 0 auto;border:solid 1px #ddd;padding:15px 30px 30px 30px;}
.choosetext{height:24px;padding:20px 0;font-size:14px;}
.choosebox{padding:0 0 35px 0;}
.choosebox li{float:left;margin-right:10px;display:inline;}
.choosebox li a{float:left;background:#fff;font-size:14px;border:1px solid #ccc;height:14px;line-height:14px;padding:4px 12px; display:block;}
.choosebox li a.current{background:url(images/right-icon.gif) no-repeat 100% 100%;border:1px solid #A10000;}
.choosebox li input{display:none;}
.choose .btn-img{width:160px;height:50px;overflow:hidden;background:url(images/cart.gif) no-repeat;cursor:pointer;border:0;}
.choose .btn-img span{display:block;font-size:18px;font-weight:800;color:#fff;font-family:"微软雅黑","宋体";padding:0 0 0 50px;line-height:50px;}
</style>

<div class="choose" id="dress-size">
	<form action="" method="get">
		<div class="choosetext">尺寸：<span>未选择</span></div>
		<div class="choosebox">
			<ul class="clearfix">
				<li>
					<input type="radio" name="name" value="S" id="" />
					<a href="javascript:void(0);" class="size_radioToggle"><span class="value">S</span></a>
				</li>
				<li>
					<input type="radio" name="name" value="M" id="" />
					<a href="javascript:void(0);" class="size_radioToggle"><span class="value">M</span></a>
				</li>
				<li>
					<input type="radio" name="name" value="L" id="" />
					<a href="javascript:void(0);" class="size_radioToggle"><span class="value">L</span></a>
				</li>
				<li>
					<input type="radio" name="name" value="XL" id="" />
					<a href="javascript:void(0);" class="size_radioToggle"><span class="value">XL</span></a>
				</li>
				<li>
					<input type="radio" name="name" value="XXL" id="" />
					<a href="javascript:void(0);" class="size_radioToggle"><span class="value">XXL</span></a>
				</li>
			</ul>
		</div>
		<div><button type="submit" class="btn-img"><span>放入购物车</span></button></div>
	</form>	
</div><!--choose end-->

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){   

	$('.choosebox li a').click(function(){

		var thisToggle = $(this).is('.size_radioToggle') ? $(this) : $(this).prev();

		var checkBox = thisToggle.prev();

		checkBox.trigger('click');

		$('.size_radioToggle').removeClass('current');

		thisToggle.addClass('current');

		return false;

	});		
});

$(".choosebox li a").click(function(){

	var text = $(this).html();

	$(".choosetext span").html(text);

	$("#result").html("" + getSelectedValue("result"));

});

function getSelectedValue(id){

	return

	$("#" + id).find(".choosetext span.value").html();

}
</script>

</body>
</html>

30、操作：jquery 表格可编辑修改表格里面的数值

1、效果及功能说明

表格特效制作jquery表格可编辑任意修改里面的数值，是一种比较人性化的用户设计体验方式

主要的方法

通过点击事件来触发跳出一个输入框可以在里面输入当这个输入框失去焦点后就把，所有值放到当前的input里面。

主要的方法


if(!$(this).is('.input'))
//当点击了input后

$(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function()
//点击以后跳出一个input类，在里面输入值，当失去焦点后把值都发给原先的那个input里面

$(this).parent().removeClass('input').html($(this).val() || 0
//当失去焦点后把input类给删除掉让跳出来的input消失

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/2466/ea5cfc40-c896-3aa6-bdfa-5152aff250b1.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(function(){	
	$('table td').click(function(){
		if(!$(this).is('.input')){
			$(this).addClass('input').html('<input type="text" value="'+ $(this).text() +'" />').find('input').focus().blur(function(){

				$(this).parent().removeClass('input').html($(this).val() || 0);

			});					
		}
	}).hover(function(){
		$(this).addClass('hover');
	},function(){
		$(this).removeClass('hover');
	});

});
</script>
<style type="text/css">
/* page styles */
body{font-family:"Segoe UI", Frutiger,Tahoma,Helvetica,"Helvetica Neue", Arial, sans-serif;font-size:62.5%;}
table{border-collapse:collapse;}
td, th{text-align:center;border:1px solid #ddd;padding:2px 5px;}
caption{margin:0 0 .5em;font-weight:bold;}
/*demo styles*/
table{width:500px;height:200px;margin-left:30px;}
td, th{font-size:1.2em;padding:2px;width:13%;}
th{background-color:#f4f4f4;} 
caption{font-size:1.5em;}
table{float:left;margin:40px 40px 0 0;}
.demo{width:500px;margin:0 auto;}
/* input */
td input{border:1px solid orange;background:yellow;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;position:absolute;padding:8px 0;text-align:center;width:60px;margin:-17px 0 0 4px;font-size:1.4em;}
td.input{ padding:0;position:relative;}
td.hover{background:#eee;}
</style>
</head>
<body>

<div class="demo">
	<table>
		<caption>2009年员工产品销售走势图</caption>
		<thead>
			<tr>
				<td></td>
				<th scope="col">food</th>
				<th scope="col">auto</th>
				<th scope="col">household</th>
				<th scope="col">furniture</th>
				<th scope="col">kitchen</th>
				<th scope="col">bath</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th scope="row">Mary</th>
				<td>190</td>
				<td>160</td>
				<td>40</td>
				<td>120</td>
				<td>30</td>
				<td>70</td>
			</tr>
			<tr>
				<th scope="row">Tom</th>
				<td>3</td>
				<td>40</td>
				<td>30</td>
				<td>45</td>
				<td>35</td>
				<td>49</td>
			</tr>
			<tr>
				<th scope="row">Brad</th>
				<td>10</td>
				<td>180</td>
				<td>10</td>
				<td>85</td>
				<td>25</td>
				<td>79</td>
			</tr>
			<tr>
				<th scope="row">Kate</th>
				<td>40</td>
				<td>80</td>
				<td>90</td>
				<td>25</td>
				<td>15</td>
				<td>119</td>
			</tr>		
		</tbody>
	</table>	
</div>

</body>
</html>

31、操作：jquery text文本框限制字数或文本框提示字数

1、效果及功能说明

text文本框限制文本框字数，当text文本框内文字字数超出限制字数时，自动提示文字，已超出限制文字字数

主要的方法

先定义好限制字数，然后获得在input里面输入的字数，在将限制的字数减去当前的数字就剩下还可以输入多少字数，在字数满了后在下面会显示出不能输入，要是还没满的话在下方就会显示还剩下多少字可以输入

主要的方法


var limitNum = 118;
//定义参数，可输入的字数

var pattern = '还可以输入' + limitNum + '字';
//定义参数还剩多少数字可以输入

$('#wordage').html(pattern);
//wordageID还剩余多少字的ID

if(remain > 118)
//当大于限制字数时

pattern = "字数超过118个限制，短信将以多条发送！";
//显示不能输入

var result = limitNum - remain;
//否则就是显示还可以输入多少字数

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/2878/2f65c886-ee7f-3c1c-b59e-96662839b138.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;text-decoration:none;}
/* Form */
.Form{margin:20px auto;width:600px;}
.Form textarea{
	display:inline-block;padding:6px 12px;font-size:18px;font-weight:300;line-height:1.4;color:#221919;background:#fff;border:1px solid #a4a2a2;resize:none;

	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-ms-box-sizing:border-box;
	-webkit-box-sizing:border-box;

	border-radius:6px;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;

	box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-moz-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);
	-webkit-box-shadow:inset 0 1px rgba(34,25,25,.15),0 1px rgba(255,255,255,.8);

	-webkit-transition:all .08s ease-in-out;
	-moz-transition:all .08s ease-in-out;
}
.Form textarea{min-height:90px;}
.Form textarea:focus{
	border-color:#006499;
	box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35);
	-moz-box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35);
	-webkit-box-shadow:0 1px rgba(34, 25, 25, 0.15) inset, 0 1px rgba(255, 255, 255, 0.8), 0 0 14px rgba(82, 162, 235, 0.35);
}
/* Button base */
.Button{
	position:relative;
	display:inline-block;
	padding:.45em .825em .45em;
	text-align:center;
	line-height:1em; 
	border:1px solid transparent;
	cursor:pointer; 

	border-radius:.3em; 
	-moz-border-radius:.3em; 
	-webkit-border-radius:.3em; 

	-moz-transition-property:color, -moz-box-shadow, text-shadow; 
	-moz-transition-duration:.05s; 
	-moz-transition-timing-function:ease-in-out; 
	-webkit-transition-property:color, -webkit-box-shadow, text-shadow; 
	-webkit-transition-duration:.05s; 
	-webkit-transition-timing-function:ease-in-out; 

	box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 
	-moz-box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35); 
	-webkit-box-shadow:0 1px rgba(255,255,255,0.8), inset 0 1px rgba(255,255,255,0.35);
}

.Button:hover {text-decoration:none;}
.Button strong {position:relative; z-index:2;}

.Button{
	display:block;border:1px solid;opacity:1;

	border-radius:.3em;
	-moz-border-radius:.3em;
	-webkit-border-radius:.3em;

	box-shadow:inset 0 1px rgba(255,255,255,0.35);
	-moz-box-shadow:inset 0 1px rgba(255,255,255,0.35);
	-webkit-box-shadow:inset 0 1px rgba(255,255,255,0.35);

	-moz-transition-property:opacity;
	-moz-transition-duration:0.5s;
	-moz-transition-timing-function:ease-in-out;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.5s;
	-webkit-transition-timing-function:ease-in-out;
}

.Button:hover span{
	-moz-transition-property:opacity;
	-moz-transition-duration:0.05s;
	-moz-transition-timing-function:linear;
	-webkit-transition-property:opacity;
	-webkit-transition-duration:0.05s;
	-webkit-transition-timing-function:linear;
}
.Button:active span{
	-moz-transition:none;
	-webkit-transition:none;
}

/* blue Button */
.blueButton{color:#fcf9f9; text-shadow:0 -1px rgba(34,25,25,0.5);}
.blueButton:hover {color:#fff; text-shadow:0 -1px rgba(34,25,25,0.3);}
.blueButton:active {color:#f2f0f0; text-shadow:0 -1px rgba(34,25,25,0.6);}

.blueButton{
	border-color:#015E91;
	background-color:#3693D5;
	background:-moz-linear-gradient(center top , #54B1EB, #47A0E0 50%, #419FE1 50%, #3683D5);
	background:-o-linear-gradient(top left, #54B1EB, #47A0E0 50%, #419FE1 50%, #3683D5);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#54B1EB), to(#47A0E0), color-stop(.5,#419FE1),color-stop(.5,#3683D5));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#54B1EB', endColorstr='#3683D5');
}

.blueButton:hover{
	border-color:#0366AD;
	background-color:#3EA1D6;
	background:-moz-linear-gradient(center top, #5EB4EA, #61A1EE 50%, #59A5EB 50%, #3691E6);
	background:-o-linear-gradient(top left, #5EB4EA, #61A1EE 50%, #59A5EB 50%, #3691E6);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#5EB4EA), to(#61A1EE), color-stop(.5,#59A5EB),color-stop(.5,#3691E6));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#5EB4EA', endColorstr='#3691E6');
}

.blueButton:active{
	border-color:#013B6A;
	background-color:#3089C8;
	background:-moz-linear-gradient(center top, #4B9CDD, #4189D5 50%, #3D8BD3 50%, #3093C8);
	background:-o-linear-gradient(top left, #4B9CDD, #4189D5 50%, #3D8BD3 50%, #3093C8);
	background:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#4B9CDD), to(#4189D5), color-stop(.5,#3D8BD3),color-stop(.5,#3093C8));
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#4B9CDD', endColorstr='#3093C8');
}

.blueButton.Button18:hover{
	box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25);
	-moz-box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25);
	-webkit-box-shadow:0 1px rgba(255, 255, 255, 0.8), 0 1px rgba(255, 255, 255, 0.35) inset, 0 0 10px rgba(82, 162, 235, 0.25);
}
.blueButton.Button18:active{
	box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35);
	-moz-box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35);
	-webkit-box-shadow:0 1px 2px rgba(34, 25, 25, 0.25) inset, 0 0 3px rgba(82, 202, 235, 0.35);	
}
/* wordage */
#wordage{text-align:right;font-size:14px;color:#5e5e5e;margin:10px 0 0 0;}
</style>

<form name="" id="" action="" class="Form">
	<textarea id="wordtext" style="width:600px;"></textarea>
	<div id="wordage"></div>
	<a style="color:#fff;float:left;font-size:18px;" href="#" class="Button blueButton Button18"><strong>注册登录</strong></a>
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){

	var limitNum = 118;

	var pattern = '还可以输入' + limitNum + '字';

	$('#wordage').html(pattern);

	$('#wordtext').keyup(
		function(){

			var remain = $(this).val().length;

			if(remain > 118){

				pattern = "字数超过118个限制，短信将以多条发送！";

			}else{

				var result = limitNum - remain;

				pattern = '还可以输入' + result + '字';

			}
			$('#wordage').html(pattern);

		}
	);

});	
</script>	
</body>
</html>

32、操作：jquery 分类搜索框带过滤器的搜索框

1、效果及功能说明

搜索框特效，制作一个jQuery分类搜索框，当鼠标点击搜索框时，会滑动展示分类菜单，点击选择/过滤分类菜单进行分类搜索

主要的方法

先是在输入框内当点击到input后在添加一个点击事件，展开选择框里面的多少可以打勾的buttom都定义一个事件，当打过勾就可以会的当前的值，在进行筛选，当鼠标离开展开框后，展开框的展开类被删除，展开框消失，和在input里面的箭头回复原状，当展开框出现的时候箭头是向上的，展开框出现后箭头是向下的

主要的方法


$ui.find('.searchtext').bind('focus click',function(){

			  $ui.find('.arrowDown').addClass('arrowUp').removeClass('arrowDown').andSelf().find('.dropdown').slideDown(500);
		});
// 对焦点上单击显示下拉列表中, 和更改的箭头图像	

$ui.bind('mouseleave',function(){
			$ui.find('.arrowUp').addClass('arrowDown').removeClass('arrowUp').andSelf().find('.dropdown').slideUp(500);
		});

//鼠标离开隐藏下拉，和更改的箭头图像

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/3266/7ce50987-3e31-397a-968c-1a28ec77d800.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clearfix{display:inline-table;}/* Hides from IE-mac \*/
*html .clearfix{height:1%;}
.clearfix{display:block;}/* End hide from IE-mac */
*+html .clearfix{min-height:1%;}
/* demo */
.demo{width:480px;margin:30px auto;}
.demo h2{font-size:16px;color:#3366cc;height:30px;}
/* searchinfo */
.searchinfo{position:relative;height:35px;}
.searchinfo li{float:left;position:relative;}
.searchinfo li .text,.searchinfo li .button{background:url(images/spis_031ddf34.png) no-repeat;}
.searchinfo li .text{width:356px;height:22px;padding:4px 7px;padding:6px 7px 2px\9;font:16px arial;border:1px solid #cdcdcd;border-color:#9a9a9a #cdcdcd #cdcdcd #9a9a9a;vertical-align:top;outline:none;margin:0 5px 0 0;}
.searchinfo li .button{width:95px;height:32px;padding:0;padding-top:2px\9;border:0;background-position:0 -35px;background-color:#ddd;cursor:pointer}
.searchinfo .arrowUp,.searchinfo .arrowDown{position:absolute;top:12px;left:10px;width:10px;height:9px;z-index:10;	}
.searchinfo .arrowUp{background:url(images/up.png) no-repeat;}
.searchinfo .arrowDown{background:url(images/down.png) no-repeat;}
/* dropdown */
.dropdown{width:360px;padding:6px 5px;border:solid 1px #ddd;background:#efefef;position:absolute;left:0;top:31px;}
.dropdown .tit_filter{width:348px;border:1px solid #f9f9f9;background:#ddd;font-size:14px;color:#000;height:24px;line-height:24px;padding:2px 5px;}
.dropdown li{float:left;width:175px;padding:0 0 0 5px;font-size:14px;line-height:32px;height:32px;}
.dropdown li label{cursor:pointer;}
</style>

</head>
<body>

	<div class="demo">
		<h2>搜索框过滤器演示</h2>
		<form action="" method="post" name="searchform" id="searchform" class="searchinfo">
			<ul class="clearfix">
				<li>
					<input type="text" name="keyword" value="" id="keyword" class="text searchtext" />
					<span class="arrowDown"></span>
				</li>
				<li><input type="submit" value="搜索" class="button searchbtn" /></li>
			</ul>
			<ul class="dropdown clearfix" style="display:none;">
				<li class="tit_filter">过滤搜索</li>
				<li><input type="checkbox" id="all"/><label for="all"><strong>所有分类</strong></label></li>
				<li><input type="checkbox" id="Automotive" /><label for="Automotive">汽车</label></li>
				<li><input type="checkbox" id="Baby" /><label for="Baby">婴儿</label></li>
				<li><input type="checkbox" id="Beauty" /><label for="Beauty">美女</label></li>
				<li><input type="checkbox" id="Books" /><label for="Books">书籍</label></li>
				<li><input type="checkbox" id="Cell" /><label for="Cell">手机</label></li>
				<li><input type="checkbox" id="Cloth" /><label for="Cloth">服装</label></li>
				<li><input type="checkbox" id="Electronics" /><label for="Electronics">电子产品</label></li>
				<li><input type="checkbox" id="Gourmet" /><label for="Gourmet">美食</label></li>
				<li><input type="checkbox" id="Health" /><label for="Health">保健</label></li>
				<li><input type="checkbox" id="Home" /><label for="Home">家居与园艺</label></li>
				<li><input type="checkbox" id="Industrial" /><label for="Industrial">产业</label></li>
				<li><input type="checkbox" id="Jewelry" /><label for="Jewelry">首饰</label></li>
				<li><input type="checkbox" id="Magazines" /><label for="Magazines">杂志</label></li>
			</ul>
		</form>
	</div>

	<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript">
	$(function() {
		var $ui = $('#searchform');				
		$ui.find('.searchtext').bind('focus click',function(){
			  $ui.find('.arrowDown').addClass('arrowUp').removeClass('arrowDown').andSelf().find('.dropdown').slideDown(500);
		});	
		$ui.bind('mouseleave',function(){

		$ui.find('.arrowUp').addClass('arrowDown').removeClass('arrowUp').andSelf().find('.dropdown').slideUp(500);

		});
		$ui.find('.dropdown').find('label[for="all"]').prev().bind('click',function(){
$(this).parent().siblings().find(':checkbox').attr('checked',this.checked).attr('disabled',this.checked);

		});

	});
	</script>	

</body>
</html>

33、操作：jquery 倒计时设置几天、小时、分钟、秒等属性只需修改到期时间

1、效果及功能说明

通过对时间的控制来告诉用户一个活动还剩多少时间，精确到秒

主要的方法

首先定义活动的截至的时间，要重年份精确到毫秒，在获得当前的年份到秒钟，在用截至时间，减去现在的时间，剩下的还有多少的时间就把还剩下的时间给显示出来就得出了离截止日期还有多久。

主要的方法


var startTime = new Date();
//获得当前的时间

startTime.setFullYear(2016, 5, 27);
//调用设置年份
startTime.setHours(23);
//调用设置指定的时间的小时字段
startTime.setMinutes(59);
//调用设置指定时间的分钟字段
startTime.setSeconds(59);
//调用设置指定时间的秒钟字段
startTime.setMilliseconds(999);
//调用置指定时间的毫秒字段
var EndTime=startTime.getTime();
//获得截至的时间

var nMS = EndTime - NowTime.getTime();
//截至时间减去当前时间获得剩余时间


var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
//定义参数 获得天数
var nH = Math.floor(nMS/(1000*60*60)) % 24;
//定义参数 获得小时
var nM = Math.floor(nMS/(1000*60)) % 60;
//定义参数 获得分钟
var nS = Math.floor(nMS/1000) % 60;
//定义参数 获得秒钟 这些就是当前时间

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/3766/f5361cff-f9c9-3e17-b9ff-df5f76b6cb0f.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180%;background:#fff;}
.timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}
.timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:"微软雅黑","宋体";}
.timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}
#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}
</style>
</head>

<body>

	<div class="timerbg">
		<div id="daoend" style="display:none;">本次活动已结束。</div>
		<div id="dao"><strong id="RemainD"></strong>天<strong id="RemainH"></strong>时<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒</div>
	</div>

	<script type="text/javascript">
	var startTime = new Date();

	startTime.setFullYear(2016, 5, 27);
	//调用设置年份
	startTime.setHours(23);

	startTime.setMinutes(59);

	startTime.setSeconds(59);

	startTime.setMilliseconds(999);

	var EndTime=startTime.getTime();

	function GetRTime(){

		var NowTime = new Date();

		var nMS = EndTime - NowTime.getTime();

		var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));

		var nH = Math.floor(nMS/(1000*60*60)) % 24;

		var nM = Math.floor(nMS/(1000*60)) % 60;

		var nS = Math.floor(nMS/1000) % 60;

		if (nMS < 0){

			$("#dao").hide();

			$("#daoend").show();

		}else{

		   $("#dao").show();

		   $("#daoend").hide();

		   $("#RemainD").text(nD);

		   $("#RemainH").text(nH);

		   $("#RemainM").text(nM);

		   $("#RemainS").text(nS); 

		}
	}

	$(document).ready(function () {

		var timer_rt = window.setInterval("GetRTime()", 1000);

	});
	</script>

</body>
</html>

34、操作：jquery 竖直手风琴菜单收缩展示下拉菜单

1、效果及功能说明

框架制作两种非常简单的jquery手风琴菜单特效，鼠标滑过手风琴与鼠标点击触发手风琴

主要的方法

手风琴的效果一个是点击事件的效果一个触碰效果，都是当点击获得触碰触发添加一个让得显示的类后获得一个滑动效果让子类出现，当再次点击获得点击其他，和触及消失获得触及其他后当前的就会自动滑动消失，在删除掉展示的类

主要的方法


$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
//添加类，后查询每一个元素的下一个元素div.menu_body开展然后定义一个滑动效果里面包含显示和隐藏，在查询当前里面包裹的其他元素，让他们全部通过滑动效果隐藏起来

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/4280/8db497b8-eb80-3f74-8ced-7a7d2eb979f3.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){


	$("#firstpane .menu_body:eq(0)").show();

	$("#firstpane p.menu_head").click(function(){


	$(this).addClass("current").next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");

		$(this).siblings().removeClass("current");

	});


	$("#secondpane .menu_body:eq(0)").show();

	$("#secondpane p.menu_head").mouseover(function(){

		$(this).addClass("current").next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");

		$(this).siblings().removeClass("current");

	});

});
</script>
<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
body{margin:10px auto;font:75%/120% Verdana,Arial, Helvetica, sans-serif;}
.demo{width:400px;margin:0 auto;}
.demo h2{font-size:14px;height:24px;line-height:24px;margin:30px 0 10px 0;padding:0 10px;}
.menu_head{padding:5px 10px;cursor:pointer;position:relative;margin:1px;font-weight:bold;background:#eef4d3 url(images/left.png) center right no-repeat;}
.menu_list .current{background:#eef4d3 url(images/down.png) center right no-repeat;}
.menu_body{display:none;}
.menu_body a{display:block;color:#006699;background-color:#EFEFEF;padding-left:10px;font-weight:bold;text-decoration:none;height:24px;line-height:24px;}
.menu_body a:hover{color:#000000;text-decoration:underline;}
</style>
</head>
<body>

	<div class="demo">

		<h2>点击触发事件</h2>
		<div id="firstpane" class="menu_list">
			<p class="menu_head current">jquery图片特效</p>
			<div class="menu_body">
				<a href="http://www.17sucai.com/" target="_blank" title="jquery图片切换">jquery图片切换</a>
				<a href="http://www.17sucai.com/" target="_blank" title="jquery幻灯片">jquery幻灯片</a>
				<a href="http://www.17sucai.com/" target="_blank" title="jquery图片放大镜">jquery图片放大镜</a>
			</div>

			<p class="menu_head">jquery导航菜单</p>
			<div class="menu_body">
				<a href="http://www.17sucai.com/" target="_blank" title="jquery动画菜单">jquery动画菜单</a>
				<a href="http://www.17sucai.com/" target="_blank" title="jquery树形菜单">jquery树形菜单</a>
				<a href="http://www.17sucai.com/" target="_blank" title="jquery下拉菜单">jquery下拉菜单</a>
			</div>

			<p class="menu_head">jquery选项卡特效</p>
			<div class="menu_body">
				<a href="http://www.17sucai.com/" target="_blank" title="jquery选项卡切换">jquery选项卡切换</a>
				<a href="http://www.17sucai.com/" target="_blank" title="jquery滑动选项卡">jquery滑动选项卡</a>
				<a href="http://www.17sucai.com/" target="_blank" title="jquery更多特效">jquery更多特效</a>		
			</div>
		</div><!--firstpane end-->


		<h2>滑过触发事件</h2>
		<div id="secondpane" class="menu_list">
			<p class="menu_head current">js图片特效</p>
			<div class="menu_body">
				<a href="http://www.17sucai.com/" target="_blank" title="js图片切换">js图片切换</a>
				<a href="http://www.17sucai.com/" target="_blank" title="js幻灯片">js幻灯片</a>
				<a href="http://www.17sucai.com/" target="_blank" title="js图片放大镜">js图片放大镜</a>
			</div>

			<p class="menu_head">js导航菜单</p>
			<div class="menu_body">
				<a href="http://www.17sucai.com/" target="_blank" title="js动画菜单">js动画菜单</a>
				<a href="http://www.17sucai.com/" target="_blank" title="js树形菜单">js树形菜单</a>
				<a href="http://www.17sucai.com/" target="_blank" title="js下拉菜单">js下拉菜单</a>
			</div>

			<p class="menu_head">js选项卡特效</p>
			<div class="menu_body">
				<a href="http://www.17sucai.com/" target="_blank" title="js选项卡切换">js选项卡切换</a>
				<a href="http://www.17sucai.com/" target="_blank" title="js滑动选项卡">js滑动选项卡</a>
				<a href="http://www.17sucai.com/" target="_blank" title="js更多特效">js更多特效</a>		
			</div>
		</div><!--secondpane end-->

	</div><!--demo end-->

</body>
</html>

35、操作：jquery 侧栏与工具提示

1、效果及功能说明

当鼠标触及到标题就会触发一个侧显示框来告诉基础信息

主要的方法

主要是靠伪类来触发效果，当提示框从左边出来，让后显示出上面的信息，获得一个定义好的类来修改上面的字体等信息，当鼠标离开后自动回去，并且删除类，当鼠标触及到时多有动画停止，确保了不会有重复的出现

主要的方法


$(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css("display","block");

$(this).find(">a").addClass("current");
//当提示框从左边出来，和添加类来修改提示框内部的信息样式

$(this).find("div").stop().animate({left: "0", opacity: 0}, "fast");

$(this).find(">a").removeClass("current");
//当鼠标离开后回收提示框，并且消除掉类较少页面的负担

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/5018/2ee02437-d3f0-3e1c-83f9-a662fa54f651.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){

	$("ul.sidenav li").hover(function() {

		$(this).find("div").stop().animate({left: "210", opacity:1}, "fast").css("display","block");

		$(this).find(">a").addClass("current");

	},function(){

		$(this).find("div").stop().animate({left: "0", opacity: 0}, "fast");

		$(this).find(">a").removeClass("current");
	});

});
</script>
<style type="text/css">
*{margin:0;padding:0;}
body{background:#005094;font:12px Verdana, Arial, Helvetica, sans-serif;}
a:focus{outline:none;}
.demopage{margin:0 auto;width:900px;background:#005094;overflow:hidden;padding:20px;}
/* sidenav */
ul.sidenav{float:left;margin:130px 0 0;padding:0;width:200px;list-style:none;border-bottom:1px solid #3373a9;border-top:1px solid #003867;font-size:1.2em;}
ul.sidenav li{position:relative;float:left;margin:0;padding:0;}
ul.sidenav li a{border-top:1px solid #3373a9;border-bottom:1px solid #003867;padding:10px 10px 10px 25px;display:block;color:#fff;text-decoration:none;width:165px;background:#005094 url(images/sidenav_li_a.gif) no-repeat 5px 10px;position:relative;z-index:2;}
ul.sidenav li a:hover,ul.sidenav li a.current{background-color:#004c8d;border-top:1px solid #1a4c76;}
ul.sidenav li div{display:none;position:absolute;top:2px;left:0;width:225px;font-size:12px;background:url(images/bubble_top.gif) no-repeat right top;}
ul.sidenav li div p{margin:7px 0;line-height:1.6em;padding:0 5px 10px 30px;background:url(images/bubble_btm.gif) no-repeat right bottom;}
</style>

</head>

<body>

	<div class="demopage">

		<ul class="sidenav">
			<li>
				<a href="http://www.17sucai.com/">首页</a>
				<div><p>Go home!</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">关于我们</a>
				<div><p>知道我们的团队！</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">投资组合</a>
				<div><p>要看到我们在实验室工作吗？快来看看我们的特色工作！</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">博客</a>
				<div><p>每周更新，教程和资源。</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">见证</a>
				<div><p>看看其他客户对我们说。</p></div>
			</li>
			<li>
				<a href="http://www.17sucai.com/">联系</a>
				<div><p>打我们电话吧！</p></div>
			</li>
		</ul>

	</div>

</body>
</html>

36、操作：jquery animate分页标签按钮鼠标悬停滑动展开分页按钮

1、效果及功能说明

animate动画分页按钮制作鼠标悬停分页按钮上滑动展开分页按钮，鼠标离开后分页按钮收缩

主要的方法

主要是靠动画方法，来让原本的箭头图像的长度发生变长，正好可以融入下标题的文字大小，当鼠标离开以后就会让箭头图像触发另一个动画效果让让标题消失和长度变回原来的大小。

主要的方法


$(this).animate({width:90},400,function(){
//定义当前动画让长度通过动画变成90长度在0.4秒完成
$(this).children(".title").css("display","block");
//让标题文字显示出来

$(this).children(".title").css("display","none");
//定义标题文字消失
$(this).animate({width:20},400);
//定义箭头图像回到原来的长度

3、效果图

[img]http://dl2.iteye.com/upload/attachment/0087/6519/b0d03f26-c84a-3fe8-afe0-0ec0b6e036c1.jpg[/img]

4、运行环境

IE6 IE7 IE8及以上 Firefox 和 Google Chrome游览器下都可实现

5、代码[html5]


<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}
/* next prev btn*/
.npbtn{padding:10px 30px 20px 30px;height:60px;width:300px;margin:20px auto;}
.disable{background:#EBEBEB;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;}
.prev{float:left;}
.next{float:right;}
.next,.prev{padding:0 20px 0 0;height:40px;background-position:right -348px;position:relative;text-shadow:0 1px transparent}
.next .title{padding:11px 38px 0 0;right:0;}
.prev .title{padding:11px 26px 0 0;right:0;}
.cap{width:20px;height:40px;display:block;background-position:left -282px;}
.title{display:none;position:absolute;top:0;color:#fff;font-size:16px;}
.arrow{width:40px;height:40px;position:absolute;top:0;background:url(http://www.17sucai.com/static/images/arrow-left-right.png) no-repeat;}
.prev .arrow{left:0;background-position:0px 0px;}
.next .arrow{right:0;background-position:0px -40px;}
.active{
	background-color:#3F9CDE;
	border-radius:30px;
	-moz-border-radius:30px;
	-webkit-border-radius:30px;
}
.active a{display:block;}
.active a:hover{text-decoration:none;}
</style>


<div class="npbtn">
	<div class="prev active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></a></div>
	<div class="next active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></a></div>
</div>

<div class="npbtn">
	<div class="prev disable"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></div>
	<div class="next active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></a></div>
</div>

<div class="npbtn">
	<div class="prev active"><a href="http://www.17sucai.com/"><span class="cap"></span><span class="arrow"></span><span class="title">上一页</span></a></div>
	<div class="next disable"><span class="cap"></span><span class="arrow"></span><span class="title">下一页</span></div>
</div>

<script type="text/javascript" src="http://www.jsfoot.com/skin/js/jquery.js"></script>
<script type="text/javascript">
$(function(){
	$(".active a").each(function(){	
		$(this).hover(function(){
			$(this).css("cursor","pointer");
			$(this).stop();
			$(this).animate({width:90},400,function(){
				$(this).children(".title").css("display","block");
			})
		},function(){
			$(this).stop();	
			$(this).children(".title").css("display","none");
			$(this).animate({width:20},400);
		})
	})
});
</script>

</body>
</html>

xjwolaile

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[JS代码库]

所有图片的压缩包新建一个文件后将包解压放进文件夹图片的压缩包在页面的最下方可以看到并下载下载后无需修改文件夹名因为本身就已经写好了和html5内的路径相吻合所有的图片下面都可以找到将创建html文件保存的时候将编码类型换成(UTF-8有签名)这样可以让部分中文正常的显示出来，将保存类型(T)换成(所有文件(*.*))，将html5和解压后的图片文件夹放在同一个文件夹内效果[java...
复制链接

扫一扫