absolute

js实现特别简单的钟表效果

本文实例为大家分享了js实现钟表效果的具体代码,供大家参考,具体内容如下 * .clock { position: relative; width: 200px; height: 200px; border: solid 14px rgb(247, »

纯js+css实现在线时钟

纯js+css实现在线时钟

本文实例为大家分享了js+css实现在线时钟的具体代码,供大家参考,具体内容如下 时钟 * .wrap{ position: absolute; width: 200px; height: 200px; border: 2px solid; background-color: pink; border »

HTML的relative与absolute使用及区别详解

HTML的relative与absolute区别:说实话html这门语言算的上是这个世界上最简单的一门语言了,标签语言嘛,就是标签多了点英文单词超多,不过都是有规律的比如文本类居中text-align:center;加粗text-weight:bold;.但是还是有一些比较难理解掌握标签和属性,就比如属性position,它是定位的一种方式代码如下: #div1{ position: relati... »

详解flex布局与position:absolute/fixed的冲突问题

之前笔者在开发项目的过程中就遇到了这个坑,flex布局与position:absolute/fixed的冲突问题。后来想到了解决办法,今天就与大家一起交流一下: 项目实战: 我们现在想做一个头部的导航栏,又想用fixed把它固定在上方,又想用弹性盒布局去设置它内部的样式,可是发现其中的弹性盒布局已经失效了。 HTML代码如下: <ul> <li>协会简介</li>... »

js实现简单放大镜效果

用js实现简单放大镜效果,供大家参考,具体内容如下此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边。这里的放大并不是真正的放大,而是等比例移动。 »

CSS之定位布局(position,定位布局技巧)

absolute脱离文档流,通过 top,bottom,left,right 定位。 »

css定位position引发的层级关系问题详解

relative:相对定位,相对自己原来的位置进行定位 fixed:绝对定位,相对浏览器窗口进行定位由position引起的层级关系问题首先我们要知道,css属性其实是一个立体空间有x,y,z轴,但是只有我们使用了position定位时,z轴上的层级关系才体现出来,即z-index这个属性仅定位元素才有。 »

js轮播图

作为一个前端,如果不会写一个小插件,都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库,否则装得不够高端。那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦。以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了。不过,也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的js... »

js轮播图

作为一个前端,如果不会写一个小插件,都不好意思说自己是混前端界的。写还不能依赖jquery之类的工具库,否则装得不够高端。那么,如何才能装起来让自己看起来逼格更高呢?当然是利用js纯原生的写法啦。以前一直说,掌握了js原生,就基本上可以解决前端的所有脚本交互工作了,这话大体上是有些浮夸了。不过,也从侧面说明了原生js在前端中占着多么重要的一面。好了。废话不多说。咱们就来看一下怎么去做一个自己的js... »

在这里插入图片描述

用js实现简单放大镜效果

用js实现简单放大镜效果此处放大镜实现的效果就是当鼠标放置在图片上会有半透明遮罩,图片的一个区域就会被放大,然后展示在右边。这里的放大并不是真正的放大,而是等比例移动。 »

flex居中

学会这三种方法css居中,已经够你用啦

我们在使用css来布局时经常需要进行居中,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,利用css来实现对象的垂直居中有许多不同的方法,比较难的是应该选择哪种正确的方法。比如我们都知道 margin:0 auto;的样式能让元素水平居中,而margin: auto;却不能做到垂直居中……下面就css居中的一些常用方法做个集中的介绍。新建一个前端学习qun438905713,在群里... »

CSS中关于绝对定位和相对定位

body {margin: 30px; font-size:9pt;} .a, .b, .c, .d, .e {    width: 100px;    height: 100px;    margin: 5 auto;    color: #fff;    background: #000; } .aa, .bb, .cc, .dd, .ee {    top: 10px;    left: 1... »

CSS 定位详解

CSS 定位详解

CSS 有两个最重要的基本属性,前端开发必须掌握:display 和 position。 display属性指定网页的布局。两个重要的布局,我已经介绍过了:弹性布局flex和网格布局grid。 本文介绍非常有用的position属性。我希望通过10分钟的阅读,帮助大家轻松掌握网页定位,说清楚浏览器如何计算网页元素的位置,尤其是新引进的sticky定位。 本文由国内最大的在线教育平台之一”... »

javascript实现的一个图片转移效果

javascript实现的一个图片转移效果

应网友要求修改一个图片转移效果 一个比较漂亮的效果,只是在增加图片效果时有些麻烦。今天应网友的要求,对 JS 进行了更改。使大家在对图片添加删除更加容易。在这里主要对以下几点详细说明一下。 var firstnum = 1; var secnum = 2;  var tounum=1;&n... »

运用js教你轻松制作html音乐播放器

用HTML做了个音乐播放器,可以循环播放,选择歌曲,以及自动播放下一首,运用了js和json知识,下面是效果图和源码,有兴趣的可以试试哦效果图:源码:html 音乐播放器 * .page { position: absolute; wid »

jQuery实现边框动态效果的实例代码

话不多说、静态效果图如下实代码如下 .myDiv .topLine .bottomLine .leftLine .rightLine 总结以上就是这篇文章的全部内容了,刚兴趣的朋友们可以自己动手操作下看看动态效果,真的非常不错,希望对大家的学习或者工作能有一定的帮助。如果有疑问大家可以留言交流,小编会尽快给大家回复。 »

jQuery制作圣诞主题页面 更像是爱情影集

今天制作的是有飘雪效果的圣诞主题页面,个人灰常喜欢。 首先还是放张效果图:  当看到这这页面的时候我们要注意四点: 1.图片的轮播 2.文字的滚动效果 3.音乐播放 4.飘雪效果  那我们就一点一点来完成吧,Go,Go!  对于上次分享的有人说我讲的不够细致,那在这篇文章我就细致一点。  (1)准备工作 首先新建css,img,js,file这四个文件夹并新... »

jQuery实现的跨容器无缝拖动效果代码

本文实例讲述了jQuery实现的跨容器无缝拖动效果。分享给大家供大家参考,具体如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">... »

三种带箭头提示框总结实例

无论是提示框还是导航栏都能看到如上图所示的带有箭头的框框,这种箭头可以通过背景图片或者是css来实现,本文介绍三种通过css实现带箭头的提示框。 1.通过border属性 思路:两个三角形,通过定位使两个三角形相差1px作为边框。 2.CSS3 transfrom 思路:先做一个两条边相同颜色的正方形,然后旋转一定角度就是三角形了 3.特殊字符’♦’ 思路:特殊... »

javascript HTML5 Canvas实现圆盘抽奖功能

我们经常参加各种电商优惠活动,比如购买达到一定数额进行抽奖活动,在比如微信抽奖,淘宝抽奖,迅雷赚钱宝圆盘抽奖活动等。这些抽奖活动部分就是由HTML5的Canvas来制作的,今天就为大家分享一下如何使用HTML5的Canvas来制作圆盘抽奖功能。老规矩,先看下效果图吧: 再来看看Canvas的几个主要api:   全部源代码如下: <!DOCTYPE html> <htm... »

javascript拖拽效果延伸学习

本文总结一下,拖拽所延伸出来的一些效果,供大家参考,具体内容如下 1.实现拖拉图片时,带框的效果。即当鼠标拖动某一个图片或物体时,其原有位置扔保留其型。 这种效果,其实很简单,主要是另外创建一个物体,使其与被拖拽的物体,宽和高一样,然后,将其变为拖拽的对象。 直接上代码: <html <head> <style> #div1 {width:100px; height:... »

js解决movebox移动问题

本文为大家分享了js解决movebox移动问题,并且取消图片默认拖动事件的相关操作,供大家参考,具体内容如下 html: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <link href=".... »

基于jQuery实现收缩展开功能

本文实例向大家分享了一款基于jQuery实现收起展开功能特效,供大家参考,具体内容如下 效果图: 点击倒三角可以进行展开操作 具体代码: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><meta name="viewport" conten... »

jQuery实现图片局部放大镜效果

下图只是给大家举个例子,类似于这种效果图: 具体实现过程请看下文代码: css .zoomPad{ position:relative; float:left; z-index:99; cursor:crosshair; } .zoomPreload{ -moz-opacity:0.8; opacity: 0.8; filter: alpha(opacity = 80); color: #333;... »

jQuery+ajax实现文章点赞功能的方法

本文实例讲述了jQuery+ajax实现文章点赞功能的方法。分享给大家供大家参考,具体如下: 前几日有童鞋问我索要本站右上角的点赞功能,麦葱左思右想,决定把这功能分享出来,希望此功能对各位会带来方便哦。 代码很简单,jQuery+php实现的。 jQuery代码: jQuery(document).ready(function($) { $(".zan").click(function(e){ v... »

Page 1 of 7123»