前端 - 随笔分类 - yuan9580

鼠标移到图片上图片放大【css3实例】

摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #div1{ width: 200px; height: 138px; border: #000 solid 1p 阅读全文

posted @ 2020-09-26 09:33 yuan9580 阅读(130) 评论(0) 推荐(0)

video标签-实现点击预览图播放或暂停视频

摘要：点击视频预览图实现播放或暂停视频首先要设置video的预览图，这时<video> 中的poster属性很好的完成了这个工作。关于视频的播放控制需要用到video的dom事件，这里先不详述了，以后有机会再将其详细属性搬运过来。这里主要运用到了play() ；pause()这两个事件。下面是一个自己阅读全文

posted @ 2019-11-14 14:35 yuan9580 阅读(2463) 评论(0) 推荐(0)

flex 设置换行flex-wrap

摘要：ul { width: 100%; display: flex; flex-wrap: wrap;} li { flex: 1; width: 25%; min-width: 25%; max-width: 25%; ｝阅读全文

posted @ 2019-09-12 17:24 yuan9580 阅读(1024) 评论(0) 推荐(0)

CSS响应式：根据分辨率加载不同CSS的几个方法

摘要：一般情况下，根据分辨率加载pc端 wap端 pad端三个css文件，示例：只有一个css文件情况下，根据分辨率调整css样式，示例：阅读全文

posted @ 2019-09-12 17:20 yuan9580 阅读(571) 评论(0) 推荐(0)

纯css实现移动端横向滑动列表

摘要：<!DOCTYPE html> <html> <head> <title>横向滑动</title> <style type="text/css"> .slide-box{ margin-top: 200px; display: -webkit-box; overflow-x: scroll; -webkit-overflow-scrolling:touch; } .slide-item{ widt 阅读全文

posted @ 2019-09-12 17:17 yuan9580 阅读(879) 评论(0) 推荐(0)

CSS实现左右滑动菜单分类

摘要：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .container-wrap { width: 100%; height: 50px; background-color: rgba(0,0,0,0.8); white-space: nowrap; overflo 阅读全文

posted @ 2019-09-12 17:15 yuan9580 阅读(1432) 评论(0) 推荐(0)

html实现点击图片放大功能

摘要：<html> <head> <style> .over {position: fixed; left:0; top:0; width:100%; z-index:100;} .tempContainer {position:fixed; width:100%; margin-right:0px; margin-left:0px; text-align:center; z-index:101;} < 阅读全文

posted @ 2019-09-12 17:15 yuan9580 阅读(11857) 评论(1) 推荐(0)

js实现返回顶部功能的解决方案

摘要：返回顶部 #back-to-top{ position:fixed; display:none; bottom:100px; right:80px; } #back-to-top a{ text-align:center; text-decoration:none; color:#d1d1d1; display:block;... 阅读全文

posted @ 2019-09-12 17:13 yuan9580 阅读(172) 评论(0) 推荐(0)

纯css用图片代替checkbox和radio,无js实现方法

摘要：html css 阅读全文

posted @ 2019-08-13 09:36 yuan9580 阅读(255) 评论(0) 推荐(0)

省市区三级联动菜单（附数据库）

摘要：<?php$conn=mysql_connect("localhost","root","");//链接数据库 mysql_select_db("novel");//选择数据库 mysql_query("set names 'utf8'");//设定字符集 $sql="select * from p 阅读全文

posted @ 2019-08-03 10:57 yuan9580 阅读(1064) 评论(0) 推荐(0)

导航栏下拉至一定高度后固定在顶部的特效

摘要：将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。为fixednav增加样式阅读全文

posted @ 2019-07-13 15:17 yuan9580 阅读(226) 评论(0) 推荐(0)

JavaScript实现多栏目切换效果

摘要：工作动态媒体链接领导活动工作动态_more 媒体链接_more 领导活动_more 工作动态_list 工作动态_list 工作动态_list 媒体链接_list 媒体链接_list 媒体链接_list 领导活动_list 领导活动_... 阅读全文

posted @ 2019-07-13 15:15 yuan9580 阅读(192) 评论(0) 推荐(0)

DIV+css内容太长，实现点击展开余下全文

摘要：文章高度展开 9月8日，吴小姐一家和朋友去西溪印象城吃饭，找了个吃火锅的餐馆坐下桌子靠着木制隔断墙，吴小姐将11个月大的孩子放在最里面的位置，心想靠着隔断墙，这样安全点吴小姐先把孩子喂饱，然后随他自己在位子上玩快吃完时，吴小姐突然发现孩子嘴边有淡黄色粉末状物体，还在砸吧着嘴巴品尝味道我没给他喂过这东西啊吴小姐大脑立马一阵搜索，看孩子手上也有类似粉状，再放眼一看，餐桌侧边... 阅读全文

posted @ 2019-07-13 15:13 yuan9580 阅读(2080) 评论(0) 推荐(0)

JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)

摘要：html标签代码，js代码阅读全文

posted @ 2019-06-22 17:23 yuan9580 阅读(2085) 评论(0) 推荐(0)

在循环列表中，获取列表某个id，并查询操作数据

摘要：html： js部分：方法二： //$(obj).parents("tr").remove(); 阅读全文

posted @ 2019-06-22 17:19 yuan9580 阅读(1007) 评论(0) 推荐(0)

JS如何设置元素样式的方法示例

摘要：阅读全文

posted @ 2019-04-02 17:01 yuan9580 阅读(820) 评论(0) 推荐(0)

js判断PC端移动端并跳转到对应页面

摘要：一、PC端跳转到移动端 html页面： mobile.js文件：二、移动端跳转到PC端 html页面： pc.js文件：阅读全文