Html+css+javascript

ywhluck

ywhluck|常见的工具条效果

发布于 昨天 16:01 浏览:71 类型:原创 - 随笔 分类:JavaScript 举报

1.二维码展示功能;2.“回到顶部”功能。(选择“全屏预览”,滑动滚动条,查看回到顶部功能)index.html效果预览<!doctypehtml><htmllang="zh-CN"><head><metacharset="utf-8"/><title>工具条</title><scripttype="text/javascript"src="https://code.jquery.com/jquery-3.1.1.min.js"></script><styletyp ...

AlexanderYeah

AlexanderYeah|闲来无事,老白写一个全屏轮播图,望指教!

发布于 2017-02-21 14:20:16 浏览:304 类型:原创 - 随笔 分类:HTML/CSS 举报

简单的轮播,JQ使用..html代码效果预览<html><head><metacharset="UTF-8"><title>全屏无缝轮播图</title><styletype="">*{margin:0;padding:0;list-style:none;}.banner{width:100%;height:403px;background:pink;position:relative}.bannerul{width:500%;left:0;top:0;positi ...

闲来无事,老白写一个全屏轮播图,望指教!
IT白菜哥

IT白菜哥|个人经验与理解总结3

发布于 2017-02-14 17:57:11 浏览:621 类型:原创 - 随笔 分类:JavaScript 举报

23.两行文本内容超出省略隐藏div{word-break:break-all;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;//数值为3,则超出3行内容隐藏overflow:hidden;} ...

ywhluck

ywhluck|小游戏-打地鼠(js版)

发布于 2017-02-12 12:12:39 浏览:327 类型:原创 - 随笔 分类:HTML/CSS 举报

index.html效果预览<!doctypehtml><html><head><metacharset="utf-8"><title>打地鼠</title><styletype="text/css">#content{width:960px;margin:0auto;text-align:center;margin-top:40px;}#form1{margin:20px0;}table{margin:0auto;cursor:url(http://cdn. ...

前端chaimens

前端chaimens|增加数字显示的环形进度条

发布于 2017-02-05 16:49:58 浏览:283 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><link><metaname="page-view-size"content="640*530"><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"></head><style>.wapper{position:absolute;left:100px;top:10 ...

IT白菜哥

IT白菜哥|个人经验与理解总结2

发布于 2017-01-22 14:41:15 浏览:426 类型:原创 - 随笔 分类:HTML/CSS 举报

11.给未来元素绑定事件,使用on。如:$('.select-result).on('click','#selectA',function(){}),其中$('.select-result')是非动态生成父级,#selectA是动态生成的子级元素。即写法为$('非动态生成父级元素').on('操作事件','动态生成的子级元素',function(){方法});12.<metaname="format-detection"content="telephon ...

与码共舞

与码共舞|我的前端之路

发布于 2017-01-22 09:25:43 浏览:1036 类型:原创 - 随笔 分类:面试经验 举报

之前一直做的是百度竞价之类的工作,在2016年六月份在朋友的支持下,果断的辞掉了手上的工作。去了某家培训机构去学习前端,在十一月份进入了现在的公司,前几天公司领导找我谈话,因为面试的时候吹了点,工作的时候有的不会,会问一下同事,下个月也要转正了。领导觉的我技术跟面试有点差距,感觉想让我走,说让我单独做 ...

Sup_

Sup_|freeCodeCamp上的Random Quote Machine(随机引用器)

发布于 2017-01-07 21:50:18 浏览:182 类型:原创 - 教程 分类:JavaScript 举报

html代码效果预览<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="content-type"content="text/html;charset=UTF-8"/><title>Sup_</title><!--<linkhref="style.css"rel ...

hyperh5

hyperh5|JS类似于黑客帝国字幕(原生JS)

发布于 2017-01-06 20:15:52 浏览:229 类型:原创 - 随笔 分类:JavaScript 举报

前几天看到有朋友发了个黑客帝国的代码,不过是用canvas画的,小弟的canvas功底实在有限,结合面向对象也就只能画出一个不会动的物体。所以自己就单纯用面向对象写了一个类似于黑客帝国的代码。代码还有一些问题,所以只能用谷歌浏览器才能看得出效果,希望论坛里有大神可以帮我看一下有哪些地方可以改进;html代码效果预 ...

hyperh5

hyperh5|原生自动版卖机

发布于 2017-01-05 12:20:54 浏览:393 类型:原创 - 随笔 分类:JavaScript 举报

本代码是用面向过程编写,这两天会整理封装一个面向对面的版本。刚接触w3cfun,笔记写的不是很好,需要看完整的代码可以下载附件查看,如有改进的地方请指正,谢谢!自动贩卖机需求如下:1.贩卖机分三个部分,购买区域,投币区域和出货区域2.购买区域是3*4的商品网格,每个网格包含商品图片和一个购买按钮3.投币区 ...

wishuice

wishuice|简单的动态导航

发布于 2017-01-04 17:23:38 浏览:2259 类型:原创 - 随笔 分类:HTML/CSS 举报

写个笔记就和改bug一样麻烦html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"><metaname="apple-mo ...

FJH30

FJH30|小白!关于JS的知识,请各路大神指教

发布于 2016-12-27 16:42:06 浏览:433 类型:原创 - 随笔 分类:JavaScript 举报

今天我写了个JS代码,这里我就不写出来了,不过我就举个例子!例如:一个回到顶部图标!!我在CSS里面定义了display:none;然后在JS里定义了,当下拉到一定高度就会出现(display:block)..大致的代码是这样:::window.onload=function(){vartop=document.getElemen ...

认真你就输了丶

认真你就输了丶|CSS3实现的开关(非常逼真)

发布于 2016-12-21 21:06:21 浏览:3511 类型:原创 - 随笔 分类:HTML/CSS 举报

html代码效果预览<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><title>开关</title><styletype="text/css"media="screen">html,body{width:100%;height:100%;margin:0;padding:0;background:#ca9f6a;background: ...

taishanuni12

taishanuni12|兼容所有浏览器-圆形加载条

发布于 2016-12-21 13:28:46 浏览:342 类型:原创 - 随笔 分类:JavaScript 举报

这篇笔记是鄙人用通过将不同状态图片定位不同,使用setInterval设置了一个定时器,在条件不满足情况下,使用clearInterval清除,希望大家多多发表留言。。。html部分<divclass="company-righttext-right"><divid="load"class="loadingNewtext-center"></div><divclass="iw_company_ ...

兼容所有浏览器-圆形加载条
qq120qqii

qq120qqii|Jquery自动判断多少li轮播

发布于 2016-12-17 11:59:00 浏览:271 类型:原创 - 随笔 分类:JavaScript 举报

公司做项目需要用到轮播效果,但美工切图都是用ul进行包裹起来多个li标签,然后以ul进行轮换。调取数据时需要进行判断。html代码效果预览<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd"><html><head><metahttp-equiv="Content-Type"content="text/html;c ...

sl2782087

sl2782087|真正的抽奖都是有猫腻的,转盘抽奖demo改良版。

发布于 2016-12-12 17:41:04 浏览:469 类型:原创 - 随笔 分类:HTML/CSS 举报

最近公司有让做一个抽奖转盘,正好看了@1292150917a的抽奖系统(逻辑)代码以打好拿走就是用,有所启发。不过公司要求抽奖是可控制的,就是说不同奖品获得的概率不能相同,像特等奖这种的最好就不要有人能抽中,于是改良了一下@1292150917a兄弟的代码,模拟出一个可以控制概率的抽奖活动(其实抽奖的逻辑是后端实现的,我 ...

1292150917a

1292150917a|3D旋转相册(适合新手)

发布于 2016-12-01 13:56:12 浏览:1171 类型:原创 - 随笔 分类:JavaScript 举报

3D旋转相册完美代码效果预览<!DOCTYPEHTML><htmlonselectstart="returnfalse"><head><metacharset="utf-8"><title>3D拖拽相册</title><style>html,body{width:100%;height:100%;overflow:hidden;cursor:url("img/sb.png"),auto; ...

xiaolongyuanzi

xiaolongyuanzi|PC端页面布局,样式,JS的一些小问题

发布于 2016-11-29 12:00:03 浏览:333 类型:原创 - 随笔 分类:HTML/CSS 举报

真正工作了才知道自己和专业人士差了多少啊边工作边踩坑,一遍吐血的提高自己。。。不停歇的记录中。。。一、样式里面有很多的坑啊~(基础不扎实的我,踩坑记)1。老司机同事给我普及的那些套路~~~adisplay和float两个属性在同一个元素上作用时,float会直接屏蔽掉display的inline-block之类的样式,会让inline-block没 ...

Emperor征服

Emperor征服|无缝轮播图

发布于 2016-11-27 20:37:47 浏览:1830 类型:原创 - 随笔 分类:JavaScript 举报

<!DOCTYPEhtml><html><head><metacharset="utf-8"><title></title><styletype="text/css">&nbs ...

最近做一个管理系统的项目,项目里面有图片查看的界面,先是图片缩略图,点击图片缩略图后再当前iframe范围内显示该图片及其内容介绍,再接着点击带有内容的显示的图片后会有一个全屏弹出层弹出,此时的图片是自适应全屏显示的(高度与所在电脑分辨率的高度一致,而且图片的宽度是随其高度而等比例变化的),于是乎我在网上 ...