经验分享程序开发文档资料数据资源其它资源

jquery百度经验信息浏览效果滑动滚动特效代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery百度经验信息浏览效果滑动滚动特效代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

jquery百度经验信息浏览效果滑动滚动特效代码

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery百度经验信息浏览效果代码</title>
<link rel="stylesheet" type="text/css" href="css/rent.css" />
<script src="script/jquery-2.0.3.js"></script>
<script src="script/rent.js"></script>
</head>

<body>
<!-- 这里是头 -->
<div id="header" style="min-width:1000px;">
	<div class="top_left">
    	<a href="javascript:void(0)" onClick="history.back()" class="back"></a>
    </div>
    <div class="top_title">
    	<p>公租房申请须知</p>
    </div>
	<div class="top_right">
    	<ul>
            <li>
	            <a href="javascript:;" class="vote">
                	<b class="num">15</b>
                    <b class="hover-tip">投票</b>
                    <b class="tip">已投票</b>
                </a>
            </li>
            <li>
	            <a href="javascript:;" class="favor">
                	<b class="num">64</b>
                    <b class="hover-tip">收藏</b>
                    <b class="tip">已收藏</b>
                </a>
            </li>
        </ul>
    </div>
</div>
<div class="clear_float"></div>

<!-- 这里是内容 -->
<div id="content" showId="0">
    <strong class="sl">&lt;</strong>
    <strong class="sr">&gt;</strong>
    <span class="left"></span>
    <span class="right"></span>
	<ul>
    <li class="cont_1">   	<!-- 每一个li代表一个页面 --> 	
    <!-- 这里是内容左边 -->	
        <div class="cont_left"> 
           <div class="user_pig"><div class="user_name">公租房申请要求：</div></div>      
        </div>
    <!-- 这里是内容右边 -->	        
        <div class="cont_right">         
        </div>
    </li>
    <li class="cont_2">
    	<div class="cont_left"> 
           <div class="user_pig"><div class="user_name">公租房准备材料：</div></div>      
        </div>
        <div class="cont_right">
        	<div class="cont_word">
				<p>1、《长沙市公共租赁住房申请表》;</p>

                <p>2、身份证、户口簿或居住证复印件;</p>
                
                <p>3、婚姻证明复印件，以及户口或工作单位所在地民政部门出具的中等偏下收入证明;</p>
                
                <p>4、市住房行政管理部门出具的住房状况证明;</p>
                
                <p>5、其他需要提供的材料。</p>
            	<span class="left_quote"></span>
	            <span class="right_quote"></span>
            </div>            
        </div>
    </li>
    <li class="cont_3">
    	<div class="cont_left"> 
           <div class="user_pig"><div class="user_name">公租房准备材料：</div></div>      
        </div>
        <div class="cont_right">
        	<div class="cont_word">
				<p>1、《长沙市公共租赁住房申请表》;</p>

                <p>2、身份证、户口簿或居住证复印件;</p>
                
                <p>3、婚姻证明复印件，以及户口或工作单位所在地民政部门出具的中等偏下收入证明;</p>
                
                <p>4、市住房行政管理部门出具的住房状况证明;</p>
                
                <p>5、其他需要提供的材料。</p>
            	<span class="left_quote"></span>
	            <span class="right_quote"></span>
            </div>            
        </div>
    </li>
    </ul>
</div>
<!-- 分页尾 -->
<div id="footer">
	<ul>
    	<li step="0"><a class="active" href="#">首</a></li>
        <li step="last"><a href="#">尾</a></li>
    </ul>
</div>
</body>
</html>

JS代码(rent.js):

// JavaScript Document$(function(){
	wordStrong();
	$("#content ul").width($("#content ul li:first").width()*$("#content ul li").length);
	$("#header .top_right .vote").hover(function(){
	$(this).children(".hover-tip").css("display","block");
	$(this).children(".num").css("display","none");
}
,function(){
	$(this).children(".hover-tip").css("display","none");
	$(this).children(".num").css("display","block");
}
);
	$("#content .left,#content .right").width(($(document).width()-$("#content").width())/4);
	$("#content .left").css("left",-$("#content .left").width());
	$("#content .right").css("right",-$("#content .right").width());
	var showId = 0;
	$("#content span.left").hover(function(){
	if ( checkFirst() ) return;
	$(this).css("cursor","pointer");
	$(this).siblings(".sl").stop().animate({
	opacity:0.5}
);
}
,function(){
	$(this).siblings(".sl").stop().animate({
	opacity:0}
);
}
).click(function(){
	if ( checkFirst() ) return;
	showId --;
	$("#content").attr("showId",showId);
	$("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");
	center(showId);
}
);
	$("#content span.right").hover(function(){
	if ( checkLast() )return;
	$(this).css("cursor","pointer");
	$(this).siblings(".sr").stop().animate({
	opacity:0.5}
);
}
,function(){
	$(this).siblings(".sr").stop().animate({
	opacity:0}
);
}
).click(function(){
	if ( checkLast() )return;
	showId ++;
	$("#content").attr("showId",showId);
	$("#footer li").children().removeClass("active").end().children().eq(showId).addClass("active");
	center(showId);
}
);
	function checkFirst(){
	if ( $("#content").attr("showId") == 0 ){
	$("#content span.left").css("cursor","default");
	return true;
}
return false;
}
function checkLast(){
	if ( $("#content").attr("showId") == $("#content ul li").length-1 ){
	$("#content span.right").css("cursor","default");
	return true;
}
return false;
}
/* 首字母大写 */
function wordStrong(){
	var liList = $("#content ul li");
	for (var j = 0;
	j < liList.length;
	j ++){
	var pList = $("#content .cont_"+(j+1)+" .cont_word p");
	for (var i = 0;
	i < pList.length;
	i ++){
	var p = pList.get(i);
	var pCont = $(p).html();
	var s = $("<b>"+(i+1)+"</b>");
	s.css("font-size","24px");
	$(p).html('');
	s.appendTo(p);
	$(p).append(pCont.substring(1));
}
}
}
center(0);
	//相对li居中function center(liIndex){
	var li = $("#content ul li").css("opacity",0.3).eq(liIndex).css("opacity",1);
	$("#content ul").animate({
	left:(-li.width()*liIndex)}
);
}
var footLen = $("#content ul li").length;
	var foots = $("#footer ul");
	for (var i = 1;
	i < footLen-1;
	i ++){
	var childA = $("<a>").html(i);
	childA.attr("href","#");
	$("<li>").append(childA).insertBefore(foots.children("[step=last]")).attr("step",i);
}
foots.children(":last").attr("step",footLen-1);
	foots.css("left",($(window).width()-foots.width())/2);
	$("#footer li").click(function(){
	$("#footer ul li").children().removeClass("active");
	$(this).children().addClass("active");
	center($(this).attr("step"));
}
);
	function myAddEvent(obj,e,fn){
	if ( obj.attachEvent ){
	obj.attachEvent('on'+e,fn);
}
else obj.addEventListener(e,fn,false);
}
function onMouseWheel(ev){
	var ev = ev||event;
	//IE//wheelDelta下滚：负， 上滚：下//alert(oEvent.wheelDelta);
	//FF//detail:下滚:正,上滚:负//alert(oEvent.detail)var bDown = true;
	if ( ev.wheelDelta ){
	bDown = ev.wheelDelta<0;
}
else{
	bDown = ev.detail>0;
}
if ( !bDown ){
	if ( checkFirst() ) return;
	showId --;
}
else{
	if ( checkLast() )return;
	showId ++;
}
$("#content").attr("showId",showId);
	$("#footer ul li").children().removeClass("active").end().eq(showId).children().addClass("active");
	center(showId);
	if ( oEvent.preventDefault ){
	oEvent.preventDefault();
}
return false;
}
myAddEvent(window,'mousewheel',onMouseWheel);
	myAddEvent(window,'DOMMouseScroll',onMouseWheel);
}
);

CSS代码(rent.css):

@charset "utf-8";body{word-break:break-all;overflow:hidden;}
body,ul,li,p,h1{margin:0px;padding:0px;}
body{background:#f3f3f3;background:url(../images/step_bg.png) repeat;}
ul{list-style:none;}
a{text-decoration:none;}
.clear_float{clear:both;}
#header{height:58px;background:#555251;border:1px solid #474645;z-index:1;}
#header .top_left{float:left;}
#header .top_left a.back{display:block;width:62px;height:36px;margin:12px 0 0 15px;background:url(../images/steppage_head.png) no-repeat 0 0px;}
#header .top_title{font-family:"微软雅黑";font-size:24px;color:#ccc;margin-top:12px;float:left;margin-left:215px;}
#header .top_right{float:right;}
#header ul li{float:right;}
#header .top_right ul a.vote{background:url(../images/vote.png) no-repeat 28px 17px;}
#header ul a{display:block;width:69px;height:58px;border-left:1px solid #474645;font-family:arial;color:#ccc;font-size:100px;text-align:center;}
#header ul a .num{display:block;}
#header ul a b{position:relative;top:35px;font-weight:400;font-size:10px;}
#header ul a .hover-tip,#header ul a .tip{display:none;}
#header .top_right ul a.favor{background:url(../images/steppage_head.png) no-repeat 14px -104px;}
/*内容*/
#content{width:920px;height:520px;box-shadow:0px 0px 10px #CCCCCC;-moz-box-shadow:0px 0px 10px #CCCCCC;-webkit-box-shadow:0px 0px 10px #CCCCCC;z-index:10;position:relative;margin:20px auto 0;}
#content .cont_left{height:520px;width:258px;float:left;border:1px solid #fafafa;background:url(../images/step-brief-bg.png) repeat;}
#content .user_pig{margin:156px auto 0;cursor:pointer;}
#content .user_name{font-family:"Microsoft YaHei";margin-top:15px;font-size:20px;line-height:24px;text-align:center;}
#content .user_connect{display:block;width:24px;height:24px;float:left;background:url(../images/user-badge-small.png) no-repeat -48px 0;margin-left:20px;}
#content .cont_right{width:658px;height:520px;float:left;background:#fff;}
#content .cont_right .left_quote{position:absolute;width:24px;height:24px;background:url(../images/steppage_head.png) no-repeat -120px -170px;top:0px;left:-30px;z-index:999;}
#content .cont_right .right_quote{position:absolute;width:24px;height:24px;background:url(../images/steppage_head.png) no-repeat -120px -200px;right:-30px;bottom:0px;z-index:999;}
#content .cont_word{width:458px;position:relative;margin:100px auto 70px;}
#content .cont_word p{font-family:"Microsoft YaHei";margin-top:15px;font-size:14px;text-indent:20px;}
#content ul{position:absolute;}
#content ul li{opacity:0.3;filter:alpha(opacity=30);float:left;}
#content strong{display:block;width:100px;height:100px;line-height:100px;text-align:center;background:#000;opacity:0.0;filter:alpha(opacity=0);font-size:60px;color:#fff;cursor:pointer;position:absolute;}
#content .sl{left:-160px;top:40%;z-index:101;}
#content .sr{right:-160px;top:40%;z-index:101;}
#content .left,#content .right{height:520px;background:#000;opacity:0;filter:alpha(opacity=0);top:0px;z-index:102;cursor:pointer;position:absolute;}
#footer{position:relative;background:#ccc;height:1px;}
#footer ul{position:absolute;top:30px;}
#footer ul li{float:left;margin-left:15px;}
#footer ul a{color:#fff;display:block;width:25px;height:25px;text-align:center;line-height:25px;font:12px/25px Arial;background:url(../images/steppage_head.png) no-repeat -120px -50px;}
#footer ul a:hover{background:url(../images/steppage_head.png) no-repeat -120px -80px;}
#footer ul a.active{background:url(../images/steppage_head.png) no-repeat -120px -80px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
91.66 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
91.66 KB
立即下载
元彩琰
了解
打赏作者 鼓励作者
Html 滑动滚动特效2
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章