没有合适的资源?快使用搜索试试~ 我知道了~
网站设计之常见简单实用的JavaScript特效总结(上篇)1
需积分: 0 1 下载量 108 浏览量
2022-08-03
21:47:18
上传
评论
收藏 6.56MB PDF 举报
温馨提示
试读
24页
1.鼠标悬停图片切换查看器 2.鼠标移动图片放大 3.鼠标移动切换内容 4.贵财下拉菜单案例 5.JS图片放大镜功能-类似淘宝 6.下一页翻页跳转功能 3.di
资源详情
资源评论
资源推荐
网站设计之常见简单实用的JavaScript特效总结(上篇)
原创
Eastmount
阅读数 5722
收藏
最后发布于2016-12-19 00:54:55
展开
这篇主要是总结JavaScript常见简单实用的特效,主要从代码量短、简单实用几个方
面进行叙述。其中特效包括:
1.鼠标悬停图片切换查看器;
2.鼠标移动图片放大;
3.鼠标移动切换内容;
4.贵财下拉菜单案例;
5.JS图片放大镜功能-类似淘宝;
6.下一页翻页跳转功能。
下载地址:
希望文章对你有所帮助,尤其是学习前端JavaScript的同学。
一. 鼠标悬停图片切换查看器
代码如下所示,通过JavaScript函数showDaTu显示大图,重点是在<img>中调用
onmouseover鼠标函数,然后通过document.getElementById函数实现换图。
<
html
>
<
head
>
<
title
>
JavaScript 图片切换
</
title
>
</
head
>
<
body
>
<
script
>
function
showDaTu
(
src
)
{
document
.getElementById(
"defaultImg"
).src=src;
}
Python+TensorFlow人工智能
该专栏为人工智能入门专栏,采用Python3和TensorFlow实现人工智能相
…
Eastmount
¥9.90
订阅
第1页 共24页
运行结果如下图所示:
二. 鼠标移动图片放大
该部分参考:
http://blog.csdn.net/u014175572/article/details/51535768
CSS3的transform:scale()可以实现按比例放大或者缩小功能。
CSS3的transition允许CSS的属性值在一定的时间区间内平滑地过渡。这种效果可以
</
script
>
<
img
src
=
"wall1.jpg"
id
=
"defaultImg"
>
<
br
>
<
br
>
<
br
>
<
img
src
=
'wall_s1.jpg'
ο
nm
ο
use
ο
ver
=
"showDaTu('wall1.jpg')"
>
<
img
src
=
'wall_s2.jpg'
ο
nm
ο
use
ο
ver
=
"showDaTu('wall2.jpg')"
>
<
img
src
=
'wall_s3.jpg'
ο
nm
ο
use
ο
ver
=
"showDaTu('wall3.jpg')"
>
<
img
src
=
'wall_s4.jpg'
ο
nm
ο
use
ο
ver
=
"showDaTu('wall4.jpg')"
>
<
br
>
因图片较大,请等待图片加载完成……然后鼠标放小图上就会切换了。
</
body
>
</
html
>
第2页 共24页
在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS
的属性值。
代码如下所示:
效果如下图所示,包括缩放前后的对比。
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>
</
title
>
<
style
type
=
"text/css"
>
div
{
width
:
300px
;
height
:
300px
;
border
:
#000
solid
1px
;
margin
:
50px
auto;
overflow
: hidden;
}
div
img
{
cursor
: pointer;
transition
: all
0.6s
;
}
div
img
:hover
{
transform
:
scale
(1.4);
}
</
style
>
</
head
>
<
body
>
<
div
>
<
img
src
=
"focus.jpg"
/>
</
div
>
</
body
>
</
html
>
第3页 共24页
transition: all 0.6s;表示所有的属性变化在0.6s的时间段内完成。
transform: scale(1.4);表示在鼠标放到图片上的时候图片按比例放大1.4倍。
PS:这部分代码参考博主"简单就是美",推荐大家可以去学习下,非常不错。
三. 鼠标移动内容切换
这段代码参考文章:
http://blog.csdn.net/hill_kinsham/article/details/52448668
重点说一下关键功能的几个函数。
1.οnmοuseοver=" change('zs', this) " 函数的功能是鼠标移动到目标区域时,响应
函数。这里的'zs'用id与后面要变更的区域绑定。this的功能不太了解,效果是改变当前的
值。
2.οnmοuseοut="change2(this)";函数的功能是鼠标移开目标区域时,响应函数。
3.display. display 属性规定元素应该生成的框的类型。
none 此元素不会被显示。block 此元素将显示为块级元素,此元素前后会带有换行
符。inline 默认。此元素会被显示为内联元素,元素前后没有换行符。
4.用<ul>时,去掉行号,并把它放到最左边。 list-style-type: none;
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
第4页 共24页
剩余23页未读,继续阅读
坑货两只
- 粉丝: 64
- 资源: 290
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0