威尼斯www.9778.com-威尼斯正版官方网站

JS+CSS实现Li列表隔行换色效果的方法_javascript技巧_脚本之家

日期:2020-01-01编辑作者:服务器&运维

本文实例讲述了JavaScript实现文字与图片拖拽效果的方法。分享给大家供大家参考。具体实现方法如下:

本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下:

  提起拖拽,我就想起了在JavaScript培训的时候一个非常好玩的效果,那就是拖拽了。可以用鼠标任意拖拽着一个物体到任何你想去的地方。

复制代码 代码如下:

复制代码 代码如下:

  最早拥有JavaScript拖拽功能的是IE4浏览器。当时,网页中只有两种对象是可以拖拽的,那就是:图形和某些文字。拖拽图像的时候,把鼠标放在图像上,按住鼠标不放就可以拖拽了。拖拽文字时,要先选中文字,然后可以像拖动图像那样拖拽选中的文字。在IE4中,唯一有效的放置拖拽文字的目标是文本框。到了IE5.5更进一步,让网页中的任何元素都可以拖拽(IE6以上也支持这些功能了)。随着浏览器一点点更新换代,随着IE7IE8以及其他浏览器的诞生,网页中所有东西都可以拖拽了,只不过是通过JavaScript程序来实现的。下面就是没有HTML5的时候,拖拽的实现小例子。

JavaScript实现文字与图片的拖拽效果

CSS+Js实现Li列表隔行换色效果

  HTML代码

图片 1
图片可以拖动

  • JavaScript实现文字与图片拖拽效果的方法
  • jQuery实现点击图片翻页展示效果的方法
  • php实现递归与无限分类的方法
  • php实现多维数组中每个单元值翻倍的方法
  • php数组添加与删除单元的常用函数实例分析
  • JS+CSS实现可拖动的弹出提示框
  • js实现下拉框选择要显示图片的方法
  • js实现点击图片将图片地址复制到粘贴板的方法
梦龙小站

脚本之家
拖动链接也可以

希望本文所述对大家的javascript程序设计有所帮助。

  JavaScript代码

希望本文所述对大家的javascript程序设计有所帮助。

window.onload = function(){
 var oDiv = document.getElementById('div1');
 var disX = 0;
 var disY = 0;

 oDiv.onmousedown = function(ev){
  var ev = ev || window.event;
  disX = ev.clientX - oDiv.offsetLeft;
  disY = ev.clientY - oDiv.offsetTop;

  //在IE下,如果选中元素拖拽就会有问题 : IE设置全局捕获:setCapture 释放全局捕获:releaseCapture
  if(oDiv.setCapture){
   oDiv.setCapture();
  }

  document.onmousemove = function(ev){
   var ev = ev || window.event;
   oDiv.style.left = ev.clientX - disX + 'px';
   oDiv.style.top = ev.clientY - disY + 'px';
  };

  document.onmouseup = function(){
   document.onmousemove = null;
   document.onmouseup = null;
   if(oDiv.releaseCapture){
    oDiv.releaseCapture();
   }
  };

  //在标准浏览器下如果拖拽一个空的标签,就会有问题 : return false
  //在标准浏览器下拖拽图片会有问题:return false
  return false;
 };

};

  CSS代码

li{ width:100px; height:30px; border:1px #000000 solid; margin:20px; list-style:none;}
#div1{ width:100px; height:100px; background:red; margin:300px;}

  直到HTML5的出现。HTML5是以IE为基础制定了拖拽规范。支持原生拖拽的浏览器有:Chrome、Safari 3+和Firefox 3.5+。

  HTML5中的拖拽,可以在窗口间、框架间,甚至在应用间进行完美拖拽。浏览器对拖拽的支持为实现这一功能实现了便利。

  HTML5实战与剖析之原生拖拽(一)——拖拽历史概述,就为大家介绍到这里了。有了HTML5拖拽,就可以实现很多非常绚丽的效果了。更过有关HTML5的更新敬请关注梦龙小站。

...

本文由威尼斯www.9778.com发布于服务器&运维,转载请注明出处:JS+CSS实现Li列表隔行换色效果的方法_javascript技巧_脚本之家

关键词:

建议27:明晓类公共领域的方法都是虚方法

本文实例讲述了js实现下拉框选择要显示图片的方法。分享给大家供大家参考。具体实现方法如下: 众所周知,在C...

详细>>

JS+CSS实现可拖动的弹出提示框

本文实例讲述了JS+CSS实现可拖动的弹出提示框。分享给大家供大家参考。具体实现方法如下: JS+CSS实现可拖动的弹出...

详细>>

JS+CSS实现Li列表隔行换色效果的方法

本文实例讲述了JS+CSS实现Li列表隔行换色效果的方法。分享给大家供大家参考。具体实现方法如下: JS+CSS实现Li列表隔...

详细>>

jQuery is函数用法3例_jquery_脚本之家

jQuery提供了is(卡塔尔方法能够很有益于的论断成分是或不是可知,是或不是隐伏,是或不是选中。 生龙活虎、推断元...

详细>>