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 相关文章推荐
关于viewport,Ext.panel和Ext.form.panel的关系
May 07 Javascript
Prototype Array对象 学习
Jul 19 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript判断浏览器和hack滚动条的写法
Jul 23 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
LayUi中接口传数据成功,表格不显示数据的解决方法
Aug 19 Javascript
vue-cli3环境变量与分环境打包的方法示例
Feb 18 Javascript
jQuery实现开关灯效果
Aug 02 jQuery
JavaScript Blob对象原理及用法详解
Oct 14 Javascript
three.js中多线程的使用及性能测试详解
Jan 07 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+MySQL 手工注入语句大全 推荐
2009/10/30 PHP
php中使用key,value,current,next和prev函数遍历数组的方法
2015/03/17 PHP
php开发工具有哪五款
2015/11/09 PHP
PHP时间类完整实例(非常实用)
2015/12/25 PHP
php7性能提升的原因详解
2019/10/13 PHP
Avengerls vs Newbee BO3 第三场2.18
2021/03/10 DOTA
javascript实现动态增加删除表格行(兼容IE/FF)
2007/04/02 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
js实现省市联动效果的简单实例
2014/02/10 Javascript
js点击事件链接的问题解决
2014/04/25 Javascript
被遗忘的javascript的slice() 方法
2015/04/20 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
nodejs实现获取当前url地址及url各种参数值
2015/06/25 NodeJs
JavaScript实现公历转农历功能示例
2017/02/13 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JavaScript之DOM插入更新删除_动力节点Java学院整理
2017/07/03 Javascript
Vue的MVVM实现方法
2017/08/16 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
JavaScript中引用vs复制示例详析
2018/12/06 Javascript
解决echarts的多个折现数据出现坐标和值对不上的问题
2018/12/28 Javascript
浅析微信小程序modal弹窗关闭默认会执行cancel问题
2019/10/14 Javascript
Javascript实现html转pdf高清版(提高分辨率)
2020/02/19 Javascript
[01:13]2014DOTA2西雅图邀请赛 舌尖上的TI4
2014/07/08 DOTA
python逆序打印各位数字的方法
2018/06/25 Python
Python中函数参数调用方式分析
2018/08/09 Python
python实现网页自动签到功能
2019/01/21 Python
python实现按首字母分类查找功能
2019/10/31 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
Python  word实现读取及导出代码解析
2020/07/09 Python
使用sublime text3搭建Python编辑环境的实现
2021/01/12 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
带香烟到学校抽的检讨书
2014/09/25 职场文书
初中生散播谣言检讨书
2014/11/17 职场文书
联谊活动总结范文
2015/05/09 职场文书
python通过新建环境安装tfx的问题
2022/05/20 Python