富贵资源网 Design By www.hznty.com
本文实例讲述了jQuery模拟Marquee实现无缝滚动效果。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>模拟Marquee无缝滚动</title>
<style type="text/css">
/* CSS Document reset */
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, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
border: 0;
font-family: inherit;
font-size: 100%;
font-style: inherit;
font-weight: inherit;
margin: 0;
outline: 0;
padding: 0;
vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
outline: 0;
}
body {
font-family: Arial, Helvetica, sans-serif;
padding: 0;
font-size: 12px;
margin: 0px auto auto auto;
color: black;
cursor:default;
}
ol, ul {
list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
font-weight: normal;
text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: "";
}
blockquote, q {
quotes: "" "";
}
a img {
border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
ul, li, ol {list-style: none;}
/* 水平滚动 */
.marquee_horizontal {overflow:hidden; width:360px; height:45px;}
.marquee_horizontal ul li {float:left; padding:0px; line-height:24px;}
.marquee_horizontal ul li img {display:block;}
/* 垂直滚动 */
.marquee_vertical {overflow:hidden; width:60px; height: 225px;}
.marquee_vertical ul li {float:left; padding:0px;}
.marquee_vertical ul li img {display:block;}
.marquee_c {overflow:hidden; width:360px; height: 25px;}
.marquee_c ul li {float:left; padding:0px; line-height: 24px;}
.marquee_d {overflow:hidden; width:180px; height:200px;}
.marquee_d ul li {float:left; width:180px; padding: 0px; line-height:20px;}
</style>
</head>
<body>
<div id="marquee_a" class="marquee_horizontal">
<ul>
<li><a href="#"><img src="/UploadFiles/2021-04-02/a1.jpg">
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery窗口操作技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery表格(table)操作技巧汇总》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
富贵资源网 Design By www.hznty.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
富贵资源网 Design By www.hznty.com
暂无评论...