中等第封装类sGallery,jQuery应用助网址走向高上海

2019-11-28 03:39栏目:网络时代
TAG:

  帮客之家(www.Bkjia.com)教程 基于jQuery的幻灯插件:中等级封装类sGallery 1.0,非常漂亮,欢迎大家学习和转载,请注意保留作者的博客地址,尊重作者劳动成果!

在WEB3.0的时代,我们的网站不仅要实现实用价值,更要为用户设计优秀的用户体验。jQuery是一个不错的JS框架,结合目前最新的HTML5技术,我们可以将自己的网站脱胎换骨,立马走向高上大,至少在前端页面上。

所有参数:

$(obj).sGallery({
    thumbObj:null, //导航对象,默认为空
    botLast:null, //按钮上一个,默认为空
    botNext:null, //按钮下一个。默认为空
    thumbNowClass:'now', //导航对象当前的class,默认为now
    slideTime:1000, //对象平滑过渡持续时间,默认为1000ms
    autoChange:true, //是否自动切换,默认为true
    changeTime:5000, //对象自动切换时间,默认为5000ms,即5秒
    delayTime:300 //鼠标经过时反应的延迟时间,推荐值为300ms
});

以上为此插件所有参数,从前端开发角度出发,充分利用css样式的灵活性,脚本调用方式简单,
基本满足了现在常见开发中遇到的平滑过渡效果,具体实际应用及代码参考以下的例子。

注:此插件大小为3k(min版为2k),兼容全部主流浏览器,
图片右上方的小箭头图标考虑美观用了透明的png图片,在ie6下不透明,此和样式有关,请详知。

1、HTML5仿Chrome样式控制滑杆动画

随着浏览器技术的发展,滑杆控制器在网页上应用越来越广泛。今天要分享一款HTML5的滑杆控制器,这个滑杆动画是放Chrome样式的,不仅外观非常漂亮,而且在数据初始化的时候还带有滑动动画特效,我们可以将此插件应用在数据更新、投票等系统中去。

图片 1

在线演示        源码下载

<!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-Language" content="zh-CN" />
<title>基于jQuery的幻灯插件:中等级封装类sGallery 1.0 - bkjia.com</title>
<link rel="stylesheet" type="text/css" media="all" href="" />
<script type="text/javascript" src="/uploads/Common/jquery-1.3.2.min.js"></script>
<script src="/uploads/Common/jquery.sGallery-min.js" type="text/javascript"></script>
<style>
/* base yui reset.css, repair by haven long 090925*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;}table{border-collapse:collapse;border-spacing:0;}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}ins{text-decoration:none;}del{text-decoration:line-through;}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}.clear{height:0;font-size:0;line-height:0;clear:both;}
html{color:#000;background:#fff;}
body{
font-size:0.75em;
background:#fff;
font-family:Verdana, Tahoma,Arial,Helvetica, sans-serif;
text-align:center;
color:#444;
}
a{
text-decoration:none;
color:#444;
}
a:hover{color:#B70000;}
/* end of reset.css */
/*all base*/
#wrapper{
position:relative;
width:990px;
margin:0 auto;
text-align:left;
overflow:hidden;}
h1{font-size:1.17em;text-align:center; margin:20px; }
h1 .strong{color:#CC0000;margin-left:3px;font-size:1.3em;}
.allIntro{
border:1px solid #ccc;
margin:10px 0;
padding:15px;
background:#eee;
line-height:1.7em; }
.p_other{
font-size:1.17em;
margin:20px 0 10px; }
.p_author{
font-size:1.17em;
text-align:right;
margin:0 10px 10px; }
.p_author a{
color:#cc0000;
text-decoration:underline; }
.p_author a:hover{text-decoration:none;}
.eachBox{
overflow:hidden;
clear:both;
padding:15px 0; }
.introArea{
float:left;
margin-left:20px;
display:inline;
width:300px;
line-height:1.7em; }
.introArea h2{
font-size:1.17em;
padding:5px 0 10px;
color:#CC0000;}
.green{color:green;}
.blue,code{
font-size:1em;
color:blue;
font-family:Verdana;}
/* scrollBox_a1 */
.scrollBox_a1{
float:left;
width:650px;height:250px;
padding:2px;
position:relative;
border:1px solid #aaa; }
.scrollBox_a1 .a_bigImg img{
position:absolute;
top:2px;left:2px;
display:none;}
.changeDiv{
position:absolute;
top:2px;left:2px;
display:none;}
.changeDiv h3{
position:absolute;
left:0px;bottom:0;
width:650px;
height:30px;line-height:30px;
background:#fff;
filter:alpha(opacity=70);
opacity:0.7;}
.changeDiv h3 a{
display:block;
padding-left:15px;
color:#FF6600;}
/* ul_scroll_a1 */
.ul_scroll_a1{
position:absolute;
right:1px; bottom:6px;
padding-left:19px;
overflow:hidden;}
.ul_scroll_a1 li{
float:left;
margin-right:7px; }
.ul_scroll_a1 img{ border:1px solid #ddd;}
.ul_scroll_a1 img.now{border:1px solid #FF6600;}
.a_last,.a_next{
position:absolute;
top:10px;
width:16px;height:16px;
background:url(/uploads/Common/images/bot.png) no-repeat;
text-indent:-999em;overflow:hidden;}
.a_last{right:30px;background-position:0 0;}
.a_next{right:12px;background-position:100% 0;}
/* ul_scroll_a2 */
.ul_scroll_a2{
position:absolute;
right:5px; bottom:7px;
padding-left:19px;
overflow:hidden;
}
.ul_scroll_a2 li{
display: -moz-inline-stack;
display:inline-block;
*display:inline;
*zoom:1;}
.ul_scroll_a2 span{
display: -moz-inline-stack;
display:inline-block;
*display:inline;
*zoom:1;
font-size:0.8em;
padding:0px 3px;
margin-right:2px;
border:1px solid #999;
background:#fff;
filter:alpha(opacity=85);
opacity:0.85;
cursor:hand;
cursor:pointer;
}
.ul_scroll_a2 span.on{
border:1px solid #CC0000;
background:#FFFF9D;
color:#CC0000;}
</style>
</head>
<body>
<div id="wrapper">
<b>如不能正常显示,请按F5刷新!</b>
<!-- 1 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_1">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="图片 2" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="图片 3" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="图片 4" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="图片 5" /></a>
</div>
<div class="introArea">
<h2>//默认最简易模式</h2>
<p class="p_code"><code>$('#scroll_1 .a_bigImg img').sGallery();</code></p>
<p class="green">
//最简易模式不带任何参数,即直接切换选择器选择的对象组,所有参数为默认:隔5秒自动切换,图片过渡效果持续1秒 <br /> <br />
//源对象为自动切换的一个数组,即其本身,非其父包装元素 <br />
//如要切换图片本身就以图片组为对象,<br />
//如要切换层就以层组为对象</p>
</div>
</div>
<!-- 2 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_2">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="图片 6" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="图片 7" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="图片 8" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="图片 9" /></a>
<a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
</div>
<div class="introArea">
<h2>//带前后按钮</h2>
<p class="p_code">
<code>$('#scroll_2 .a_bigImg img').sGallery({
botLast:'#scroll_2 .a_last', // 按钮,上一个 <br />
botNext:'#scroll_2 .a_next' // 按钮,下一个 <br />
});</code></p>
</div>
</div>
<!-- 3 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_3">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="图片 10" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="图片 11" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="图片 12" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="图片 13" /></a>
<ul class="ul_scroll_a2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="introArea">
<h2>//使用数字导航切换及自定义当前状态数字的class</h2>
<p class="p_code">
<code>$('#scroll_3 .a_bigImg img').sGallery({
thumbObj:'#scroll_3 .ul_scroll_a2 span', <br />//导航为数字形式,选择器指向包含数字的span对象 <br />
thumbNowClass:'on', <br />//自定义导航对象当前class为on <br />
changeTime:4000//自定义切换时间为4000ms <br />
});</code></p>
</div>
</div>
<!-- 32 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_32">
<div class="changeDiv">
<h3><a href="#">图片111111111说明文字,文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#1"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="图片 14" /></a></div>
<div class="changeDiv">
<h3><a href="#">图片222222222说明文字,文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#2"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="图片 15" /></a></div>
<div class="changeDiv">
<h3><a href="#">图片333333333说明文字,文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#3"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="图片 16" /></a></div>
<div  class="changeDiv">
<h3><a href="#">图片444444444说明文字,文字标题都绝对定位在div.changeDiv这个层内</a></h3>
<a href="#4"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="图片 17" /></a></div>
<ul class="ul_scroll_a2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<div class="introArea">
<h2>//切换对象为其他,这里为包含图片和标题的层</h2>
<p class="p_code">
<code>$('#scroll_32 div.changeDiv').sGallery({<br />对象指向层,层内包含图片及标题<br />
thumbObj:'#scroll_32 .ul_scroll_a2 span', <br />
thumbNowClass:'on', <br />
});</code></p>
</div>
</div>
<!-- 4 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_4">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="图片 18" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="图片 19" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="图片 20" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="图片 21" /></a>
<a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
<ul class="ul_scroll_a1">
<li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="图片 22" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="图片 23" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="图片 24" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="图片 25" /></a></li>
</ul>
</div>
<div class="introArea">
<h2>//带导航图标及按钮</h2>
<p class="p_code">
<code>$('#scroll_4 .a_bigImg img').sGallery({
thumbObj:'#scroll_4 .ul_scroll_a1 img', <br />//导航图标,选择器直接指向图标对象 <br />
botLast:'#scroll_4 .a_last', <br />
botNext:'#scroll_4 .a_next'<br />
});</code></p>
</div>
</div>
<!-- 5 -->
<div class="eachBox">
<div class="scrollBox_a1" id="scroll_5">
<a href="#1" class="a_bigImg"><img src="/uploads/Common/images/1.jpg" width="650" height="250" alt="图片 26" /></a>
<a href="#2" class="a_bigImg"><img src="/uploads/Common/images/2.jpg" width="650" height="250" alt="图片 27" /></a>
<a href="#3" class="a_bigImg"><img src="/uploads/Common/images/3.jpg" width="650" height="250" alt="图片 28" /></a>
<a href="#4" class="a_bigImg"><img src="/uploads/Common/images/4.jpg" width="650" height="250" alt="图片 29" /></a>
<a href="#" class="a_last" title="上一个">上一个</a><a href="#" class="a_next" title="下一个">下一个</a>
<ul class="ul_scroll_a1">
<li><a href="#"><img src="/uploads/Common/images/1_s.jpg" width="67" height="40" alt="图片 30" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/2_s.jpg" width="67" height="40" alt="图片 31" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/3_s.jpg" width="67" height="40" alt="图片 32" /></a></li>
<li><a href="#"><img src="/uploads/Common/images/4_s.jpg" width="67" height="40" alt="图片 33" /></a></li>
</ul>
</div>
<div class="introArea">
<h2>//不自动切换</h2>
<p class="p_code">
<code>$('#scroll_5 .a_bigImg img').sGallery({
thumbObj:'#scroll_5 .ul_scroll_a1 img', <br />//导航图标,选择器直接指向图标对象<br />
botLast:'#scroll_5 .a_last', <br />
botNext:'#scroll_5 .a_next', <br />
autoChange:false //自动切换为 false,默认为true  <br />
});</code></p>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
//源对象为自动切换的一个数组,即其本身,非其父包装元素
//如要切换图片本身就以图片组为对象,
//如要切换层就以层组为对象
//默认最简易模式
$('#scroll_1 .a_bigImg img').sGallery();
//带前后按钮
$('#scroll_2 .a_bigImg img').sGallery({
botLast:'#scroll_2 .a_last',//按钮,上一个
botNext:'#scroll_2 .a_next'//按钮,下一个
});
//数字导航切换及自定义当前数字的class
$('#scroll_3 .a_bigImg img').sGallery({
thumbObj:'#scroll_3 .ul_scroll_a2 span',
thumbNowClass:'on',//自定义导航对象当前class为on
changeTime:4000//自定义切换时间为4000ms
});
//切换对象为其他,这里为包含图片和标题的层
$('#scroll_32 div.changeDiv').sGallery({//对象指向层,层内包含图片及标题
thumbObj:'#scroll_32 .ul_scroll_a2 span',
thumbNowClass:'on'//自定义导航对象当前class为on
});
//带导航图标及按钮
$('#scroll_4 .a_bigImg img').sGallery({
thumbObj:'#scroll_4 .ul_scroll_a1 img',//导航图标
botLast:'#scroll_4 .a_last',
botNext:'#scroll_4 .a_next'
});
//不自动切换
$('#scroll_5 .a_bigImg img').sGallery({
thumbObj:'#scroll_5 .ul_scroll_a1 img',
botLast:'#scroll_5 .a_last',
botNext:'#scroll_5 .a_next',
autoChange:false//自动切换为 false,默认为true
});
});
</script>
</body>
</html><br /><center>如不能显示效果,请按Ctrl+F5刷新本页,更多网页代码:<a href='http://www.bkjia.com/' target='_blank'>http://www.bkjia.com/</a></center>

2、HTML5 SVG Tab滑块菜单 非常酷的Tab菜单

之前我们分享过很多HTML5/CSS3菜单,应该说大部分都还比较实用华丽,今天我们要来分享另外一种形式的HTML5菜单——HTML5 Tab菜单。这款Tab菜单是利用HTML5和SVG实现的,Tab菜单的外观非常漂亮,而且Tab切换也很方便。

图片 34

在线演示        源码下载

提示:可修改后代码再运行!

3、jquery视差滑块幻灯特效

非常酷的一款jQuery全屏焦点图插件,图很美。

图片 35

在线演示        源码下载

  作者:不羁虫

4、HTML5像素文字爆炸重组动画特效

HTML5可以把文字效果做得非常酷,就像之前分享的HTML5/CSS3发光文字和HTML5/CSS3文字投影特效就非常绚丽。今天我们要分享一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看起来非常棒。

图片 36

在线演示        源码下载

基于jQuery的幻灯插件:中等级封装类sGallery 1.0,非常漂亮,欢迎大家学习和转载,请注意保留作者的博客地址,尊重作...

5、HTML5/CSS3超酷焦点图特效 带前后翻页按钮

今天要分享的这款HTML5/CSS3焦点图插件切换效果比较简单,但是外观和功能却十分强大。该CSS3焦点图在切换图片时,图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮,是一款非常实用HTML5/CSS3焦点图应用。

图片 37

在线演示        源码下载

6、HTML5+CSS3实现注册登录窗体

图片 38

在线演示        源码下载

7、HTML5/CSS3自定义下拉框 3D卡片折叠动画

之前我们分享过一款CSS3带小图标下拉菜单,它更多的是一款菜单,但是今天要分享的一款CSS3自定义下拉框取代了传统的Select样式,用不一样的风格来让select更加美观。这款CSS3下拉框还有3D立体的卡片折叠动画效果,非常酷。

图片 39

在线演示        源码下载

8、HTML5/CSS3淡入淡出滑块焦点图 非常清新

我们已经分享过几款简单的CSS3/jQuery焦点图插件,像HTML5结合jQuery实现图片滑块特效、CSS3/jQuery全屏立体焦点图等,大家可以到焦点图栏目下查找。今天要分享的这款焦点图切换时有淡如淡出的动画效果,是利用HTML5和CSS3实现。

图片 40

在线演示        源码下载

以上就是8款HTML5/jQuery应用,欢迎收藏分享,转载请注明原文。

本文由html5tricks收集整理,转载请务必保留原文链接

版权声明:本文由澳门新葡亰平台游戏发布于网络时代,转载请注明出处:中等第封装类sGallery,jQuery应用助网址走向高上海