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 相关文章推荐
70+漂亮且极具亲和力的导航菜单设计国外网站推荐
Sep 20 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
javascript 寻找错误方法整理
Jun 15 Javascript
解决jquery实现的radio重新选中的问题
Jul 03 Javascript
jQuery的选择器中的通配符[id^='code']或[name^='code']及jquery选择器总结
Dec 24 Javascript
jQuery使用$.each遍历json数组的简单实现方法
Apr 18 Javascript
最细致的vue.js基础语法 值得收藏!
Nov 03 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
jQuery html表格排序插件tablesorter使用方法详解
Feb 10 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
高性能js数组去重(12种方法,史上最全)
Dec 21 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
QueryPath PHP 中的jQuery
2010/04/11 PHP
与文件上传有关的php配置参数总结
2013/06/14 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
ExtJS 入门
2010/10/29 Javascript
extjs tabpanel限制选项卡数量实现思路及代码
2013/04/02 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
在Linux上用forever实现Node.js项目自启动
2014/07/09 Javascript
网站接入QQ登录的两种方法
2014/07/22 Javascript
javascript表格的渲染组件
2015/07/03 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
2015/08/31 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
JavaScript输出所选择起始与结束日期的方法
2017/07/12 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
python修改注册表终止360进程实例
2014/10/13 Python
使用PDB简单调试Python程序简明指南
2015/04/25 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
python通过pip更新所有已安装的包实现方法
2017/05/19 Python
python中的迭代和可迭代对象代码示例
2017/12/27 Python
用python 批量更改图像尺寸到统一大小的方法
2018/03/31 Python
用pandas按列合并两个文件的实例
2018/04/12 Python
python 采用paramiko 远程执行命令及报错解决
2019/10/21 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
使用pyhon绘图比较两个手机屏幕大小(实例代码)
2020/01/03 Python
pycharm下pyqt4安装及环境配置的教程
2020/04/24 Python
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
售房委托书
2014/08/30 职场文书
个人委托书范本汇总
2014/10/01 职场文书
寻找成龙观后感
2015/06/12 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书