这里介绍两种方式：
一：通过css样式中的 ":hover"实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
div:hover{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
</body>
</html>
二：通过javascript方式实现，代码如下
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
background:red
width:200px
height:200px
}
.divs{
background:red
width:500px
height:500px
}
</style>
</head>
<body>
<div>变大</div>
<script>
// 首先获取div元素
var divs = document.getElementsByTagName('div')[0]
//鼠标移入，将divs的className样式赋给该标签
divs.onmouseover = function () {
this.className = "divs"
}
//鼠标移出，将空的className样式赋给该标签
divs.onmouseout = function () {
this.className = ""
}
</script>
</body>
</html>
WPF用RenderTransform实现，随便做了个，代码如下。
XAML
<Window x:Class="WpfApplication3.MainWindow"xmlns="
xmlns:x="
title="MainWindow"
Height="350"
Width="525">
<Grid>
<Image Name="image" Source="/WpfApplication3component/Images/Hydrangeas.jpg">
<Image.RenderTransform>
<TransformGroup>
<RotateTransform x:Name="rt"/>
<ScaleTransform x:Name="st"/>
<TranslateTransform x:Name="tt"/>
</TransformGroup>
</Image.RenderTransform>
</Image>
<StackPanel Orientation="Horizontal"
Height="20">
<Button Name="btnScale1"
Content="缩小"
Click="btnScale1_Click" />
<Button Name="btnScale2"
Content="放大"
Click="btnScale2_Click" />
<Button Name="btnRotation1"
Content="左转"
Click="btnRotation1_Click" />
<Button Name="btnRotation2"
Content="右转"
Click="btnRotation2_Click" />
<Button Name="btnMove1"
Content="左移"
Click="btnMove1_Click" />
<Button Name="btnMove2"
Content="右移"
Click="btnMove2_Click" />
<Button Name="btnMove3"
Content="上移"
Click="btnMove3_Click"/>
<Button Name="btnMove4"
Content="下移"
Click="btnMove4_Click" />
</StackPanel>
</Grid>
</Window>
CS如下
namespace WpfApplication3{
/// <summary>
/// MainWindow.xaml 的交互逻辑
/// </summary>
public partial class MainWindow : Window
{
public MainWindow()
{
InitializeComponent()
DataContext = this
}
private bool _ischecked = false
public bool IsChecked
{
get
{
return _ischecked
}
}
private void btnScale1_Click(object sender, RoutedEventArgs e)
{
st.CenterX = image.ActualWidth / 2
st.CenterY = image.ActualHeight / 2
st.ScaleX -= 0.1
st.ScaleY -= 0.1
}
private void btnScale2_Click(object sender, RoutedEventArgs e)
{
st.CenterX = image.ActualWidth / 2
st.CenterY = image.ActualHeight / 2
st.ScaleX += 0.1
st.ScaleY += 0.1
}
private void btnRotation1_Click(object sender, RoutedEventArgs e)
{
rt.CenterX = image.ActualWidth / 2
rt.CenterY = image.ActualHeight / 2
rt.Angle -= 10
}
private void btnRotation2_Click(object sender, RoutedEventArgs e)
{
rt.CenterX = image.ActualWidth / 2
rt.CenterY = image.ActualHeight / 2
rt.Angle += 10
}
private void btnMove1_Click(object sender, RoutedEventArgs e)
{
tt.X -= 10
}
private void btnMove2_Click(object sender, RoutedEventArgs e)
{
tt.X += 10
}
private void btnMove3_Click(object sender, RoutedEventArgs e)
{
tt.Y -= 10
}
private void btnMove4_Click(object sender, RoutedEventArgs e)
{
tt.Y += 10
}
}
}
1，输入position：fixed；top：0；left：0；将整个div固定在屏幕的顶部和左侧。
2、输入width：100％；height：100％；min－width：1000px；这个可以适合div的高度和宽度，而min－width是为了实现让屏幕宽度在1000px以内时，div的大小保持不变。
3、输入background-size: cover-webkit-background-size: cover-o-background-size: cover使图片随屏幕大小同步缩放，但是有部分可能会被裁切，不过不至于会露白，下面两句是为chrome和opera浏览器作兼容。
4、输入background－position：center0；使图片的位置，居中，靠左对齐。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）