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 相关文章推荐
超级兔子让浮动层消失的前因后果
Mar 09 Javascript
jQuery 跨域访问问题解决方法
Dec 02 Javascript
return false;和e.preventDefault();的区别
Jul 11 Javascript
向当前style sheet中插入一个新的style实现方法
Apr 01 Javascript
详谈JavaScript 匿名函数及闭包
Nov 14 Javascript
jQuery实时显示鼠标指针位置和键盘ASCII码
Mar 28 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
使用JavaScript解析URL的方法示例
Mar 01 Javascript
Vue.js仿Select下拉框效果
Feb 18 Javascript
js实现简单音乐播放器
Jun 30 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
一个用于mysql的数据库抽象层函数库
2006/10/09 PHP
mysql limit查询优化分析
2008/11/12 PHP
CI框架学习笔记(二) -入口文件index.php
2014/10/27 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP设计模式之简单投诉页面实例
2016/02/24 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
golang与php实现计算两个经纬度之间距离的方法
2016/07/22 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
如何用javascript控制上传文件的大小
2006/10/26 Javascript
JavaScript CSS 修改学习第四章 透明度设置
2010/02/19 Javascript
JS延迟加载(setTimeout) JS最后加载
2010/07/15 Javascript
JS实现的页面自定义滚动条效果
2015/10/26 Javascript
etmvc+jQuery EasyUI+combobox多值操作实现角色授权实例
2016/11/09 Javascript
浅谈JS验证表单文本域输入空格的问题
2017/02/14 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
2018/06/07 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
mui js控制开关状态、修改switch开关的值方法
2019/09/03 Javascript
layui的面包屑或者表单不显示的解决方法
2019/09/05 Javascript
python实现教务管理系统
2018/03/12 Python
Python OpenCV处理图像之滤镜和图像运算
2018/07/10 Python
python实现三次样条插值
2018/12/17 Python
如何在mac下配置python虚拟环境
2020/07/06 Python
python实现模拟器爬取抖音评论数据的示例代码
2021/01/06 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
中医药大学市场营销专业自荐信
2013/09/29 职场文书
入党申请书自我鉴定
2013/10/12 职场文书
美术专业个人自我评价
2014/01/18 职场文书
运动会800米加油稿
2014/02/22 职场文书
会计电算化实训报告
2014/11/04 职场文书
卢旺达饭店观后感
2015/06/05 职场文书
金正昆讲礼仪观后感
2015/06/11 职场文书
经典法律座右铭(50句)
2019/08/15 职场文书
python 通过使用Yolact训练数据集
2021/04/06 Python
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
JavaScript的Set数据结构详解
2022/02/18 Javascript