jQuery 网页拖拽的模块，实时显示移动像素

发布时间：2018-09-19 22:29:42 所属栏目：Unix 来源：站长网

导读：一个 jQuery 网页拖拽的模块代码，好比系统音量图标的滑动，用鼠标滑动这个层，实时显示移动像素，尽管可以应用的地方不是很多，但学习的价值仍是挺大的。为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　一个jQuery 网页拖拽的模块代码，好比系统音量图标的滑动，用鼠标滑动这个层，实时显示移动像素，尽管可以应用的地方不是很多，但学习的价值仍是挺大的。

　　为解决一些网页特效运行后不能显示效果（例如：jQuery则需要刷新）问题，烈火特别新增网页版演示。

　　点击查看：网页特效

　　运行演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery 网页拖拽的模块，实时显示移动像素-Liehuo.Net</title> <script src="/uploads/common/js/jquery-1.3.2.js" type="text/javascript" language="javascript"></script> <script type="text/javascript"> $(function(){ var scro_zoom = parseInt($(".scro_mouse").width()/2); $(".scro_mouse").mousedown(function(){ $(".show").fadeIn(300); $(this).bind("mousemove",function(e){ var X = e.pageX - $("#scro").offset().left; //得到left值; var Y = e.pageY - $("#scro").offset().top - 5;//得到top值; $(this).css("left",X-scro_zoom); $(".show").text( X + "," + Y + "," + $(".scro_mouse").css("left")); }) }).mouseup(function(){ $(this).unbind("mousemove"); $(".show").hide(); }) }) </script> <style type="text/css"> *{ margin:0; padding:0;} #box{ width:690px; border:1px solid #000; margin:50px auto;} #scro{ width:100%; height:30px; background:red; margin:10px 0; position:relative;} .scro_line{ width:100%; height:0; overflow:hidden; border-top:2px groove #000; position:absolute; left:0; top:15px; z-index:0;} .scro_mouse{ width:66px; height:20px; background:#ccc; cursor:pointer; position:absolute; left:0; top:5px; z-index:1;} .show{ width:100px; height:30px; position:absolute; display:none; top:-30px; left:0;} </style> </head> <body> <div id="box"> <div id="scro"> <div class="show"></div> <div class="scro_line"></div> <div class="scro_mouse"></div> </div> <div class="text"></div> </div> </body> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!