用JavaScript实现像PDA式的页面鼠标拖动效果！经典！

最新推荐文章于 2023-07-26 17:33:34 发布

勿忘心安Billy

最新推荐文章于 2023-07-26 17:33:34 发布

阅读量794

点赞数

分类专栏： JavaScript 文章标签： javascript function html 文档

本文链接：https://blog.csdn.net/qq415734794/article/details/3931336

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

这个用JavaScript实现像PDA式的页面鼠标拖动效果可以为你的网站与用户的交互带来全新的体验，使用户浏览你的网页时显得更加人性化！
把下面的网页代码粘贴到你的记事本中，保存为html文档看看效果吧！

<html> <head><title>用JavaScript实现像PDA式的页面鼠标拖动效果!</title> <mce:script type="text/javascript"></mce:script> </head> <body> <mce:script type="text/javascript"></mce:script> <a href="http://blog.csdn.net/qq415734794" mce_href="http://blog.csdn.net/qq415734794">点此了解更多...</a> </body> </html>

<html>
<head><title>用JavaScript实现像PDA式的页面鼠标拖动效果!</title>

function upit()
{mouseY=0;} //记住鼠标已放开

document.οnmοuseup=upit; //鼠标放开时执行upit()函数
document.οnmοusedοwn=downit; //鼠标按下时执行downit()函数
document.onmousemove =moveit; //鼠标移动时执行moveit()函数
</script>
</head>
<body>
<script type="text/javascript">
var i;
document.write('<center>');
document.write('<h1>用JavaScript实现像PDA式的页面鼠标拖动效果!</h1>');
document.write('</center>');
document.write('<p align="right"><a href="http://blog.csdn.net/qq415734794">点此了解更

多...</a></p>');

//通过循环来创建100行“数据”！
for(i=1;i<100;i++){
document.write('<center><span style="cursor:hand;font-size:16px;">第'+i+'行－－－－－－－－

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

</span><br></center>');
}
</script>
<a href="http://blog.csdn.net/qq415734794">点此了解更多...</a>
</body>
</html>

勿忘心安Billy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用JavaScript实现像PDA式的页面鼠标拖动效果！经典！

这个用JavaScript实现像PDA式的页面鼠标拖动效果可以为你的网站与用户的交互带来全新的体验，使用户浏览你的网页时显得更加人性化！把下面的网页代码粘贴到你的记事本中，保存为html文档看看效果吧！用JavaScript实现像PDA式的页面鼠标拖动效果!<!--var old_y=0; //记录鼠标按下时的Ｙ轴位置var mouseY=0; //用于记录鼠
复制链接

扫一扫