jQuery模拟Marquee无缝滚动支持pc和移动端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>linkTalent</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="https://www.jq22.com/demo/marquee202209190002/css/base.css" />
<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="https://www.jq22.com/demo/marquee202209190002/js/marquee.js"></script>
</head>
<body class="backurl">
<!-- begin:User Testimonies -->
<div class="user_Testimonies">
<h1>滚动样式文本可自定义，方向，速度都可以自定义</h1>
<div class="w1 user_box">
<divclass="w1 user_box"id="marquee2">
<ul class="user_ul">
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/rub_img.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>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>Fair Pay</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/jam_img.png" />
<div class="userhead_txt">
<p class="p_text">Jam****x</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“I got high quality talent referrals from other Linkers within minute”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>FAST</p><p>Good Talents</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/raj_img.png" />
<div class="userhead_txt">
<p class="p_text">Raj****2</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“Just placed a front-end engineer remotely for a Valley based unicorn!”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>Fair Pay</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/tim_img.png" />
<div class="userhead_txt">
<p class="p_text">Tim****3</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“Working with the best agents around the world is so satisfying”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>FAST</p><p>Good Talents</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/sar_img.png" />
<div class="userhead_txt">
<p class="p_text">Sar****k</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“Working with the best agents around the world is so satisfying”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>FAST</p><p>Good Talents</p>
</div>
</li>
</ul>
</div>
<divclass="w1 user_box"id="marquee1">
<ul class="user_ul">
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/mon_img.png" />
<div class="userhead_txt">
<p class="p_text">Moh****s</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“Working with the best agents around the world is so satisfying”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>Fair Pay</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/jes_img.png" />
<div class="userhead_txt">
<p class="p_text">Jes****d</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“A must use if you have clients hiring remote talents but you can’t find enough of them”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>Good Employer</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/bir_img.png" />
<div class="userhead_txt">
<p class="p_text">Bir****s</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“Definitely helped me finding more global talents”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>FAST</p><p>Good Talents</p>
</div>
</li>
<li>
<div class="user_header">
<img src="https://www.jq22.com/demo/marquee202209190002/image/din_img.png" />
<div class="userhead_txt">
<p class="p_text">Din****m</p>
<p class="p_text2">Linker</p>
</div>
</div>
<article>“When motivated Linkers work together, its magical”</article>
<div class="user_star">
<img src="https://www.jq22.com/demo/marquee202209190002/image/star_img.png" >
<p>Good Talents</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<!-- end:User Testimonies -->
<script>
$(function() {
$("#marquee2").kxbdMarquee({isEqual:false,scrollAmount:1.5,});
$("#marquee1").kxbdMarquee({isEqual:false});
})
</script>
<script type="text/javascript">
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
}
if (browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone ||
browser.versions.iPad) {
cssChange();
}
function cssChange() {
var link = document.getElementsByTagName('link');
link.setAttribute('href', 'css/mobile.css');
}
// DOM解析完毕
function setRootRem() {
const root = document.documentElement;
const scale = root.clientWidth / 10
root.style.fontSize = scale + 'px'
}
setRootRem()
window.addEventListener('resize', setRootRem)
</script>
</body>
</html>
页:
[1]