图形的滚动及颜色区域的拉移
2018-06-24 01:09:46来源:未知 阅读 ()
首先准备两个盒子:
<div id = "oDiv" style = "top:40px;" class = "box"> <div id = "ldiv" style="height:30px ;background: chartreuse "></div> </div>
再写样式:
body{
width: 2000px;
height: 2000px;
}
.box{
width: 150px;
height: 200px;
position: absolute;
right: 20px;
border: 1px solid red;
}
.aff{
transition:all 1s;
}
最后是js代码部分:
function scrollEvent(obj,xEvent,fun){ if(obj.attachEvent){ obj.attachEvent("on"+xEvent,fn); } if(obj.addEventListener){ obj.addEventListener(xEvent,fn, true);//addEventListener w3c标准。 } } window.onload = function (){ dom.addClass($("oDiv"),"aff"); var top = $("oDiv").style.top; top = parseInt(top); scrollEvent(document,"scroll",function(){ var scrollTop = document.documentElement.scrollTop||window.pageYOffset||document.body.scrollTop; var h = scrollTop+top+"px"; $("oDiv").style.top = h; }); $("lDiv").onmousedown = function(){ dom.removeClass($("oDiv"),"aff"); var ev = window.event||event; var sjw = ev.clienX - $("oDiv").offsetLeft; var sjw = ev.clienY - $("oDiv").offsetTop; document.onmousemove = function(){ ev = window.event||event; var x = ev.clienX; var y = ev.clienY; $("oDiv").style.left = (x-sjw)+"px"; $("oDiv").style.top = (y-sjw)+"px"; } } $("lDiv").onmouseup = function(){ dom.addClass($("oDiv"),"aff"); document.onmousemove = null; } }
演示效果:http://localhost:63342/demo/work7.html
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- javascript如何获取图片颜色 2020-03-08
- JS实现table表格固定表头且表头随横向滚动而滚动 2020-02-07
- Js实现滚动变色的文字效果 2020-01-07
- 页面刷新时记住滚动条的位置jquery代码 2019-12-06
- SuperSlide2实现图片滚动特效 2019-11-27
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash