模仿小猎CMS首页功能展示的JS效果

Posted 2020-06-23 寅春树

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了模仿小猎CMS首页功能展示的JS效果相关的知识，希望对你有一定的参考价值。

老婆是前端，接到了设计师的一个效果图，有点懵圈了：上面左右鼠标可以点击滚动图片，点击每个图片下面可以显示这个案例的一点介绍，最近在恶补Jquery，所以我就帮助写了一下这个效果，为了偷懒，我是找了一个效果差不多的修改了一下，那就是小猪CMS展示站首页的“功能介绍”的效果进行了修改。

小猪CMS上面的下面的文字是通过AJAX的调用的，我在这里做了修改。

效果：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
	<title></title>
	<link rel="stylesheet" type="text/css" href="css.css">
	<script type="text/javascript" src="./jquery-1.7.2.min.js"></script>
	<script type="text/javascript" src="./common.js"></script>
</head>
<body>
<script type="text/javascript">
	
</script>
<div class="functionDesc">
    <div class="w1000">
        <div class="caseDesc">            
            <div class="minNav clearfix">
                <div class="scrollBtn">
                    <a href="javascript:;" class="prev">
                    </a>
                    <a href="javascript:;" class="next">
                    </a>
                </div>
               <div class="scrollBox">
    <ul class="clearfix" id="tianchong" style="/*margin-left: -1160px;*/ width: 2900px;">
        <li key="1" class="">
            <img src="img/xxx1.png" alt="icon">           
            <div class="hoverUp">               
                    <h3 class="xtitle_zw">
						周口网
					</h3>
                    <span class="xdesc">
                        周口网拇指姑娘》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
                    </span>  
            </div>
        </li>
        <li key="2" class="">
            <img src="img/xxx2.png" alt="icon">            
            <div class="hoverUp">               
                    <h3 class="xtitle_zw">
                        武警河南省总队医院
                    </h3>
                    <span class="xdesc">
                        武警河南省总队医院拇指姑娘》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
                    </span>  
            </div>
        </li>
        <li key="3">
            <img src="img/xxx3.png"  alt="icon">
            <div class="hoverUp">               
                    <h3 class="xtitle_zw">
                        中域在线
                    </h3>
                    <span class="xdesc">
                        武警河南省总队医院拇指姑娘》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
                    </span>  
            </div>
        </li>
        <li key="4">
            <img src="img/xxx4.png"  alt="icon">
            
           <div class="hoverUp">               
                    <h3 class="xtitle_zw">
                        中域在线
                    </h3>
                    <span class="xdesc">
                        span》x都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
                    </span>  
            </div>
        </li>
        <li key="5">
            <img src="img/xxx1.png"  alt="icon">
            
            <div class="hoverUp">               
                    <h3 class="xtitle_zw">
                        上上集团
                    </h3>
                    <span class="xdesc">
                        上上集团都可作为节日营销游戏，在特殊的节日推出。童话经典人物搭载萌萌哒的画风，适合在儿童节推出。欢乐又惊险的玩法，让粉丝重温童年的美好回忆。儿童节巧妙借势一把，能为商家在朋友圈赢来不俗的战绩。
                    </span>  
            </div>
        </li>  
    </ul>
</div>
                </div>
            </div>
            <h3 class="title_zw">
                
            </h3>
            <div class="textDesc">
                <p>
                    <strong>
                        功能介绍：
                    </strong>
                    <span class="desc">
                        
                    </span>
                </p>
               
            </div>
        </div>
    </div>
</div>
</div>
</body>
</html>

　　CSS样式：

ul, ol, li {
list-style: none;
}
 li {
display: list-item;
text-align: -webkit-match-parent;
}
p{
	margin: 0;
padding: 0;
-webkit-tap-highlight-color: rgba(0,0,0,0);

}
.minNav ul li img{
		transition: all 0.5s;
   	-moz-transition: all 0.5s;
   	-o-transition: all 0.5s;
   	-ms-transition: all 0.5s;
   	-webkit-transition: all 0.5s;
}
html, body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, section, article, aside, header, footer, nav, dialog, figure, hgroup, em, button ,a,input{ font-family:"微软雅黑";margin:0;padding:0;-webkit-tap-highlight-color: rgba(0,0,0,0)}

.w1000{margin: 0 auto;max-width: 950px;}
.functionDesc{padding-top: 60px}
.caseDesc{padding-top: 50px;position: relative;
    height: 110px;}
.caseDesc h3{font-size: 20px;color: #1bbc6b;font-weight: normal}
.caseDesc .textDesc{font-size: 14px;color: #666;line-height: 24px;padding-top: 20px;height: 268px;overflow: auto;}
.caseDesc .textDesc p{    padding-bottom: 20px;}
.caseDesc .qrCode{position: absolute;right: 0;top: -50px}
.caseDesc .qrCode .redCode{display: block;margin-left: 60px;width: 92px;height: 103px;background:url("img/qrCode.png") no-repeat top center;overflow: hidden;}
.caseDesc .qrCode .redCode img{display: block;width: 78px;height: 78px;    margin-top: 7px;margin-left: 7px;background-color: #fff;}
.caseDesc .qrCode em{color: #fff;font-size: 14px;background: #f26161;padding: 5px 10px;border-radius: 5px;display: inline-block}
.caseDesc .qrCode em{*display: inline}

.minNav{overflow: hidden; position: absolute;width: 950px;}

.minNav .scrollBox{margin:0 auto;width: 840px;overflow: hidden;*position: relative;}
.minNav .scrollBtn a{position: absolute;width: 16px;height: 27px;background: url("img/icons.png") no-repeat -16px -12px;display: block;z-index: 99;top: 30px}
.minNav .scrollBtn a.prev{background-position: 0 -12px}
.minNav .scrollBtn a.next{right: 0px;}
.minNav ul li{float: left;width: 188px;height: 90px;text-align: center;margin-right: 25px;position: relative;color: #ccc;cursor: pointer;font-size: 13px;}
.minNav ul li img{margin: 10px 0;height: 78px;}
.minNav ul li .hoverUp{position: absolute;width: 118px;height: 90px;top: 0;left: 0;right: 0;bottom: 0;color: #fff;display: none;}
.minNav ul li.on .hoverUp{display: block}
.minNav ul li img:hover{opacity: 0.6;filter: alpha(opacty=60);}
.title_zw{color:#3FBCF9;}
.textDesc{font-size:14px;color:#999;line-height:24px;margin-top:10px;}

　　Jquery代码：

//作者：寅春树
//QQ:616885052
//博客：http://www.cnblogs.com/chunshu

$(function($) {
  funScroll();
});

   
//首页产品介绍的图片滚动和按钮点击滚动
function funScroll(){    
    var i=0;
    var r=0;
    var phoneLI = $(".imgHolder .imgScroll ul>li");
    var phoneLiLen = phoneLI.length;
    var phoneLiW = phoneLI.width();
    var imgSroll = $(".imgHolder .imgScroll ul");
    imgSroll.width(phoneLiLen*phoneLiW);
    var btn = $(".minNav ul li");
    var btnLen=btn.length;   
    var scrollUl=$(".minNav ul")    
    var btnW=btn.outerWidth(true);
    var btnLen5=Math.ceil(btn.length/4);
    var btnLen5w=btnW*4;
    var prevBtn=$(\'.minNav .scrollBtn a.prev\');
    var nextBtn=$(\'.minNav .scrollBtn a.next\');    
    $(".minNav .scrollBox ul").width(btnLen*btnW);

    btn.each(function(index) {			
        $(this).live(\'click\',function() {
            i = index;
            var key_id=btn.eq(index).attr("key");   

                    $(".title_zw").html($(this).find(\'.xtitle_zw\').html());                
                    $(".desc").html($(this).find(\'.xdesc\').html());	
                    
        });
    }).eq(0).trigger("click");

    prevBtn.bind(\'click\',function(){       
        prev();
        btnScroll();
    });
    nextBtn.bind(\'click\',function(){
        next();
        btnScroll();
    });
    function next() {
        r++;
        if (r == btnLen5) {
            r = 0
        }
    }
    function prev() {
        r--;
        if (r < 0) {
            r = btnLen5 - 1
        }
    }
    function btnScroll(){
        scrollUl.stop().animate({
                \'margin-left\': -btnLen5w * r + \'px\'
            },
            1000);
    }
  
}

　　下面是源文件下载：http://pan.baidu.com/s/1kUuOOh5

以上是关于模仿小猎CMS首页功能展示的JS效果的主要内容，如果未能解决你的问题，请参考以下文章

JAVAEE——宜立方商城05：前台系统搭建首页展示Cms系统的实现

微信小程序-基于云开发 CMS + Vant Weapp 电商 Demo 来了！

模仿知乎首页代码

网站首页刷新多次以后页面的js效果都没有了

iOS高仿城觅-感谢大神分享