【点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）】的更多相关文章

点滴积累【JS】---JS小功能(offsetLeft实现图片滚动效果）

效果: 代码: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 245px; height: 150px; background: red; margin: 250px; margin-left: 500px; position: absolute; overflow: hidden; } #div1 ul li…

JS类小功能

工作中,总是要处理一些前端的小功能.都是网上搜的JS脚本 <script> //防止页面后退 history.pushState(null, null, document.URL); window.addEventListener('popstate', function () { history.pushState(null, null, document.URL); }); </script> 判断是否微信浏览器,相应显示与隐藏html元素 <script type=&q…

Magnifier.js - 支持鼠标滚轮缩放的图片放大镜效果

Magnifier.js 是一个 JavaScript 库,能够帮助你在图像上实现放大镜效果,支持使用鼠标滚轮放大/缩小功能.放大的图像可以显示在镜头本身或它的外部容器中.Magnifier.js 使用Event.js 作为跨浏览器的事件处理器.支持的浏览器:Chrome, Firefox, Safari, IE 7, 8, 9 & 10. 您可能感兴趣的相关文章 10大流行 Metro UI Bootstrap 主题和模板 精选12款优秀 jQuery Ajax 分页插件和教程 10大流行的…

点滴积累【JS】---JS小功能（JS实现匀速运动）

效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: #0000FF; position: absolute; left: 8…

点滴积累【JS】---JS小功能（onmousedown实现鼠标拖拽div移动）

效果: 思路: 利用onmousedown事件实现拖拽.首先获得鼠标横坐标点和纵坐标点到div的距离,然后当鼠标移动后再用可视区的距离减去横纵坐标与div的距离.然后在判断不让DIV移出可视区,然后再赋予DIV的位置.最后关闭鼠标onmouseup事件. 代码: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 20…

点滴积累【JS】---JS小功能（onmousemove鼠标移动坐标接龙DIV)

效果: 思路: 利用onmousemove事件,然后获取鼠标的坐标,之后把DIV挨个遍历,最后把鼠标的坐标赋给DIV. 代码: <head runat="server"> <title></title> <style type="text/css"> div { width: 20px; height: 20px; background: #00FFFF; position: absolute; } </styl…

点滴积累【JS】---JS小功能（JS实现模仿微博发布效果)

效果: 思路: 利用多功能浮动运动框架实现微博效果,首先,将textarea中的属性添加到新创建的li里面然后,再将li添加到ul里面,再利用浮动运动框架将数据动态的显示出来. 代码: <head runat="server"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #ul1 { width: 300px; height…

点滴积累【JS】---JS小功能（JS实现多功能缓冲运动框架)

效果: 思路: 首先,多功能框架实现的功能是:css中所有的属性都可以添加进去(也可以把方法作为参数传递过去!),然后进行缓冲运动,比如:物体的高度.长度.颜色.字体大小.透明度等,都可以直接传入参数然后进行运动,简单的说是利用json字符串把数据拼接起来,然后进行传参,参数传入进去到函数以后,根据参数的对象,还有属性,还有函数方法,然后再利用setInterval进行缓冲运动,最后判断运动什么时候结束.有一点要注意的是先用getStyle方法获取非行间样式!!! 代码: <head id=&quo…

点滴积累【JS】---JS小功能（JS实现隐藏显示侧边栏，也就是分享栏的隐藏显示）

效果: 思路: 首先,利用计时器setInterval实现DIV的隐藏显示功能,然后在进行一个判断,之后在把要移动的相应距离进行一个参数传递,再根据参数判断出移动的方向也就是offsetLeft移动的方向,是正或者是负.最后利用onmouseover和onmouseout,实现DIV的事件. 代码: <head runat="server"> <title></title> <style type="text/css">…

点滴积累【JS】---JS小功能（createElement和insertBefore添加div下面的节点）

效果: 代码: <head runat="server"> <title></title> <script type="text/javascript"> window.onload = function () { var oul = document.getElementById('ull'); var obtn = document.getElementById('btn'); var ot1 = document…