absolute

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... »

通过设置CSS中的position属性来固定层的位置

定义和用法 position 属性规定元素的定位类型。 说明 这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。 默认值: static 继承性: no 版本: CSS2 JavaScript 语法: object.style.position=”absolute&... »

jQuery实现仿新浪微博浮动的消息提示框(可智能定位)

本文实例讲述了jQuery实现仿新浪微博浮动的消息提示框。分享给大家供大家参考。具体如下: 这是一款jQuery实现的仿新浪微博新消息提示框效果,支持智能浮动定位框,新浪微博用来提示消息时候的智能定位框,可以适时关闭窗口,你完全可以将其应用到你网页的其它地方。 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-f-sina-weibo-info... »

jquery+CSS3实现淘宝移动网页菜单效果

本文实例讲述了jquery+CSS3实现淘宝移动网页菜单效果。分享给大家供大家参考。具体如下: 这是一款基于jquery+CSS3实现的淘宝移动网页菜单,其实这个菜单动画并不复杂,只有缩放和位移。难点是用了扇形结构,而且还要实现扇形的链接区域,这个就费脑筋了,最后采用了传统的图片map来做热区,效果还不错。相信肯定有更好的解决方法。 先来看看运行效果截图: 在线演示地址如下: http://dem... »

运用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... »

Position属性之relative用法

Relative是position的一个属性,是相对定位。 position的默认值是static,(也就是说对于任意一个元素,如果没有定义它的position属性,那么它的position:static) 如果你想让这个#demo里的一个div#sub相对于#demo定位在右上角的某个地方,应该给#demo相对定位,#sub绝对定位。 absolute是相对于自己最近的父元素来定位的,如果你不给... »

Page 1 of 7123»