如果您想了解JS实现鼠标拖动分页和js鼠标拖动窗口的做法的知识，那么本篇文章将是您的不二之选。我们将深入剖析JS实现鼠标拖动分页的各个方面，并为您解答js鼠标拖动窗口的做法的疑在这篇文章中，我们将为您
如果您想了解JS实现鼠标拖动分页和js鼠标拖动窗口的做法的知识，那么本篇文章将是您的不二之选。我们将深入剖析JS实现鼠标拖动分页的各个方面，并为您解答js鼠标拖动窗口的做法的疑在这篇文章中，我们将为您介绍JS实现鼠标拖动分页的相关知识，同时也会详细的解释js鼠标拖动窗口的做法的运用方法，并给出实际的案例分析，希望能帮助到您！
本文目录一览：- JS实现鼠标拖动分页（js鼠标拖动窗口的做法）
- ajax实现鼠标拖动到底部自动加载新的数据的实例
- AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
- css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍
- Delphi DbgridEh实现鼠标拖动选中列，并使复选框选中
JS实现鼠标拖动分页（js鼠标拖动窗口的做法）
JS实现鼠标拖动分页
本例演示地址：http://www.beijibear.com/myplugins/tuodongfenye.html
源码如下：
<html>
<head>
<title>blog</title>
<meta http-equiv=content-type content="text/html; charset=gb2312">
<style>
body{
border:0px;
margin:0px;
overflow:hidden;
background-color:transparent;
font-family:宋体;
}
.page{
position:absolute;
width:700px;
border:1px solid #999;
background-color:#000;
left:425px;
margin-left:-350px;
cursor:default;
z-index:0;
}
ul{
height:320px;
list-style:none;
margin:40px 50px 0px;
padding:0px;
}
li{
width:100%;
height:30px;
line-height:30px;
font-size:14px;
text-align:left;
border-bottom:1px dashed #999;
}
a{
text-decoration:none;
color:#999;
}
a:hover{
font-weight:bold;
}
li span{
float:right;
color:#999;
}
.tip{
display:block;
width:100%;
font-size:12px;
color:#999;
text-align:center;
margin:10px 0px 20px;
}
</style>
</head>
<body onselectstart="return false;">
<script>
function id(obj){
return document.getElementById(obj);
}
var page;
var lm,mx;
var md=false;
var sh=0;
var en=false;
window.onload=function(){
page=document.getElementsByTagName("div");
if(page.length>0){
page[0].style.zIndex=2;
}
for(i=0;i<page.length;i++){
page[i].className="page";
page[i].innerHTML+="<span class=tip>第 "+(i+1)+"/"+page.length+" 页 提示：左右拖拽翻页</span>";
page[i].id="page"+i;
page[i].i=i;
page[i].onmousedown=function(e){
if(!en){
if(!e){e=e||window.event;}
lm=this.offsetLeft;
mx=(e.pageX)?e.pageX:e.x;
this.style.cursor="w-resize";
md=true;
if(document.all){
this.setCapture();
}else{
window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
}
}
page[i].onmousemove=function(e){
if(md){
en=true;
if(!e){e=e||window.event;}
var ex=(e.pageX)?e.pageX:e.x;
this.style.left=ex-(mx-lm)+350;
if(this.offsetLeft<75){
var cu=(this.i==0)?page.length-1:this.i-1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
if(this.offsetLeft>75){
var cu=(this.i==page.length-1)?0:this.i+1;
page[sh].style.zIndex=0;
page[cu].style.zIndex=1;
this.style.zIndex=2;
sh=cu;
}
}
}
page[i].onmouseup=function(){
this.style.cursor="default";
md=false;
if(document.all){
this.releaseCapture();
}else{
window.releaseEvents(Event.MOUSEMOVE|Event.MOUSEUP);
}
flyout(this);
}
}
}
function flyout(obj){
if(obj.offsetLeft<75){
if( (obj.offsetLeft + 350 - 20) > -275 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyout(id(''"+obj.id+"''));",0);
}else{
obj.style.left=-275;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
if(obj.offsetLeft>75){
if( (obj.offsetLeft + 350 + 20) < 1125 ){
obj.style.left=obj.offsetLeft + 350 + 20;
window.setTimeout("flyout(id(''"+obj.id+"''));",0);
}else{
obj.style.left=1125;
obj.style.zIndex=0;
flyin(id(obj.id));
}
}
}
function flyin(obj){
if(obj.offsetLeft<75){
if( (obj.offsetLeft + 350 + 20) < 425 ){
obj.style.left=obj.offsetLeft + 350 + 20;
window.setTimeout("flyin(id(''"+obj.id+"''));",0);
}else{
obj.style.left=425;
en=false;
}
}
if(obj.offsetLeft>75){
if( (obj.offsetLeft + 350 - 20) > 425 ){
obj.style.left=obj.offsetLeft + 350 - 20;
window.setTimeout("flyin(id(''"+obj.id+"''));",0);
}else{
obj.style.left=425;
en=false;
}
}
}
</script>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>啊！停不住的爱人</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>宁静温泉</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>你的样子</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>恋曲1980</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>恋曲1990</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>恋曲2000</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>亚细亚的孤儿</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>伴侣</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>童年</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>爱的箴言</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>爱人同志</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>思念</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>母亲</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>是否</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>牧童</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>青春舞曲</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>蒲公英</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>未来的主人翁</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>如今才是唯一</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>暗恋</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>弹唱词</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>飞车</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>东方之珠</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>滚滚红尘</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>光阴的故事</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.oern.cn>之乎者也</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>现象七十二变</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>乡愁四韵</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>穿过你的黑发我的手</a></li>
</ul>
</div>
<div>
<ul>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>大兵歌</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>歌</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>黄色面孔</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>台北红玫瑰</a></li>
<li><span>2009-4-9 12:35</span><a href=http://www.lanrentuku.com>我所不能了解的事</a></li>
</ul>
</div>
</body>
</html>
ajax实现鼠标拖动到底部自动加载新的数据的实例
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getcontextpath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/"; %> <!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></title> <Meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> * { margin: 0; padding: 0; } body { font-size: 12px; } p { margin: 5px; } .Box { padding: 10px; } </style> <!-- 引入jQuery --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.3/jquery.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).bind('scroll',function() { show() }); function show() { if ($(window).scrollTop() + $(window).height() >= $(document) .height()) { ajaxRead(); } } function ajaxRead() { var html = ""; $ .ajax({ type : 'get',dataType : 'jsonp',url : 'http://api.flickr.com/services/Feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',beforeSend : function() { console.log('loading...'); $("#msg").html('loading...'); },success : function(data) { $ .each( data.items,function(i,item) { html += '<divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">'; html += '<h1>' + item.title + '</h1>'; html += '<a hreft="'+item.link+'"><img src="'+item.media.m+'"/></a>' html += '<div>' + item.tags + '</div>'; html += '</div>'; }); $("#resText").append($(html)); },complete : function() { console.log('mission acomplete.') } }); } }) </script> </head> <body> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <p>往下拉</p> <div id="resText"></div> <divid="msg"></div> </body> </html>
AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】
本文实例讲述了AngularJS实现的鼠标拖动画矩形框。分享给大家供大家参考，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html {color: #000;overflow-y: scoll;overflow: -moz-scrollbars-vertical}
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {
margin: 0;
padding: 0;
overflow: hidden;
}
#longzhoufeng {
position: relative;
left: 0;
top: 0;
margin: 0 auto;
padding: 0;
width: 800px;
min-height: 800px;
overflow: auto;
height: 1000px;
background-color: #e9e9e9;
}
.dashed-box {
position: absolute;
border: 1px dashed red;
width: 0px;
height: 0px;
left: 0px;
top: 0px;
overflow: hidden;
}
#moving_box {
border: 2px solid red;
}
.question-box {
position: absolute;
/* older safari/Chrome browsers */
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter: alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
.question-border {
border: 2px dashed red;
overflow: hidden;
z-index: 1;
}
.del-box {
width: 20px;
height: 20px;
float: right;
color: #fff;
position: relative;
margin-top: 1px;
margin-right: 1px;
z-index: 99;
background-color: red;
}
.active-border {
border: 2px solid red;
-webkit-opacity: 0.5;
/* Netscape and Older than Firefox 0.9 */
-moz-opacity: 0.5;
/* Safari 1.x (pre WebKit!) 老式khtml内核的Safari浏览器*/
-khtml-opacity: 0.5;
/* IE9 + etc...modern browsers */
opacity: .5;
/* IE 4-9 */
filter: alpha(opacity=50);
/*This works in IE 8 & 9 too*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
/*IE4-IE9*/
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
}
.box-background-image {
position: absolute;
width: 1000px;
height: 1600px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.0.5/angular.min.js"></script>
<script>
var app = angular.module(''miniapp'', []);
function AppController($scope, $timeout) {
//阻止默认行为
function stopDefault(e) {
if(e && e.preventDefault)
e.preventDefault();
else
window.event.returnValue = false;
return false;
}
$scope.bgImg = ''1.jpg'';
$scope.getBoxPicSize = function() {
$scope.bgWidth = angular.element(".box-background-image").width();
$scope.bgHeight = angular.element(".box-background-image").height();
}
///////////////////////////////////////
var wId = "num";
var index = 0;
var target = null;
var startX = 0, startY = 0;
var flag = false;
var startL = 0, startT = 0, boxHeight = 0, boxWidth = 0;
var boxObj = document.getElementById("longzhoufeng");
var frame = $("#longzhoufeng");
var frameBox = {
"pos": frame.offset(),
"width": frame.outerWidth(),
"height": frame.outerHeight()
}
var newMarkPos = {
"left": startL,//按下时鼠标距离的左边的距离
"top": startT//按下时鼠标距离的上边的距离
}
var myEvent = $scope.myEvent = {
//鼠标点击
mouseDown: function(e) {
flag = true;
var e = window.event || e;
target = e.target || e.srcElement; //获取document 对象的引用
//e.pageY，e.pageX兼容
if(target.src) {
stopDefault(e)
}
var scrollTop = boxObj.scrollTop;
var scrollLeft = boxObj.scrollLeft;
var ePageX = e.clientX + scrollLeft;
var ePageY = e.clientY + scrollTop;
//按下时鼠标距离页面的距离
startX = ePageX;
startY = ePageY;
//按下时鼠标距离的左边和上边的距离
startL = startX - frameBox.pos.left;
startT = startY - frameBox.pos.top;
index++;
var div = document.createElement("div");
div.id = wId + index;
div.className = "dashed-box";
boxObj.appendChild(div);
div = null;
// 如果鼠标在 box 上被按下
if(target.className.match(/del-box/i)) {
// 允许拖动
flag = false;
// 设置当前 box 的 id 为 moving_box
var movingBox = document.getElementById("moving_box")
if(movingBox !== null) {
movingBox.removeAttribute("id");
}
target.id = "moving_box";
// removeBox(target);
} else {
var div = document.createElement("div");
div.id = wId + index;
div.className = "dashed-box";
boxObj.appendChild(div);
div = null;
}
},
//鼠标离开
mouseUp: function(e) {
var e = window.event || e;
if(boxWidth >= 1 || boxHeight >= 1) {
boxObj.removeChild(dragBox(wId + index));
index++;
var div = document.createElement("div");
div.className = "question-box question-border";
div.style.left = newMarkPos.left + "px";
div.style.top = newMarkPos.top + "px";
div.style.width = boxWidth + "px";
div.style.height = boxHeight + "px";
boxObj.appendChild(div);
div = null;
boxWidth = 0;
boxHeight = 0;
} else {
if(flag) {
boxObj.removeChild(dragBox(wId + index));
}
}
flag = false;
},
//鼠标移动
mouseMove: function(e) {
var e = window.event || e;
stopDefault(e)
if(flag) {
var scrollTop = boxObj.scrollTop;
var scrollLeft = boxObj.scrollLeft;
var ePX = e.clientX + scrollLeft;
var ePY = e.clientY + scrollTop;
var disW = ePX - startX;
var disH = ePY - startY;
var L = startL + disW;
var T = startT + disH;
if(disW > 0) {
if(L >= 0) {
boxWidth = disW
}
newMarkPos.left = startL;
} else {
if(L <= 0) {
L = 0;
boxWidth = startL;
}
boxWidth = (startL - L);
newMarkPos.left = L;
}
if(disH > 0) {
if(T >= 0) {
boxHeight = disH
}
newMarkPos.top = startT;
} else {
if(T <= 0) {
T = 0;
boxHeight = startT;
}
boxHeight = (startT - T)
newMarkPos.top = T;
}
dragBox(wId + index).style.left = newMarkPos.left + "px";
dragBox(wId + index).style.top = newMarkPos.top + "px";
dragBox(wId + index).style.width = Math.abs(boxWidth) + "px";
dragBox(wId + index).style.height = Math.abs(boxHeight) + "px";
if(e.srcElement.src) {
stopDefault(e)
}
}
}
}
var dragBox = function(id) {
return document.getElementById(id);
}
}
//等待图片加载完成
app.directive("loadImage", function() {
return {
restrict: ''A'',
link: function(scope, element, attrs) {
element.bind(''load'', function() {
scope.$apply(attrs.loadImage);
});
}
}
})
</script>
</head>
<body>
<div ng-app="miniapp" ng-controller="AppController">
<div>
<div id="longzhoufeng" ng-mousedown="myEvent.mouseDown($event)" ng-mouseup="myEvent.mouseUp($event)" ng-mousemove="myEvent.mouseMove($event)">
<img ng-src="{{bgImg}}"load-image="getBoxPicSize()">
</div>
</div>
</div>
</body>
</html>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》
希望本文所述对大家AngularJS程序设计有所帮助。
- angular使用md5,CryptoJS des加密的方法
- AngularJs中$cookies简单用法分析
- 基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
- angularjs实现table表格td单元格单击变输入框/可编辑状态示例
- AngularJS 中括号的作用详解
css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍
本文通过原生js，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3d立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
<body>
<input type="button"value="点击散开"/>
<input type="text"value="0"/>//X轴旋转角度
<input type="text"value="0"/>//Y轴旋转角度
<input type="text"/>
<p>
<p>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
</p>
</p>
</body>立即学习“前端免费学习笔记（深入）”；
CSS代码块：
<style>
body{cursor: url("img/openhand1.png"),auto;}
.big_box{
width: 500px;
height: 500px;
margin: 200px auto;
}
.box{
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
transform-origin:100px 100px 00px;
position: relative;
transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);
}
.box span{
transition: all 1s linear;
}
span{
display: block;
position: absolute;
width: 200px;
height: 200px;
box-sizing: border-box;
border:1px solid #999;
/*opacity: 0.7;*/
text-align: center;
line-height: 200px;
font-size: 60px;
font-weight: 700;
border-radius: 12%;
}
.box span:nth-child(1){
background-color: deepskyblue;
transform-origin: left;
transform: rotatey(-90deg) translatex(-100px);//左
}
.box span:nth-child(2){
background-color: red;
transform-origin: rightright;
transform: rotatey(90deg) translatex(100px) ;//右
}
.box span:nth-child(3){
background-color: green;
transform-origin: top;
transform: rotatex(90deg) translatey(-100px) ;//上
}
.box span:nth-child(4){
background-color: #6633FF;
transform-origin: bottombottom;
transform: rotatex(-90deg) translatey(100px);//下
}
.box span:nth-child(5){
background-color: gold;
transform: translatez(-100px);//后
}
.box span:nth-child(6){
background-color: #122b40;
transform: translatez(100px);//前
}
.box:hover span{
opacity: 0.3;
}
.box:hover{
animation-play-state:paused;//设置动画暂停
}
</style>立即学习“前端免费学习笔记（深入）”；
JS代码块：
<script>
move();
clickBox();
//鼠标按下且移动时触发，
function move(){
var body = document.querySelector("body");
var box = document.querySelector(".box");
var xNum =document.querySelector(".xNum");
var yNum =document.querySelector(".yNum");
var x = 0,y = 0,z = 0;
var xx = 0,yy = 0;
var xArr = [],yArr = [];
window.onmousedown = function (e) {//鼠标按下事件
body.style.cursor = 'url("img/closedhand1.png"),auto';
xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标
yArr[0] = e.clientY/2;
window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发
xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标
yArr[1] = e.clientY/2;
yy += xArr[1] - xArr[0];//获得鼠标移动的距离
xx += yArr[1] - yArr[0];
xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度
yNum.value = yy+"°";
//将旋转角度写入transform中
box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";
xArr[0] = e.clientX/2;
yArr[0] = e.clientY/2;
}
};
window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件，
body.style.cursor = 'url("img/openhand1.png"),auto';
window.onmousemove = null;
}
}
//点击事件、负责立方体盒子的六面伸展
function clickBox(){
var btn = document.querySelector(".open");
var box = document.querySelector(".box");
var son = box.children;
var value = 0;
//存储立方体散开时的transform参数
var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];
//存储立方体合并时的transform参数
var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];
btn.onclick = function(){
if(value == 0){
value = 1;
btn.value = "点击合并";
for(var i=0;i<arr1.length;i++){
son[i].style.transform = arr1[i];
console.log(son[i])
}
}else if(value == 1){
value = 0;
btn.value = "点击散开";
for(var j=0;j<arr0.length;j++){
son[j].style.transform = arr0[j];
console.log(j);
}
}
};
}
</script>立即学习“前端免费学习笔记（深入）”；
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。
以上就是css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍的详细内容，更多请关注php中文网其它相关文章！
Delphi DbgridEh实现鼠标拖动选中列，并使复选框选中
总结
以上是小编为你收集整理的Delphi DbgridEh实现鼠标拖动选中列，并使复选框选中全部内容。
如果觉得小编网站内容还不错，欢迎将小编网站推荐给好友。
我们今天的关于JS实现鼠标拖动分页和js鼠标拖动窗口的做法的分享已经告一段落，感谢您的关注，如果您想了解更多关于ajax实现鼠标拖动到底部自动加载新的数据的实例、AngularJS实现的鼠标拖动画矩形框示例【可兼容IE8】、css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍、Delphi DbgridEh实现鼠标拖动选中列，并使复选框选中的相关信息，请在本站查询。
本文标签：
