帮助中心
获取牛币
联系我们
关于我们
版权声明
素材牛首页
微博登录
QQ登录
微信扫码登录
注册
登录
新浪微博
QQ登陆
微信登录
热门搜索:
小程序
支付
Java
后台模板
上传
商城模板
jQuery
手机
Thinkphp
微信
Vue.js
首 页
网页特效
整站源码
PHP实例
网站模版
工具箱
常用代码
论坛
游戏源码
资源分享
当前位置:
首页
»
精选常用代码
» 很酷的文字动态搬运效果
很酷的文字动态搬运效果
浏览:973次
-
评论:1次
-
发布时间:2017-11-17
Html
Css
Js
搬运
body,div,iframe,ul,ol,dl,dt,dd,li,dl,h1,h2,h3,h4,table,th,td,input,button,select,textarea { margin:0; padding:0; font-style:normal; font:12px/22px Arial,Helvetica,sans-serif; } ol,ul,li { list-style:none; } img { border:0; vertical-align:middle; } body { color:#000000; background:#FFF; } a { color:#000000; text-decoration:none; } a:hover { color:#F00; } #box { width:830px; height:300px; margin:50px auto 0px; } #box .left,#box .right,#box .in { border:1px solid #ccc; } #box .left,#box .right { width:278px; height:278px; margin:10px; padding:10px; color:#ff8080; float:left; font-size:16px; } #box .in { float:left; width:160px; height:298px; margin:10px; border:1px solid #ccc; } #box .in .btn { display:block; width:130px; height:40px; border:none; outline:none; margin:20px auto 0; background:#ff8080; color:#fff; } #box .in .btn:hover { background:#ff0000; cursor:pointer; } #box .in .progress { display:none; width:100%; margin:50px 0 0; text-align:center; } #box .in .progress progress { display:block; width:120px; height:20px; margin:5px auto 0 } #box .in .progress span { font-size:16px; } #box .in .progress_quotes { display:none; width:85px; margin:20px auto 0; } #box .in .progress_quotes span { display:inline-block; width:12px; height:32px; border:1px solid #ccc; } #box .in .progress_quotes span.on { background:#ff8080; } #box .in .counts { display:none; width:50px; height:20px; margin:0 auto; text-align:center; line-height:20px; font-size:16px; }
~ function() { var oBox = document.getElementById("box"), oLeft = oBox.children[0], oIn = oBox.children[1], oRight = oBox.children[2], oBtn = oIn.children[0], oprog = oIn.children[1], opq = oIn.children[2], oProg1 = oIn.children[1].children[0], oPer = oIn.children[1].children[1], //百分比span aSpan = oIn.children[2].children, //5个span oCounts = oIn.children[3], //总进度div words = '点花蕊,散清香。入,甚为清香。伤心花不败,不落,我静待。清铃合欢,随风摇曳,不止休,心依。' + '戴珠簪,于发间。你嫣然一笑,我心醉。丝发于指尖,宛若一丝香,香残余。花开花落不休,溪水长流不止。这一生,有你,已足够。'; oLeft.innerHTML = words, length = words.length, flag = false; addEvent(oBtn, "click", fn); function fn() { if (!flag) { this.style.background = "#808080"; this.innerHTML = "搬运中..." oprog.style.display = "block"; opq.style.display = "block"; oCounts.style.display = "block"; } var i = 0, t = null; function decWords() { i++; oLeft.innerHTML = words.slice(i); oRight.innerHTML = words.slice(0, i); oCounts.innerHTML = i + "/" + length; oProg1.value = (i / length * 100); oPer.innerHTML = ((i / length) * 100).toFixed(0) + "%"; t = setTimeout(decWords, 100); if (i === length) { clearTimeout(t); flag = true; }; } setTimeout(decWords, 200); function pqamination() { var index = 0, t1 = null, j = 0; function amination() { aSpan[index].className = ""; aSpan[j].className = "on"; index = j; j = j === aSpan.length - 1 ? 0 : j + 1; t1 = setTimeout(amination, 1000); if (flag === true) { oprog.style.display = "none"; opq.style.display = "none"; oCounts.style.display = "none"; oBtn.innerHTML = "搬运完成~"; oBtn.style.background = "#ff8080"; clearTimeout(t1); } } amination(); } pqamination(); } function addEvent(obj, type, eFn) { obj.addEventListener ? obj.addEventListener(type, eFn, false) : obj.attachEvent("on" + type, eFn); }; }();
↑上面代码改变,会自动显示代码结果
jQuery调用版本:
1.11.3
<!doctype html><html><head><meta charset="utf-8"><title>很酷的文字动态搬运效果-www.sucainiu.com</title><script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script><style>
</style></head><body>
<script>
</script>
</body></html>
立即下载
收藏
积分说明:注册即送10牛币,每日签到可获得5牛币,成为VIP会员可永久免牛币下载!
充值积分
充值会员
更多说明»
代码描述:js文字搬运效果,练习代码
简单的jQuery轮播图
复制文字粘贴会有相对应网址
讨论这个常用代码(1)
回答他人问题或分享心得会奖励牛币
Lv10 CTO
华***n
2017年12月13日
嗯感谢分享
回复
文明上网,理性发言! 😉 阿里云幸运券,
戳我领取
发表评论
提交回复
我的积分余额:
0
已下载次数:
973
所需牛币:
5
开始下载
牛币获取:
签到、评论、充值
» 在线充值
(10牛币=1元)
成为VIP可永久免积分下载全部常用代码
» 查看详情
VIP
客服
签到
充值