效果图:传不上来。。。 在线预览地址:地址代码<!doctype html><html><head> <
原创 2023-04-30 20:45:27
362阅读
第一次写项目开发经验,望担待。除了前端以外的事就不叨叨了,下面开始弄干活(两个页面首页、列表页)。项目开发简述项目需求:上传图片并展示。项目地址:项目的链接地址开发工具:sublime后台:java开发语言:项目运用到的技术:css3+html5+jquery+ajax jsonphtml部分重点说一下这两个地方:做了一个li,里面放一个span用来做数字标题,再用border-radius做圆角
图片的横向或者竖向的无缝滚动图片
转载 2016-12-08 11:07:00
927阅读
2评论
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
原创 2020-03-16 20:56:30
277阅读
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
原创 2020-03-16 20:56:30
314阅读
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff> <div id=demo1> <!-- 定义图片 --> <img src="p_w_picpaths/logo_1.gif"> <
<div id=demo style=overflow:hidden;height:150;width:90;background:#214984;color:#ffffff> <div id=demo1> <!-- 定义图片 --> <img src="p_w_picpaths/logo_1.gif"> <
想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦。下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLef
转载 精选 2008-07-26 16:29:43
6533阅读
4评论
昨天看见了一篇文章关于用纯CSS实现文本滚动,在这里跟大家分享一下。首先把效果图贴给大家根据效果图我们很容易发现肯定是要用到3D转换的,如果对这个还不是很了解的可以先看看下面的文章http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/comment-page-1/ht
背景属性 background-attachment: fied 可以让背景图片固定:(小技巧:让元素占满整个屏,如下)<te
原创 2020-05-21 18:11:26
262阅读
一、是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层 当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果 二、实现方式使用css形式实现视觉差滚动效果的方式有:background-attachmenttransform:translate3Dbackgrou
转载 8月前
58阅读
一、是什么视差滚动(Parallax Scrolling)是指多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验我们可以把网页解刨成:背景层、内容层、悬浮层当滚动鼠标滑轮的时候,各个图层以不同的速度移动,形成视觉差的效果二、实现方式使用css形式实现视觉差滚动效果的方式有:background-attachmenttransform:translate3Dbackground-a
效果演示:代码目录:主要代码实现:CSS样式:@charset "utf-8";* { margin: 0; padding: 0; list-style: none; bo
原创 2022-03-08 17:54:51
360阅读
     效果演示:   代码目录: 主要代码实现: CSS样式: @charset "utf-8"; * { margin: 0; padding: 0; list-style: none; border: 0; } body { width: 100%; margin: 0 auto; overflow: hidden }
原创 2021-09-07 13:35:57
1149阅读
<!--把下列代码放到HEAD区域内--><head><title>连续环绕滚动图片</title><script type='text/javascript'>function carousel(params){  if(!(params.width>0 && isFinite(params.width)))par
转载 2021-08-10 10:54:14
55阅读
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=d
转载 2023-06-08 22:50:07
196阅读
先制作向上滚动的效果: 插入代码: 制作向下滚动的效果: 将上面“制作向上滚动的效果”中的红色字体Js部分替换成: 制作向左滚动的效果: 制作向右滚动的效果: 将上面“制作向左滚动的效果”中的红色字体Js部分替换成: 制作的方法就简单的介绍完成了。
转载 2007-07-19 22:59:00
92阅读
2评论
最终实现界面如下:页面加载时,自动轮播,轮播鼠标悬停在整个banner容器的时候,两边会显示向左,向右按钮,鼠标悬停在中下方索引圆圈的上面,自动跳转到相应的图片。banner容器里面包含了图片列表img,索引圆圈 num,还有按钮两个btn<div class="banner"> <ul class="img"> <
转载 2022-04-25 11:13:58
933阅读
原文地址:http://www.cnblogs.com/shaojiang/p/5295826.html 最终实现界面如下: 页面加载时,自动轮播,轮播鼠标悬停在整个banner容器的时候,两边会显示向左,向右按钮,鼠标悬停在中下方索引圆圈的上面,自动跳转到相应的图片。 banner容器里面包含了图
转载 2019-12-31 19:55:00
370阅读
2评论
<div class="mechanism"> <div class="re_roll"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> ...
转载 2021-07-12 13:54:00
2098阅读
2评论
  • 1
  • 2
  • 3
  • 4
  • 5