上市公司网站建设,wordpress分享服务器目录,公司装修孕妇怎么办,搜索引擎网站建设代码学习目标
学习web前端设计技术#xff08;HTML、css、JavaScript、jQuery等#xff09;#xff0c;综合运用技术#xff0c;将其与HTML元素结合#xff0c;设计样式、监听事件、添加动画等#xff0c;给用户呈现出更好的视觉交互效果。本文主要学习分页按钮自动放大、元…学习目标
学习web前端设计技术HTML、css、JavaScript、jQuery等综合运用技术将其与HTML元素结合设计样式、监听事件、添加动画等给用户呈现出更好的视觉交互效果。本文主要学习分页按钮自动放大、元素移入移出、自动轮播动画效果。
一、分页按钮自动放大效果
当鼠标悬停在某个图标上时这个图标会自动变大。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleli{float: left;/* 去除列表元素的样式 */list-style: none;width: 30px;height: 30px;border: 1px solid #ccc;margin: 10px;/* 居中显示 */text-align: center;line-height: 30px;/* 绘制正圆设置鼠标悬停时的鼠标举手样式 */border-radius: 50%;cursor: pointer;/* 设置过渡效果*/transition: all .4s;}li:hover{/* 设置鼠标悬停时的效果正圆半径放大 */transform:scale(1.2);}/style
/head
bodyulli1/lili2/lili3/lili4/lili5/lili6/li/ul
/body
/html
二、设置列表元素的移入移出效果
当鼠标悬停在某个/所有图标上时方块先自动移出再移入。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srcjquery-migrate-1.9.1.min.js/scriptstyle/*设置所有元素样式*/*{margin: 0;padding:0}ul{list-style: none;width:400px;height:250px;/*设置黑色边框*/border: 1px solid black;margin:100px auto;}ulli{width:100px;height:50px;text-align: center;float:left;margin-top: 50px;/* 隐藏超出的部分 */overflow: hidden;}ullispan{display: inline-block;width:24px;height: 24px;background-color: red;/*设置相对布局*/position: relative;}divulli{margin: 0px;padding:0px;float: left;width: 300px;height: 161px;}img{width: 300px;height: 161px;}/stylescript$(function(){//鼠标悬停效果$(li).mouseenter(function(){$(this).children(span).stop();$(this).children(span).animate({//移出top:-50},1000,function(){//移入$(this).css(top,50px);$(this).animate({top:0},1000)})})autoPlay();//监听li的移入和移出$(divulli).hover(function(){// 停止滚动clearInterval(timer);},function(){// 继续滚动autoPlay();})})/script
/head
bodyullispan/spanp百度/p/lilispan/spanp百度/p/lilispan/spanp百度/p/lilispan/spanp百度/p/lilispan/spanp百度/p/lilispan/spanp百度/p/lilispan/spanp百度/p/lilispan/spanp百度/p/li/ul
/body
/html
三、自动轮播动画效果
在容器内放置几张图片并为其添加动画使其自动滚动播放轮播图。当鼠标悬停在某张图片上时该图片悬停在容器中同时轮播停止移出图片时轮播自动开始。 !DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescript srcjquery-migrate-1.9.1.min.js/scriptstyle*{margin: 0;padding:0}ul{list-style: none;width:400px;height:250px;border: 1px solid black;margin:100px auto;}ulli{width:100px;height:50px;text-align: center;float:left;margin-top: 50px;/* 隐藏超出的部分 */overflow: hidden;}ullispan{display: inline-block;width:24px;height: 24px;background-color: red;position: relative;}/* 无限循环滚动图片 */div{height: 161px;width: 600px;border:1px solid black;margin:100px auto;overflow: hidden;background-color: black;}divul{margin: 0px;padding:0px;list-style: none;width: 1800px;height: 161px;background-color: black;} divulli{margin: 0px;padding:0px;float: left;width: 300px;height: 161px;}img{width: 300px;height: 161px;}/stylescript$(function(){$(li).mouseenter(function(){$(this).children(span).stop();})// 图片滚动章var offset0;var timer;function autoPlay(){timersetInterval(function(){offset-10;if(offset-1200){offset0;}$(divul).css(marginLeft,offset)},50);}autoPlay();//监听li的移入和移出$(divulli).hover(function(){// 停止滚动clearInterval(timer);//给非当前的图片添加蒙版$(this).siblings().fadeTo(100,0.5);//去除当前选中的蒙版$(this).fadeTo(100,1);},function(){// 继续滚动autoPlay();$(divulli).fadeTo(100,1);})})/script
/head
bodydivulliimg srcimg/1.jpg width300 height161/liliimg srcimg/2.jpg/liliimg srcimg/3.jpg/liliimg srcimg/4.jpg/liliimg srcimg/1.jpg width300 height161/liliimg srcimg/2.jpg/li/ul/div
/body
/html
