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 相关文章推荐
jQuery遍历json中多个map的方法
Feb 12 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
jQuery实现摸拟alert提示框
May 22 Javascript
分享一个原生的JavaScript拖动方法
Sep 25 Javascript
JavaScript编程设计模式之构造器模式实例分析
Oct 25 Javascript
bootstrap表格内容过长时用省略号表示的解决方法
Nov 21 Javascript
浅谈React 服务器端渲染的使用
May 08 Javascript
详解在create-react-app使用less与antd按需加载
Dec 06 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
详解Jest结合Vue-test-utils使用的初步实践
Jun 27 Javascript
Vue 实现登录界面验证码功能
Jan 03 Javascript
JS中的const命令你真懂它吗
Mar 08 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
去除php注释和去除空格函数分享
2014/03/13 PHP
实现在同一方法中获取当前方法中新赋值的session值解决方法
2014/06/26 PHP
PHP PDO fetch 模式各种参数的输出结果一览
2015/01/07 PHP
MySql数据库查询结果用表格输出PHP代码示例
2015/03/20 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
2019/05/09 PHP
使用jquery写个更改表格行顺序的小功能
2014/04/29 Javascript
JavaScript面对国际化编程时的一些建议
2015/06/24 Javascript
js简单工厂模式用法实例
2015/06/30 Javascript
JavaScript 性能优化小结
2015/10/12 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
angularJs关于指令的一些冷门属性详解
2016/10/24 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
2017/11/28 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
用Vue写一个分页器的示例代码
2018/04/22 Javascript
使用vue开发移动端管理后台的注意事项
2019/03/07 Javascript
js 实现ajax发送步骤过程详解
2019/07/25 Javascript
[02:54]DOTA2亚洲邀请赛 VG战队出场宣传片
2015/02/07 DOTA
[01:02]DOTA2上海特锦赛SHOWOPEN
2016/03/25 DOTA
使用Python中的greenlet包实现并发编程的入门教程
2015/04/16 Python
使用pandas把某一列的字符值转换为数字的实例
2019/01/29 Python
python自动化之Ansible的安装教程
2019/06/13 Python
Python3实现zip分卷压缩过程解析
2019/10/09 Python
python中使用you-get库批量在线下载bilibili视频的教程
2020/03/10 Python
深入了解Python enumerate和zip
2020/07/16 Python
CSS3动画和HTML5新特性详解
2020/08/31 HTML / CSS
英国No.1体育用品零售商:SportsDirect.com
2019/10/16 全球购物
优良学风班总结材料
2014/02/08 职场文书
园林技术个人的自我评价
2014/02/15 职场文书
环保倡议书怎么写
2014/05/16 职场文书
高中教师考核方案
2014/05/18 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Node.js实现断点续传
2021/06/23 Javascript