jQuery实现电影海报特效

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>电影海报</title><script src="../jquery-3.1.1.js"></script><style type="text/css">*{margin: 0;padding: 0;}.box{width: 1000px;height: 500px;margin: 75px auto;background-color: black;}.inbox{padding: 30px;width: 940px;height: 440px;position: relative;}.left{width: 640px;height: 440px;margin-right: 20px;float: left;position: absolute;}.right{width: 310px;height: 440px;float: left;position: absolute;left: 660px;margin-left: 10px;}.left ul li{width: 200px;height: 140px;float: left;margin-bottom: 10px;}.left ul li img{ padding: 2px;width: 190px;height: 140px;position: absolute;}.left ul{list-style: none;}.right img{width: 100%;height: 440px;}.cur img{border: 1px solid red ;}</style><script>$(document).ready(function(){var $right_img = $(".right img");   //右侧图片var $left_ul_li = $(".left ul li");  //获取左侧图像var imgs = ["../测试图片/0.jpg","../测试图片/1.jpg","../测试图片/2.jpg","../测试图片/3.jpg","../测试图片/4.jpg","../测试图片/5.jpg","../测试图片/6.jpg","../测试图片/7.jpg","../测试图片/8.jpg"];  //将图像存储到数组中var idx = 0; //设置索引//设置鼠标效果$left_ul_li.mouseover(function(){idx = $(this).index();//设置左侧图片的src为当前鼠标悬停的图片的src$right_img.attr("src",imgs[idx]);//改变边框的位置$left_ul_li.eq(idx).addClass("cur").siblings().removeClass("cur");}).mouseleave(function(){  //鼠标离开时，归位到初始位置idx = 0;$right_img.attr("src",imgs[idx]);$left_ul_li.eq(idx).addClass("cur").siblings().removeClass("cur");});});</script>
</head>
<body><div id="box" class="box"><div class="inbox"><div class="left"><ul><li class="cur"><img src="../测试图片/0.jpg" alt=""></li><li><img src="../测试图片/1.jpg" alt=""></li><li><img src="../测试图片/2.jpg" alt=""></li><li><img src="../测试图片/3.jpg" alt=""></li><li><img src="../测试图片/4.jpg" alt=""></li><li><img src="../测试图片/5.jpg" alt=""></li><li><img src="../测试图片/6.jpg" alt=""></li><li><img src="../测试图片/7.jpg" alt=""></li><li><img src="../测试图片/8.jpg" alt=""></li></ul></div><div class="right"><img src="../测试图片/0.jpg" alt=""></div></div></div>
</body>
</html>

效果图：

鼠标离开时，会自动归位到第一张图

图片资源：

jQuery实现电影海报特效相关推荐

如何使用js实现电影海报画廊特效？
js实现电影海报画廊特效特效需求: 加载页面依次自动播放下一张海报点击向前按钮,移动到钱一张海报点击向后按钮,移动到后一张海报点击底部圆点按钮,移动到对应的海报所用重点函数/方法/语句(部分 ...
Jquery Mobile转场特效之slide | 小小iPhone开发
Jquery Mobile转场特效之slide | 小小iPhone开发 2012 Jquery Mobile转场特效之slide 作者:小小发布:2012-12-12 14:03 分类:j ...
jquery背景自动切换特效
查看效果网址: http://keleyi.com/a/bjad/4kwkql05.htm 本特效的jquery版本只支持1.9.0以下. 代码如下: 1 <!DOCTYPE html PUBL ...
在集设网看世界顶级电影海报欣赏，太美了！
电影海报以其精湛的宣传力度,醒目的特有方式展现着电影的魅力.随着时代的变迁,电影海报在艺术设计.颜色选用.潮流形式上都发生了根本的变化,但是那些曾经伴随我们的电影海报以它特有的艺术价值和怀旧魅力,成为 ...
从谷歌浏览器复制不带样式_文字特效游戏海报特效字体photoshop字体图层样式
哈喽!大家好,这里公众号,Adobe软件助手. 这一期给大家带来的字体特效是游戏海报特效字体photoshop字体图层样式典型游戏酷炫风格的photoshop字体图层样式下载,可以帮助你快速生成一样 ...
php 列表收缩展示插件,可展开和收缩的jquery FAQ问答列表特效
这是一款简单的jquery FAQ问答列表特效.该FAQ问答列表可以通过点击问题的标题来展开或收缩列表,它使用简单,方便实用. 使用方法在页面中引入jquery. HTML结构该FAQ问答列表采用 ...
html怎样实现动态背景效果,利用jQuery实现动态背景特效
特效描述:利用jQuery实现动态背景特效.利用jQuery实现动态背景特效代码结构 1. 引入CSS 2. 引入JS 3. HTML代码 Example 1 ooh, pretty. Notic ...
java手风琴代码_[Java教程]18款jquery抽屉式手风琴导航特效代码
[Java教程]18款jquery抽屉式手风琴导航特效代码 0 2015-11-12 21:00:05 jquery hover抽屉式导航图片展开收缩代码 jQuery仿瑞丽鼠标滑过图片手风琴展开特效 ...
使用GridView使用类似电影海报宣传页面
import 'package:flutter/material.dart';void main() => runApp(const MyApp());/*** 电影海报主页面 GridView ...

jQuery实现电影海报特效

jQuery实现电影海报特效

jQuery实现电影海报特效

jQuery实现电影海报特效相关推荐

最新文章

热门文章