代码拉取完成,页面将自动刷新
<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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。