1 Star 0 Fork 0

jessesang / zstest

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
tip.html 3.33 KB
一键复制 编辑 Web IDE 原始数据 按行查看 历史
3370038942@qq.com 提交于 2017-07-31 10:56 . first commit
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<script type="text/javascript">
$(function() {
x = 5;
y = 15;
$("p").hover(function(e) {
otitle = this.title;
this.title = "";
var ndiv = "<div id='leo'>" +
'<div class="cd-timeline-block">'+
'<div class="cd-timeline-img cd-picture">'+
' <img src="img/cd-icon-picture.svg" alt="Picture">'+
'</div>'+
' <div class="cd-timeline-content">'+
' <h2>HTML5+CSS3实现的响应式垂直时间轴</h2>'+
'<p>网页时间轴一般用于展示以时间为主线的事件,如企业网站常见的公司发展历程等。本文将给大家介绍一款基于HTML5和CSS3的漂亮的垂直时间轴,它可以响应页面布局,适用于HTML5开发的PC和移动手机WEB应用。</p>'+
'<a href="http://www.helloweba.com/view-blog-285.html" class="cd-read-more" target="_blank">阅读全文</a>'+
'<span class="cd-date">2015-01-06</span>'+
'</div>'+
' </div>'+
' <div class="cd-timeline-block">'+
' <div class="cd-timeline-img cd-movie">'+
' <img src="img/cd-icon-movie.svg" alt="Movie">'+
'</div>'+
'<div class="cd-timeline-content">'+
' <h2>jQuery+PHP动态数字展示效果</h2>'+
' <p>我们在一些应用中需要动态展示数据,比如当前在线人数,当前交易总额,当前汇率等等,前端页面需要实时刷新获取最新数据。本文将结合实例给大家介绍使用jQuery和PHP来实现动态数字展示效果。</p>'+
' <a href="http://www.helloweba.com/view-blog-284.html" class="cd-read-more" target="_blank">阅读全文</a>'+
' <span class="cd-date">2014-12-25</span>'+
'</div>'+
'</div>'+
"</div>";
$("body").append(ndiv);
$("#leo").css({
"top" : (e.pageY + y) + "px",
"left" : (e.pageX + x) + "px"
}).show(2000);
$(this).mousemove(function(e) {
$("#leo").css({
"top" : (e.pageY + y) + "px",
"left" : (e.pageX + x) + "px"
}).show(1000);
});
}, function() {
this.title = otitle;
$("#leo").remove();
});
});
</script>
<style type="text/css">
#leo {
position: absolute;
border: 1px solid grey;
opacity: 0.8;
background: grey;
}
</style>
</head>
<body>
<p title="1dfgfdgdfg">If you click on me, I will disappear.</p>
<p title="2dgfdgdfgdf">If you click on me, I will disappear.</p>
<p title="3dgfdgfdgfder">If you click on me, I will disappear.</p>
<p title="4ghfghfghfhgf">If you click on me, I will disappear.</p>
</body>
</html>
JavaScript
1
https://gitee.com/jessesang/zstest.git
git@gitee.com:jessesang/zstest.git
jessesang
zstest
zstest
master

搜索帮助

14c37bed 8189591 565d56ea 8189591