1. 缩略图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js">
</script>
<!--=========样式==========-->
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#box1{
/*background-color: lightgoldenrodyellow;*/
height: 310px;
}
#box1>img{
/*background-color: yellowgreen;*/
height: 100%;
width: 450px;
}
</style>
</head>
<body>
<!--=============HTML代码============-->
<div id="box1">
<img src=""/>
</div>
<div id="box2">
</div>
<!--===============js代码============-->
<script type="text/javascript">
//1.准备数据
var allData = [
{smallImg:'thumb-1.jpg', bigImg:'picture-1.jpg'},
{smallImg:'thumb-2.jpg', bigImg:'picture-2.jpg'},
{smallImg:'thumb-3.jpg', bigImg:'picture-3.jpg'}
]
//2.创建数据对应的节点
allData.forEach(function(item,index,arr){
//设置大图
if(index == 0){
$('#box1 img').attr('src', 'img/'+item.bigImg)
}
//创建小图
imgNode = $('<img />')
imgNode.attr('src', 'img/'+item.smallImg)
//给js对象绑定属性
imgNode[0].bigImg = item.bigImg
$('#box2').append(imgNode)
})
//3.绑定事件
$('#box2').on('mouseover','img',function(){
console.log('=====:',this.bigImg)
$('#box1 img').attr('src', 'img/'+this.bigImg)
})
</script>
</body>
</html>
2. 改变颜色实现闪烁效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box1{
width: 700px;
height: 350px;
margin-left: auto;
margin-right: auto;
border: 1px solid rgb(50,50,50);
/*隐藏子标签超出的部分*/
/*overflow: hidden;*/
}
#box2{
margin-top: 10px;
text-align: center;
}
#box2 button{
width: 60px;
height: 35px;
background-color: orangered;
color: white;
font-size: 20px;
border: 0;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2">
<button>添加</button>
<button>闪烁</button>
</div>
<!--=====添加=====-->
<script type="text/javascript">
$('#box2>button:first').on('click', function(){
//创建标签
smallBoxNode = $('<div style="width: 70px; height: 70px; float: left;"></div>')
smallBoxNode.css('background-color', randomColor(0.6))
//添加标签
$('#box1').prepend(smallBoxNode)
//删除溢出的盒子
if($('#box1 div').length > 50){
$('#box1 div:last').remove()
}
})
</script>
<!--=======闪烁=======-->
<script type="text/javascript">
$('#box2 button:last').on('click', function(){
if(this.innerText == '闪烁'){
this.innerText = '暂停'
t1 = setInterval(function(){
divNodes = $('#box1 div')
for(x=0;x<divNodes.length;x++){
divNode = divNodes[x]
$(divNode).css('background-color', randomColor(0.6))
}
}, 100)
}else{
this.innerText = '闪烁'
clearInterval(t1)
}
})
</script>
</body>
</html>
3. 轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<style type="text/css">
*{
margin: 0;
padding-right: 0;
}
#box{
width: 800px;
height: 400px;
background-color: lightblue;
margin: auto;
position: relative;
}
#box img{
width: 100%;
height: 100%;
z-index: 0;
}
#pointBox{
z-index: 10;
/*background-color: red;*/
position: absolute;
bottom: 20px;
width: 100%;
}
#pointBox ul{
/*background-color: yellow;*/
overflow: hidden;
text-align: center;
width: 150px;
margin: auto;
}
/*点的布局*/
#pointBox li{
/*background-color: pink;*/
float: left;
list-style-type: none;
margin-right: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<div id="box">
<img src=""/>
<div id="pointBox">
<ul></ul>
</div>
</div>
<script type="text/javascript">
//准备数据
var images = ['img/slide-1.jpg','img/slide-2.jpg','img/slide-3.jpg','img/slide-4.jpg']
//获取图片标签
const imgNode = $('#box img')
//绑定播放位置
imgNode.index = 0
imgNode.attr('src', images[0])
//保存当前选中的点
var currentPointNode = null
//创建点对应的标签
images.forEach(function(item, x, arr){
liNode = $('<li style="color: green;">●</li>')
liNode[0].index = x
liNode.attr('id', 'li'+x)
$('#pointBox ul').append(liNode)
//设置第一个圆点的初始状态
if(x == 0){
currentPointNode = liNode
liNode.css('color', 'red')
}
})
//鼠标进入圆点的时候
$('#pointBox').on('mouseover', 'li', function(){
//关闭定时器
clearInterval(timer)
imgNode.index = this.index
console.log('=====:',imgNode, images[this.index])
//修改样式
imgNode.attr('src', images[this.index])
$(this).css('color', 'red')
currentPointNode.css('color', 'green')
currentPointNode = $(this)
})
//鼠标离开圆点事件
$('#pointBox').on('mouseleave', 'li', function(){
timer = startMove()
})
//自己动
function startMove(){
var t1 = setInterval(function(){
//切换图片
imgNode.index += 1
if(imgNode.index >= images.length){
imgNode.index = 0
}
imgNode.attr('src', images[imgNode.index])
//切换点的状态
let tLiNode = $('#li'+imgNode.index)
tLiNode[0].index = imgNode.index
tLiNode.css('color', 'red')
currentPointNode.css('color', 'green')
currentPointNode = tLiNode
}, 1000)
return t1
}
timer = startMove()
</script>
</body>
</html>
4. 可拖拽元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var isMove = false
var old_offsetX, old_offsetY
//点击方块切换上下层位置
var maxZIndex = 3
$('body').on('mousedown','div',function(evt){
$(this).css('z-index', maxZIndex)
maxZIndex++
//鼠标在div上才可以动
isMove = true
//保存鼠标开始的位置
old_offsetX = evt.offsetX
old_offsetY = evt.offsetY
})
//鼠标弹起不能动
$('body').on('mouseup',function(){
isMove = false
})
//鼠标离开也不能动
$('body').on('mouseleave','div',function(){
isMove = false
})
//移动div
$('body').on('mousemove','div', function(evt){
if(isMove){
$(this).css('left', evt.clientX - old_offsetX)
$(this).css('top', evt.clientY - old_offsetY)
}
})
})
</script>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 250px;
height: 250px;
position: absolute;
}
#box1{
background-color: red;
left: 200px;
top: 200px;
}
#box2{
background-color: green;
left: 250px;
top: 220px;
}
#box3{
background-color: cornflowerblue;
left: 400px;
top: 300px;
}
</style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
</html>
5. 房屋信息界面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>房屋信息</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/tool.js"></script>
<script type="text/javascript">
function creatUI(data){
//1.创建盒子
let boxNode = $('<div class="box1"></div>')
$('#box').append(boxNode)
//2.图片
let imgNode = $('<img class="icon"/>')
imgNode.attr('src', data.image)
boxNode.append(imgNode)
//3.小盒子
let smallBoxNode = $('<div class="box2"></div>')
boxNode.append(smallBoxNode)
//4.标题
let titleNode = $('<p class="title"></p>')
titleNode.text(data.title)
smallBoxNode.append(titleNode)
//5.其他信息
let otherInfoBoxNode = $('<div class="other"></div>')
smallBoxNode.append(otherInfoBoxNode)
//名字
if(data.name){
let nameNode = $('<font class="name"></font>')
nameNode.text(data.name)
otherInfoBoxNode.append(nameNode)
otherInfoBoxNode.append($('<font> | </font>'))
}
//户型
if(data.type){
let typeNode = $('<font class="type"></font>')
typeNode.text(data.type)
otherInfoBoxNode.append(typeNode)
otherInfoBoxNode.append($('<font> | </font>'))
}
//面积
if(data.area){
let areaNode = $('<font class="area"></font>')
areaNode.text(data.area)
otherInfoBoxNode.append(areaNode)
}
//6.价格
let priceNode = $('<p class="price"></p>')
priceNode.text(data.price)
smallBoxNode.append(priceNode)
}
$.ajax({
type:"get",
url:"http://rap2api.taobao.org/app/mock/177073/houseList",
async:true,
dataType:'json',
success: function(result){
console.log(result)
//获取房屋信息列表
datalist = result.datalist
datalist.forEach(function(item, x, arr){
creatUI(item)
})
}
});
</script>
<!--==============样式=================-->
<style type="text/css">
/*大盒子*/
.box1{
/*background-color: lavender;*/
width: 100%;
height: 180px;
border-bottom: 1px solid rgba(190,190,190,0.6);
/*border-top: 1px solid rgb(190,190,190);*/
}
/*图片*/
.icon{
height: 150px;
width: 200px;
float: left;
margin-top: 15px;
}
/*图片后面的小盒子*/
.box2{
float: left;
margin-left: 10px;
margin-top: 15px;
}
/*标题*/
.title{
font-size: 22px;
color: rgb(50,50,50);
}
.other{
color: rgb(190,190,190);
font-size: 13px;
}
.price{
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<div id="box">
</div>
</body>
</html>
6. vue基础
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基础</title>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!--
Vue主要包含两个部分：Vue对象和指令
1.Vue对象
var 对象名 = new Vue({
el:关键对象的选择器,
data: 数据对象(属性和值自己决定),
methods:方法对象(属性对应的值是方法)
})
-->
</head>
<body>
<!--1.设置标签内容-->
<!--<p id="app-1">
{{name}}
</p>
<script type="text/javascript">
var app1 = new Vue({
el:'#app-1',
data:{
message:'我是p标签',
name: '认识Vue.js'
}
})
</script>-->
<!--<div id="app-2">
<p>{{pText}}</p>
<a href="">{{aTitle}}</a>
<h1>{{title}}</h1>
</div>
<script type="text/javascript">
var app2 = new Vue({
el:'#app-2',
data:{
pText: '我是段落',
aTitle: '百度一下',
title: '我是标题1'
}
})
</script>-->
<!--2.设置标签属性值
v-bind:属性='Vue属性名'
-->
<!--<div id="app-3">
<img v-bind:src="imageUrl" v-bind:title="name"/>
</div>
<script type="text/javascript">
var app3 = new Vue({
el:'#app-3',
data:{
imageUrl:'img/a1.jpg',
name: '路飞'
}
})
</script>-->
<!--3.if语句：
v-if='条件语句' -- 如果条件语句的结果是true,标签就显示，否则不显示
-->
<div id="app-4">
<!--如果message的值是空就隐藏，否则显示-->
<p v-if="message">内容是:{{message}}</p>
<!--如果message的值是123就显示，否则隐藏-->
<p v-if="message=='123'">内容是:{{message}}</p>
</div>
<script type="text/javascript">
var app4 = new Vue({
el:'#app-4',
data:{
message: 'Vue.js'
}
})
</script>
<!--4.循环结构:
v-for="变量 in 数组属性"
-->
<!--<div id="app-5">
<ul>
<li v-for="mesage in names"><img v-bind:src="mesage['img']"/>{{mesage.name}}</li>
</ul>
</div>
<script type="text/javascript">
var app5 = new Vue({
el:'#app-5',
data:{
names:[
{img:'img/a1.jpg', name:'python'},
{img:'img/a2.jpg', name:'前端H5'},
{img:'img/a3.jpg', name:'java大数据'},
{img:'img/luffy.jpg', name:'物联网'}
]
}
})
</script>-->
<!--5.事件绑定:
v-on:事件名='函数名'
-->
<!--<div id="app-6">
<p>{{num}}</p>
<button v-on:click="addAction">加1</button>
</div>
<script type="text/javascript">
var app6 = new Vue({
el:'#app-6',
data:{
num: 0
},
methods:{
addAction: function(){
this.num ++
}
}
})
</script>-->
<!--6.input标签内容和属性双向绑定:
v-model="Vue对象属性名"
-->
<div id="app-7">
<p>{{message}}</p>
<input v-model="message" />
</div>
<script type="text/javascript">
var app7 = new Vue({
el: '#app-7',
data:{
message: '你好'
}
})
</script>
</body>
</html>
