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.準(zhǔn)備數(shù)據(jù)
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.創(chuàng)建數(shù)據(jù)對(duì)應(yīng)的節(jié)點(diǎn)
allData.forEach(function(item,index,arr){
//設(shè)置大圖
if(index == 0){
$('#box1 img').attr('src', 'img/'+item.bigImg)
}
//創(chuàng)建小圖
imgNode = $('<img />')
imgNode.attr('src', 'img/'+item.smallImg)
//給js對(duì)象綁定屬性
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. 改變顏色實(shí)現(xiàn)閃爍效果
<!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);
/*隱藏子標(biāo)簽超出的部分*/
/*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(){
//創(chuàng)建標(biāo)簽
smallBoxNode = $('<div style="width: 70px; height: 70px; float: left;"></div>')
smallBoxNode.css('background-color', randomColor(0.6))
//添加標(biāo)簽
$('#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;
}
/*點(diǎn)的布局*/
#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">
//準(zhǔn)備數(shù)據(jù)
var images = ['img/slide-1.jpg','img/slide-2.jpg','img/slide-3.jpg','img/slide-4.jpg']
//獲取圖片標(biāo)簽
const imgNode = $('#box img')
//綁定播放位置
imgNode.index = 0
imgNode.attr('src', images[0])
//保存當(dāng)前選中的點(diǎn)
var currentPointNode = null
//創(chuàng)建點(diǎn)對(duì)應(yīng)的標(biāo)簽
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)
//設(shè)置第一個(gè)圓點(diǎn)的初始狀態(tài)
if(x == 0){
currentPointNode = liNode
liNode.css('color', 'red')
}
})
//鼠標(biāo)進(jìn)入圓點(diǎn)的時(shí)候
$('#pointBox').on('mouseover', 'li', function(){
//關(guān)閉定時(shí)器
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)
})
//鼠標(biāo)離開(kāi)圓點(diǎn)事件
$('#pointBox').on('mouseleave', 'li', function(){
timer = startMove()
})
//自己動(dòng)
function startMove(){
var t1 = setInterval(function(){
//切換圖片
imgNode.index += 1
if(imgNode.index >= images.length){
imgNode.index = 0
}
imgNode.attr('src', images[imgNode.index])
//切換點(diǎn)的狀態(tài)
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
//點(diǎn)擊方塊切換上下層位置
var maxZIndex = 3
$('body').on('mousedown','div',function(evt){
$(this).css('z-index', maxZIndex)
maxZIndex++
//鼠標(biāo)在div上才可以動(dòng)
isMove = true
//保存鼠標(biāo)開(kāi)始的位置
old_offsetX = evt.offsetX
old_offsetY = evt.offsetY
})
//鼠標(biāo)彈起不能動(dòng)
$('body').on('mouseup',function(){
isMove = false
})
//鼠標(biāo)離開(kāi)也不能動(dòng)
$('body').on('mouseleave','div',function(){
isMove = false
})
//移動(dòng)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.創(chuàng)建盒子
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.標(biāo)題
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>'))
}
//戶(hù)型
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.價(jià)格
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;
}
/*標(biāo)題*/
.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基礎(chǔ)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vue基礎(chǔ)</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主要包含兩個(gè)部分：Vue對(duì)象和指令
1.Vue對(duì)象
var 對(duì)象名 = new Vue({
el:關(guān)鍵對(duì)象的選擇器,
data: 數(shù)據(jù)對(duì)象(屬性和值自己決定),
methods:方法對(duì)象(屬性對(duì)應(yīng)的值是方法)
})
-->
</head>
<body>
<!--1.設(shè)置標(biāo)簽內(nèi)容-->
<!--<p id="app-1">
{{name}}
</p>
<script type="text/javascript">
var app1 = new Vue({
el:'#app-1',
data:{
message:'我是p標(biāo)簽',
name: '認(rèn)識(shí)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: '我是標(biāo)題1'
}
})
</script>-->
<!--2.設(shè)置標(biāo)簽屬性值
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語(yǔ)句：
v-if='條件語(yǔ)句' -- 如果條件語(yǔ)句的結(jié)果是true,標(biāo)簽就顯示骨宠，否則不顯示
-->
<div id="app-4">
<!--如果message的值是空就隱藏慷蠕，否則顯示-->
<p v-if="message">內(nèi)容是:{{message}}</p>
<!--如果message的值是123就顯示，否則隱藏-->
<p v-if="message=='123'">內(nèi)容是:{{message}}</p>
</div>
<script type="text/javascript">
var app4 = new Vue({
el:'#app-4',
data:{
message: 'Vue.js'
}
})
</script>
<!--4.循環(huán)結(jié)構(gòu):
v-for="變量 in 數(shù)組屬性"
-->
<!--<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大數(shù)據(jù)'},
{img:'img/luffy.jpg', name:'物聯(lián)網(wǎng)'}
]
}
})
</script>-->
<!--5.事件綁定:
v-on:事件名='函數(shù)名'
-->
<!--<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標(biāo)簽內(nèi)容和屬性雙向綁定:
v-model="Vue對(duì)象屬性名"
-->
<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>
