jquery.marquee实现无缝滚动效果代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：jquery.marquee实现无缝滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <style>
        @charset "utf-8";
	* {
	margin:0;
	padding:0
}
ul,ol,dl {
	padding:0;
	margin:0
}
li {
	list-style:none
}
body {
	font-size:14px;
	font-family:"微软雅黑","宋体";
	color:#323232;
	margin:0
}
h1,h2,h3,h4,h5,h6 {
	font-size:14px;
	font-weight:normal
}
strong,b {
	font-weight:normal
}
em,i {
	font-style:normal
}
a {
	text-decoration:none;
	color:#000
}
.fl {
	float:left!important
}
.fr {
	float:right!important
}
.clear {
	clear:both
}
.clearfix:after {
	content:"";
	display:block;
	clear:both
}
.clearfix {
	zoom:1
}
img {
	vertical-align:top
}
input,img,a,fieldset {
	border:0
}
input,textarea {
	outline:0
}
button,input,select,label {
	vertical-align:middle
}
th,td {
	padding:0;
	margin:0
}
table {
	border-spacing:0;
	width:100%
}
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {
	-webkit-appearance:none!important;
	margin:0
}
input:disabled {
	background-color:#f9f9f9
}
select {
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	border:1px solid #ccc;
	float:left;
	height:36px;
	width:30px
}
select::-ms-expand {
	display:none
}
.pr {
	position:relative
}
.pa {
	position:absolute
}
.hide {
	display:none
}
.show {
	display:block
}
.cursor {
	cursor:pointer
}
.green {
	color:#00A972!important
}
.html,.body {
	height:100%
}
.flex {
	display:flex
}
.backurl {
	background:#fff
}
.w1 {
	width:500px;
	margin:0 auto
}
.user_Testimonies {
	padding-top:10px;
	padding-bottom:10px
}
.user_Testimonies h1 {
	font-size:34px;
	font-family:Helvetica-Bold,Helvetica;
	font-weight:bold;
	color:#333;
	text-align:center;
	padding-bottom:12px
}
.user_box {
	overflow:hidden;
	padding:10px 0
}
.user_ul {
	width:100%;
	display:flex;
	margin-bottom:32px
}
.user_ul li {
	width:250px;
	background:#FFF;
	border-radius:20px;
	padding:22px;
	float:left;
	margin-right:30px;
	box-shadow:0 0 10px rgba(0,0,0,0.2)
}
.user_header {
	display:flex
}
.user_header img {
	width:59px;
	height:59px;
	border-radius:100%;
	background:#999
}
.userhead_txt {
	width:300px;
	margin-left:15px
}
.userhead_txt .p_text2 {
	font-size:20px;
	font-family:Helvetica-Regular,Helvetica;
	font-weight:400;
	color:#333;
	margin-top:10px
}
.userhead_txt .p_text {
	font-size:24px;
	font-family:Helvetica-Bold,Helvetica;
	font-weight:bold;
	color:#333;
	line-height:28px
}
.user_ul article {
	font-size:18px;
	font-family:Helvetica-Regular,Helvetica;
	font-weight:400;
	color:#333;
	padding-top:20px
}
.user_star {
	display:flex;
	align-items:center;
	margin-top:10px
}
.user_star img {
	width:78px;
	height:14px
}
.user_star p {
	font-size:12px;
	font-family:Helvetica-Regular,Helvetica;
	font-weight:400;
	color:#00A972;
	background:#E9F7F0;
	padding:0 10px;
	height:20px;
	line-height:20px;
	margin-left:20px
}

    </style>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/marquee.js"></script>
</head>

<body class="backurl">
    <div class="user_Testimonies">
        <h1>滚动样式文本可自定义，方向，速度都可以自定义</h1>
        <div class="w1 user_box">
            <div class="w1 user_box" id="marquee2">
                <ul class="user_ul">
                    <li>
                        <div class="user_header"><img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" />
                            <div class="userhead_txt">
                                <p class="p_text">Raj****2</p>
                                <p class="p_text2">Linker</p>
                            </div>
                        </div>
                        <article>“I quit my agency job and became a Linker!”</article>
                      
                    </li>
                     <li>
                        <div class="user_header"><img src="//repo.bfw.wiki/bfwrepo/image/6078f69f7e176.png" />
                            <div class="userhead_txt">
                                <p class="p_text">Raj****2</p>
                                <p class="p_text2">Linker</p>
                            </div>
                        </div>
                        <article>“I quit my agency job and became a Linker!”</article>
                      
                    </li>
                      <li>
                        <div c.........完整代码请登录后点击上方下载按钮下载查看