JavaScript
muzi187
这个作者很懒,什么都没留下…
展开
-
Object.defineProperty()
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body> <div id="root"> </div> <sc.原创 2021-11-26 11:21:43 · 208 阅读 · 0 评论 -
js实现文字向上无缝滚动
向上无缝滚动body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul { list-style: none;原创 2017-05-15 11:03:31 · 3238 阅读 · 0 评论 -
鼠标移入时显示,移除时隐藏
1、匀速运动动画body,div,span{ margin:0; padding:0;}#div1{ width:200px; height:200px; background:red; position:relative; left:-200px; top:0;}#div1 span{ width:20px; height:50px; backgro原创 2017-05-06 14:32:11 · 2872 阅读 · 0 评论 -
js实现-新闻间歇性向上无缝滚动
新闻间歇性向上无缝滚动body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */}* { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */}ul { list-style: non原创 2017-05-15 11:33:02 · 5162 阅读 · 2 评论 -
js实现-商城分类导航效果
window.onload=function(){ var Lis=document.getElementsByTagName("li"); for(i=0;i<Lis.length;i++){ Lis[i].i = i; Lis[i].onmouseover=function(){ this.className="lihover"; var h0 = (this.i原创 2017-05-17 17:00:27 · 10353 阅读 · 0 评论 -
div有border时不能用offsetWidth获取div宽度
动画body{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000;} window.onload=fu原创 2017-05-10 14:39:55 · 758 阅读 · 0 评论 -
瀑布流布局
1、页面布局及样式 *{padding: 0;margin:0;} #main{ position: relative; } .box{ padding: 15px 0 0 15px; float:left; } .pic{ padding: 10px; b原创 2017-08-07 13:58:52 · 345 阅读 · 0 评论 -
制作淘宝搜索框,js选择店铺、宝贝
1、仿照淘宝制作搜索框。可以选择店铺或者宝贝示例图为 taobao demo @font-face{font-family:iconfont;src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont.eot);src:url(http://g.tbcdn.cn/tb/icon-font/1.1.5/iconfont原创 2017-08-16 15:29:15 · 1505 阅读 · 0 评论 -
模拟天猫--网页定位导航效果
分为左右两部分左侧内容,右侧炫富的导航菜单左侧滚动时,右侧内容不改变位置点击右侧链接,左侧定位到相应栏目左侧滚动到相应栏目,右侧定位到对应链接锚点(anchor):锚点是网页制作中超链接的一种,又叫命名锚记。锚点是一种页面内的超级链接jQuery事件:1、scroll([data],fn):当用户滚动指定的元素时,会发生scroll事件适用于所有可滚动的元素和windo原创 2017-08-01 16:57:37 · 1223 阅读 · 0 评论 -
必应搜索框制作 搜索提示 jQuery及JavaScript实现
注:学习慕课网前端开发课程《搜索框的制作》搜索提示 jQuery及JavaScript实现利用fiddler工具将文件放到某域下进行调试 利用fiddler将本地网页放到某个域下 bing search body{background-color: #333;margin:0;padding:0;} .bg-div{position:relative;b原创 2017-08-11 17:10:44 · 1243 阅读 · 0 评论 -
js实现一键复制
地址:http://pan.baidu.com/s/1mi3iAgS 复制粘贴 复制 //这里的参数说明一下,text是要复制的文本内容,button是点击触发复制的dom对象,msg是复制成功后的提示信息,parent是包含flash的父元素func原创 2017-11-03 14:37:53 · 1549 阅读 · 0 评论 -
js实现限时抢倒计时
团购——限时抢还剩 function FreshTime(){ var endtime=new Date("2017/5/15,12:20:12");//结束时间 var nowtime = new Date();//当前时间 var lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); d=par原创 2017-05-15 10:17:50 · 1221 阅读 · 0 评论 -
js高考倒计时
高考倒计时 距离2017年高考还有天 window.onload = function(){ var timedate= new Date("6,6,2017"); var now = new Date(); var date = timedate.getTime() - now.getTime(); //得出的为毫秒原创 2017-05-13 17:33:33 · 3287 阅读 · 0 评论 -
使用js转化画布与图片(canvas与img)
1、使用JavaScript将图片拷贝进画布将图片放入画布里,使用canvas元素的drawImage方法即可:// Image to canvas; returns new canvas elementfunction ImageToCanvas(image) { var canvas = document.createElement("canvas"); canvas.width =原创 2016-11-03 11:59:17 · 11148 阅读 · 0 评论 -
事件处理程序&&事件对象
一、事件流事件流描述的是从页面中接受事件的顺序。IE的事件流是事件冒泡流,而Netscape的事件流是事件捕获流1、事件冒泡事件冒泡,即事件最开始由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上转播至最不具体的节点(文档)。2、事件捕获事件捕获的思想是不太具体的节点应该更早接收到事件,而最具体的节点最后接收到事件。二、事件处理程序1、HTML事件处理原创 2016-11-24 11:52:23 · 510 阅读 · 0 评论 -
js模拟QQ面板拖拽效果及状态切换效果(DOM事件)
利用js的DOM事件模拟QQ面板的拖拽效果,以及QQ面板的状态切换效果 拖动 帐 号: 密 码:原创 2016-12-13 10:51:53 · 902 阅读 · 0 评论 -
键盘事件模拟抽奖
键盘事件KeyDown:当用户按下键盘上的任意键时触发,而且如果按住不放的话,会重复触发此事件。KeyPress:当用户按下键盘上的字符键时触发,而且如果按住不放的话,会重复触发此事件。KeyUp:当用户释放键盘上的键时触发。EVEVT对象的keyCode属性用于得到键盘对应键的键码值图片分别为刚进入页面,正在抽奖,点击停止后html 抽奖原创 2016-12-17 16:07:42 · 370 阅读 · 0 评论 -
判断浏览器是否为微信浏览器
php判断判断语句插入在html语句中if (strpos($user_agent, 'MicroMessenger') === false) { //非微信浏览器}else{ //微信浏览器}js判断window.onload = function(){ if(isWeiXin()){ //是微信 }}function isWeiXi原创 2017-01-13 12:29:16 · 372 阅读 · 0 评论 -
js多物体不同运动
动画body{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000;} window.onload=function(){ var原创 2017-05-11 17:22:58 · 303 阅读 · 0 评论 -
js物体链式运动
动画body{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000; filter:alpha(opacity:30); opacity:0原创 2017-05-12 11:34:43 · 300 阅读 · 0 评论 -
js运动--同时运动框架
动画body{ margin:0; padding:0;}ul,li{ list-style:none;}ul li{ width:200px; height:100px; background:yellow; margin-bottom:20px; border:4px solid #000; filter:alpha(opacity:30); opacity:0原创 2017-05-12 12:14:22 · 296 阅读 · 0 评论 -
js物体运动-图标向上运动再从下方出现运动到原位置
图标动画效果演示*{margin: 0;padding: 0;}#move{height:200px;width:300px;margin: 10px auto;background: #eee;border: 1px solid #ccc;}#move a{display:inline-block;height:25px;width:58px;background: #fff;margi原创 2017-05-12 16:44:37 · 682 阅读 · 0 评论 -
js输出当前系统时间
当前系统时间 显示时间的位置window.onload = function(){ showTime();}function checkTime(i){ if (i<10) { i="0" + i; } return i;}function showTime(){ var now=new Date(); var year=now.getFullYear(原创 2017-05-13 17:12:58 · 1069 阅读 · 0 评论 -
根据经纬度在地图上定位
GPS经纬度坐标偏移问题。这个是由于中国要求对经纬度进行加密导致的,所以百度和Google的地图上都存在这个问题,即使用手持设备或者导航设备获取到的经纬度在地图上定位发现并不是对应的位置,而存在很大的偏移。无偏移精准定位*{margin:0px;padding:0px;}html, body {height: 100%;} body, button, i原创 2016-11-10 09:00:02 · 8227 阅读 · 1 评论