jQuery+CSS3文字跑马灯特效的简单实现


Posted in Javascript onJune 25, 2016

jQuery+CSS3文字跑马灯特效是一款将跑马灯背景制作为3D立方体效果,文字在上面移动时,就像是文字投影到墙壁上,在转角出会改变运动方向。

效果图如下:

jQuery+CSS3文字跑马灯特效的简单实现

完整HTML代码如下:

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery+CSS3文字跑马灯特效 - 何问起</title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/83/css/style.css">
</head>
<body>
<div id="hovertreemarquee">
  <div><span>I ❤ HoverTree 我❤何问起 </span></div>
  <div aria-hidden="true"><span>I ❤ HoverTree 我❤何问起 </span></div>
</div>
<form onsubmit="setText(event)">
  <label for="textsource">使用你自己的文本</label>
  <input type="text" id="textsource" value="hwq2.com Is A Good Site!" autocapitalize="characters" pattern=".{5,60}" title="5-30个字符长度" placeholder="请输入文本:hovertree.com">
  <input type="submit" class="btn" value="使用">
</form>
  <div class="hovertreeinfo"><p>可以输入其他文本,然后点击“使用”按钮。<br />
    例如:1314520 hovertree.com 
       <br />或者: 欢迎访问何问起
    <br />
            <a href="http://hovertree.com/h/bjaf/bmfmnq8a.htm">特殊爱心符号点这里</a>
    <br />何问起提示:可以放大或者缩小浏览器宽度查看效果。
    </p></div>

<script src="http://down.hovertree.com/jquery/jquery-2.2.4.min.js" type="text/javascript"></script>
<script type="text/javascript">
    function setText(event){
     event.preventDefault();
     leftText.innerText = textsource.value.toUpperCase();
     rightText.innerText = textsource.value.toUpperCase();
    }
    var leftText = document.querySelector("#hovertreemarquee div:first-of-type span");
    var rightText = document.querySelector("#hov"+"ertreemarquee div:last-of-type span");
    var textsource = document.getElementById("textsource");
    setText();
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:FireFox、Chrome、Edge、Safari、Opera、傲游、搜狗、世界之窗、IE11. 不支持IE8及以下浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/menu/texiao/">网页特效</a>
<a href="http://hovertree.com/h/bjaf/paomadeng.htm">代码说明</a></p>
</div>
</body>
</html>

以上就是小编为大家带来的jQuery+CSS3文字跑马灯特效的简单实现全部内容了,希望大家多多支持三水点靠木~

Javascript 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
ExtJS TabPanel beforeremove beforeclose使用说明
Mar 31 Javascript
克隆javascript对象的三个方法小结
Jan 12 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
JS实现让网页背景图片斜向移动的方法
Feb 25 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
封装属于自己的JS组件
Jan 27 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
JavaScript中的await/async的作用和用法
Oct 31 Javascript
详解JS数组Reduce()方法详解及高级技巧
Aug 18 Javascript
js继承的这6种方式!(上)
Apr 23 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
Apr 03 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 #Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 #Javascript
JavaScript编程中实现对象封装特性的实例讲解
Jun 24 #Javascript
JS全局变量和局部变量最新解析
Jun 24 #Javascript
jQuery插件passwordStrength密码强度指标详解
Jun 24 #Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
Jun 24 #Javascript
jquery表单插件Autotab使用方法详解
Jun 24 #Javascript
You might like
聊天室php&amp;mysql(三)
2006/10/09 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
PHP类的自动加载机制实现方法分析
2019/01/10 PHP
php设计模式之建造器模式分析【星际争霸游戏案例】
2020/01/23 PHP
ext实现完整的登录代码
2008/08/08 Javascript
jQuery技巧总结
2011/01/01 Javascript
JavaScript创建对象的写法
2013/08/29 Javascript
jQuery纵向导航菜单效果实现方法
2016/12/19 Javascript
vue2 前后端分离项目ajax跨域session问题解决方法
2017/04/27 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
总结js函数相关知识点
2018/02/27 Javascript
JavaScript中的回调函数实例讲解
2019/01/27 Javascript
vue分页插件的使用方法
2019/12/25 Javascript
js实现简单的打印表格
2020/01/15 Javascript
[41:17]完美世界DOTA2联赛PWL S3 access vs CPG 第二场 12.13
2020/12/17 DOTA
python网络编程实例简析
2014/09/26 Python
仅用50行Python代码实现一个简单的代理服务器
2015/04/08 Python
python同时遍历数组的索引和值的实例
2018/11/15 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python Django中models进行模糊查询的示例
2019/07/18 Python
python使用 __init__初始化操作简单示例
2019/09/26 Python
Python爬虫:Request Payload和Form Data的简单区别说明
2020/04/30 Python
让IE6支持css3,让 IE7、IE8 都支持CSS3
2011/10/09 HTML / CSS
俄语翻译实习生的自我评价分享
2013/11/06 职场文书
工程监理应届生求职信
2013/11/09 职场文书
心得体会范文
2014/01/04 职场文书
初一英语教学反思
2014/01/11 职场文书
医务工作者先进事迹材料
2014/01/26 职场文书
鉴定评语大全
2014/05/05 职场文书
会计试用期自我评价
2014/09/19 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
捐资助学感谢信
2015/01/21 职场文书
简短清晨问候语
2015/11/10 职场文书
七夕情人节问候语
2015/11/11 职场文书
2016年社区六一儿童节活动总结
2016/04/06 职场文书