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 相关文章推荐
HTML中不支持静态Expando的元素的问题
Mar 08 Javascript
jQuery+jqmodal弹出窗口实现代码分明
Jun 14 Javascript
给应用部分的js代码设定一个统一的入口
Jun 15 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
深入解析JavaScript中的arguments对象
Jun 12 Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 Javascript
jquery.masonry瀑布流效果
May 25 jQuery
详解Angular2响应式表单
Jun 14 Javascript
Vue组件模板形式实现对象数组数据循环为树形结构(实例代码)
Jul 31 Javascript
详解AngularJS之$window窗口对象
Jan 17 Javascript
Koa日志中间件封装开发详解
Mar 09 Javascript
Vue 请求传公共参数的操作
Jul 31 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学习笔记 面向对象中[接口]与[多态性]的应用
2011/06/16 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php 实现Hash表功能实例详解
2016/11/29 PHP
thinkPHP中配置的读取与C方法详解
2016/12/05 PHP
Yii2实现跨mysql数据库关联查询排序功能代码
2017/02/10 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
一个很酷的拖动层的js类,兼容IE及Firefox
2009/06/23 Javascript
jquery进行数组遍历如何跳出当前的each循环
2014/06/05 Javascript
浅析Bootstrap组件之面板组件
2016/05/04 Javascript
jQuery EasyUI 获取tabs的实例解析
2016/12/06 Javascript
jQuery实现页面滚动时智能浮动定位
2017/01/08 Javascript
原生js轮播特效
2017/05/18 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
详解vue 数据传递的方法
2018/04/19 Javascript
angular 实时监听input框value值的变化触发函数方法
2018/08/31 Javascript
用python登录Dr.com思路以及代码分享
2014/06/25 Python
用不到50行的Python代码构建最小的区块链
2017/11/16 Python
CSS3 网页下拉菜单代码解释 中文翻译
2010/02/27 HTML / CSS
canvas粒子动画背景的实现示例
2018/09/03 HTML / CSS
html5+css3实现一款注册表单实例
2013/04/17 HTML / CSS
美国机场停车位预订:About Airport Parking
2018/03/26 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
市场营销专业毕业生自荐信
2013/11/02 职场文书
ktv筹备计划书
2014/05/03 职场文书
党建工作经验交流材料
2014/05/25 职场文书
考研导师推荐信范文
2015/03/27 职场文书
2015年扫黄打非工作总结
2015/05/13 职场文书
植物园观后感
2015/06/11 职场文书
人力资源部工作计划
2019/05/14 职场文书
2019银行竞聘书
2019/06/21 职场文书
PHP解决高并发问题
2021/04/01 PHP
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python
MySQL限制查询和数据排序介绍
2022/03/25 MySQL
python语言中pandas字符串分割str.split()函数
2022/08/05 Python